Production-Grade Workflow with Docker ​

The high-level workflow is shown below, and repeats the following steps: Development -> Testing -> Deployment.

Setting up the Project ​

Use whichever system is appropriate for your programming language of choice. In this document we will use the my current preferred development and build system (as of 2023-11-12) for TypeScript projects, see Setting up a Vite project.

Create a Dockerfile.dev ​

This Dockerfile will be used during the development of the program. For example, you may want to start with something like the following.

FROM node:20-alpine

WORKDIR /app

RUN apk add --no-cache git
RUN npm install -g pnpm

COPY package.json .
run pnpm install

COPY . .

CMD ["pnpm", "run", "dev"]

FROM node:20-alpine

WORKDIR /app

RUN apk add --no-cache git
RUN npm install -g pnpm

COPY package.json .
run pnpm install

COPY . .

CMD ["pnpm", "run", "dev"]

To enable access to the container during building and development make sure to map the appropriate ports and volumes.

docker build --tag brahste/simplefrontend --file Dockerfile.dev .
docker run -p 5173:5173 -v /app/node_modules -v $(pwd):/app brahste/simplefrontend

docker build --tag brahste/simplefrontend --file Dockerfile.dev .
docker run -p 5173:5173 -v /app/node_modules -v $(pwd):/app brahste/simplefrontend

The above volume commands tells Docker to save the /app/node_modules directory in the container, but override everything else currently in the hosts $(pwd).

This can be declared using the following Docker Compose file.

version: '3.8'

services:
  simple-frontend:
    build: 
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - 5173:5173
    volumes:
      - /app/node_modules
      - .:/app

version: '3.8'

services:
  simple-frontend:
    build: 
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - 5173:5173
    volumes:
      - /app/node_modules
      - .:/app