VueJS/ReactJS/JavaScript Single Page Application (SPA) development environment using Docker, Docker Compose, Visual Studio Code's 'Remote Containers' extension, and NGINX.

.devcontainer.json

{
  "name": "vs-code-remote-containers_workspace",
  "dockerComposeFile": "../docker-compose.yml",
  "service": "workspace",
  "workspaceFolder": "/workspace",

  // Extensions
  // Add the IDs of extensions to be installed within Visual Studio Code when
  // the container is created.
  "extensions": [
    "dbaeumer.vscode-eslint",
    "editorconfig.editorconfig",
    "firefox-devtools.vscode-firefox-debug",
    "octref.vetur",
    "mikestead.dotenv",
    "stylelint.vscode-stylelint",
  ],

  // Settings
  // Visual Studio Code settings to be applied when the container is created.
  "settings": {
    "terminal.integrated.shell.linux": "/bin/bash"
  }
}

.dockerignore

################################################################################
# Docker
################################################################################

.dockerignore
docker-compose*
Dockerfile*

################################################################################
# Git
################################################################################

.git
.gitattributes
.gitignore
.keep

################################################################################
# EditorConfig
################################################################################

.editorconfig

################################################################################
# Node
################################################################################

node_modules

################################################################################
# Compiled Directories & Files
################################################################################

dist

################################################################################
# Continuous Integration & Deployment (CD & CD)
################################################################################

################################################################################
# Miscellaneous
################################################################################

LICENCE
README.md

docker-compose.yml

version: "3.7"

services:

  nginx:
    container_name: nginx
    build:
      context: .
      dockerfile: ./.docker/nginx/Dockerfile
    volumes:
      - ".:/usr/share/nginx/html"
    ports:
      - "80:80"

  workspace:
    container_name: workspace
    build:
      context: .
      dockerfile: ./.docker/workspace/Dockerfile
    volumes:
      - ".:/workspace"
    ports:
      - "8080:8080"

DockerfileNGINX

FROM nginx:stable-alpine

COPY .docker/nginx/nginx.development.conf /etc/nginx/conf.d/default.conf

WORKDIR /usr/share/nginx/html

CMD ["nginx", "-g", "daemon off;"]

DockerfileWorkspace

FROM node:lts

USER node

WORKDIR /workspace

ENTRYPOINT ["/bin/bash", "-c"]

CMD ["while sleep 1000; do :; done"]

nginx.development.conf

server {
  listen       80;
  server_name  localhost;

  # Redirect all requests to `index.html` - Single Page Application (SPA)
  # mode.
  location / {
    root   /usr/share/nginx/html/dist;
    index  index.html;
    try_files $uri $uri/ /index.html?$args;
  }

  # Proxy API requests to circumvent CORS issue when viewing on other (test)
  # devices through the local network.
  # NOTE: Some of these details are duplicated with `.env.local`. Please ensure
  # the API details are kept up-to-date.
  # location /api/ {
  #   proxy_pass https://api.example.com/;

  #   add_header Access-Control-Allow-Origin *;
  #   add_header Access-Control-Allow-Methods "POST, GET, OPTIONS";
  #   add_header Access-Control-Allow-Headers "Origin, Authorization, Accept";
  #   add_header Access-Control-Allow-Credentials true;
  # }

  # Redirect server error pages to the static page `/50x.html`.
  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
    root   /usr/share/nginx/html/dist;
  }
}