2. Vue.js Frontend Introduction

Access on https://localhost:8443 with API from Django on https://localhost:8443/api

Look at the Nuxt documentation to learn more.

Development setup

See README.md in root directory to run ~~~live dev server~~~ (right now it is express due to nuxt live server being unbelievably slow) over Docker

Production deployment

Uses _ppc.Dockerfile instead of _x64.Dockerfile => Uses express server serving static build files instead of nuxt dev server
Currently only implemented for Github workflows, see .github/workflows/main.yml for procedure

Docker Compose Snippet


presentation_frontend:
    build:
      dockerfile: _x64.Dockerfile
      context: presentation_frontend
    environment:
      - DEV_ENV=${DEV_ENV}
      - ...
    volumes:
      - ./presentation_frontend/...
    depends_on:
      presentation_backend:
        condition: service_healthy
    healthcheck:
      test:
        ["CMD-SHELL", "curl -I -f localhost:4200/healthcheck || exit 1"]
      start_period: 20s
      interval: 10s
      timeout: 5s
      retries: 120
    networks:
      - common_network
    restart: unless-stopped
    logging:
      driver: "syslog"
      options:
        syslog-address: "udp://localhost:514"
        tag: "${XREFNAME}__presentation_frontend"

  company_admin_frontend:
    build:
      dockerfile: _x64.Dockerfile
      context: company_frontend
    environment:
      - DEV_ENV=${DEV_ENV}
      - ...
    volumes:
      - ./company_frontend/...
    depends_on:
      company_admin_backend:
        condition: service_healthy
    healthcheck:
      test:
        ["CMD-SHELL", "curl ..."]
      start_period: 20s
      interval: 10s
      timeout: 5s
      retries: 120
    networks:
      - common_network
    restart: unless-stopped
    logging:
      driver: ...
      options:
        syslog-address: ...
        tag: ...