Frontend for Orders project

Other parts:

1. Revers-proxy
2. Front
3. Back

Local development

Preparation

1. Copy .env.example and rename it to .env
2. Install Node v18
3. Install and activate all recomended VSCode extensions
4. Enable Take Over Mode:
   • Ctrl + Shift + P (macOS: Cmd + Shift + P).
   • Type built and select Extensions: Show Built-in Extensions.
   • Type typescript in the extension search box (do not remove @builtin prefix).
   • Click the little gear icon of TypeScript and JavaScript Language Features, and select Disable (Workspace).
5. Install yarn:

   npm install --global yarn

6. Install all packages

   yarn

7. Run yarn typecheck for type checking
8. Run yarn lint for linting

Choose one of .env presets. HMR working in all modes.

To use Mode 1 and Mode 2, a raised container from this repo with Traefik is required. Because an external network to which frontend and backend containers are connected is created in Traefik compose.

Mode 0: As separate dev server on custom port

1. No need for a Traefik container
2. Set uniqe project name

   COMPOSE_PROJECT_NAME=orders

3. Uncomment Mode 0 block:

   # Mode 0: As separate dev server on custom port
   COMPOSE_FILE=local.yml
   DOMAIN=localhost
   NUXT_DOCKER_PORT=3018  # custom port
   HMR_DOCKER_PORT=24678

4. Run docker compose build and docker compose up -d

Mode 1: As dev server behind the Traefik with http

1. The Traefik container must be running in Mode 1
2. Set the project name same as COMPOSE_PROJECT_NAME in Traefik .env

   COMPOSE_PROJECT_NAME=orders

3. Uncomment Mode 1 block:

   # Mode 1: As dev server behind the Traefik with http
   # For Windows users: use `;` (semicolon) as separator - local.yml;local.traefik.yml
   COMPOSE_FILE=local.yml:local.traefik.yml
   DOMAIN=localhost  # or another aliace for 127.0.0.1 declared in etc/hosts, but same as DOMAIN in Traefik .env!

4. Run Traefik container, then run Nuxt container with docker compose build and docker compose up -d

Mode 2: As dev server behind the Traefik + SSL and custom domain

1. The Traefik container must be running in Mode 2
2. Set the project name same as COMPOSE_PROJECT_NAME in Traefik .env

   COMPOSE_PROJECT_NAME=orders

3. Uncomment Mode 2 block:

   # Mode 2: As dev server behind the Traefik + SSL and custom domain
   # For Windows users: use `;` (semicolon) as separator - local.yml;local.traefik.yml;local.traefik.ssl.yml
   COMPOSE_FILE=local.yml:local.traefik.yml:local.traefik.ssl.yml
   DOMAIN=orders.local  # same as DOMAIN in Traefik .env!

4. Run Traefik container, then run Nuxt container with docker compose build and docker compose up -d

Deploy to production

Mode 3: SSR (Universal rendering) with Node.js server

1. The Traefik container must be running in Mode 3 on prod server
2. Copy .env.example and rename it to .env on prod server
3. Set the project name same as COMPOSE_PROJECT_NAME in Traefik .env

   COMPOSE_PROJECT_NAME=orders

4. Uncomment Mode 3 block:

   # Mode 3: For production with SSR
   COMPOSE_FILE=production.yml
   DOMAIN=orders.baikov.dev

5. Run container with docker compose build and docker compose up -d

Mode 4: SPA with Nginx

coming soon...