Setting up a Remix Project

By: gmarr

Published On: 2022-04-08

1. Setting up the environment

1.1 Installing Remix

npx create-remix@latest
npx create-remix@1.3.4

1.2 Installing the necessary libraries

npm install -D concurrently tailwindcss @tailwindcss/typography marked
npm add @types/marked -D

1.3 Tailwind Setup

1.3.1 Remix Server

Inside package.json add:

 "scripts": {
    "build": "npm run build:css && remix build ",
    "build:css": "tailwindcss -o ./app/styles/tailwind.css",
    "dev": " concurrently \"npm run dev:css\" \"remix dev\"",
    "dev:css":"tailwindcss -o ./app/styles/tailwind.css --watch",
    "postinstall": "remix setup node",
    "start": "remix-serve build"
}

1.3.2 Express Server

  "scripts": {
    "build": "npm run build:css && remix build",
    "build:css": "tailwindcss -o ./app/styles/tailwind.css",
    "dev": " concurrently \"npm run dev:css\" \"remix build && run-p dev:*\"",
    "dev:node": "cross-env NODE_ENV=development nodemon ./server.js --watch ./server.js",
    "dev:remix": "remix watch",
    "dev:css": "tailwindcss -o ./app/styles/tailwind.css --watch",
    "start": "cross-env NODE_ENV=production node ./server.js"
  },

Then in the terminal run:

npx tailwind init

and add the next snippet of code inside the tailwind.config.json

module.exports = {
  content: ["./app/**/*.{js,ts,jsx,tsx}",],
  theme: {
    extend: {}
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

1.4 setup highlight.js (Optional)

npm install highlight.js

To add it on a file use the next snippet of code:

import {marked} from "marked"
import hljs from 'highlight.js';
import styles from "highlight.js/styles/github-dark-dimmed.css"
import { useEffect } from "react";
import type {LinksFunction} from "@remix-run/node"

export const links: LinksFunction = () =>{
    return[
        {
            rel:"stylesheet",
            href:styles
        }
    ]
}

export default function Post(){
    useEffect(() => {
        hljs.initHighlighting();
    }, [])
} 

2. Remix 101

3. Deploying on a VM

3.1 Creating the VM on Azure

3.2 Installing Docker

sudo apt-get update
sudo apt-get install \
    ca-certificates \
    curl \
    gnupg \
    lsb-release

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg

echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu \ $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io

sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

sudo chmod +x /usr/local/bin/docker-compose

docker-compose --version

3.2.1 Creating Dockerfile and docker-compose.yml

# Base Node image
FROM node:16-alpine as base

# Setup all node_modules
FROM base as deps

RUN mkdir /app
WORKDIR /app

ADD package.json package-lock.json ./
RUN npm install --production=false

# Setup production node_modules
FROM base as production-deps

RUN mkdir /app
WORKDIR /app

COPY --from=deps /app/node_modules /app/node_modules
ADD package.json package-lock.json ./
RUN npm prune --production

# Build the app
FROM base as build

ENV NODE_ENV=production

RUN mkdir /app
WORKDIR /app

COPY --from=deps /app/node_modules /app/node_modules

ADD . .
RUN npm run build

# Build production image
FROM base

ENV NODE_ENV=production
ENV PORT=80

RUN mkdir /app
WORKDIR /app

COPY --from=production-deps /app/node_modules /app/node_modules

COPY --from=build /app/build /app/build
COPY --from=build /app/public /app/public
ADD . .

EXPOSE 80
version: "3.8"
services:
  app:
    container_name: remix_run
    build: .
    command: npm run start
    ports:
      - 80:80
    restart: always

3.3 Install and Setup of NGINX

apt install nginx
systemctl status nginx

Visit /etc/nginx/sites-enabled and add the next snippet of code:

server {
        listen 80 default_server;
        listen [::]:80 default_server;

        server_name blog.gerardom.xyz ;

        location / {
                proxy_pass http://0.0.0.0:3000;
        proxy_set_header HOST $host;
        }
}

For additional tunnels, we can add the next snippet of code in the /etc/nginx/sites-enabled route:

server{  
    listen 80;
    listen [::]:80;
    
    server_name twitch.gmarr.com;

    location / {
        proxy_pass http://0.0.0.0:6000;
        proxy_set_header HOST $host;
# These are the critical headers needed by uvicorn to honor HTTPS in url_for :
        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Proto $scheme;
    }

}

This commands are used to montor the status:

 lsof -i -P | grep LISTEN 
systemctl restart nginx
systemctl reload nginx
sudo fuser -k 80/tcp
sudo pkill -f nginx & wait $!

3.4 Install and Setup of certbot

sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d blog.gerardom.xyz
certbot renew --dry-run