Git Product home page Git Product logo

orders-frontend's Introduction

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...

orders-frontend's People

Contributors

baikov avatar dependabot[bot] avatar

Stargazers

 avatar

Watchers

 avatar  avatar

orders-frontend's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.