🚀 Setup of new Dockerfile's

- Dockerfiles are now based on using `pnpm` and `nginx`
- Helper Makefile for easier running commands
- Dockerfile for `frontend-design-poc`
- Dockerfile for `storybook`
- Update Dockerfile for `bff-frontend-poc`
- Update Dockerfile for `bff`

Future TODO:

- Fix Dockerfile setup for the `bff`, it currently doesn't start
- Adapt `docker-compose.yml` file
- Setup traefik in `docker-compose.yml`

Relates to #180

.dockerignore

@@ -0,0 +1,7 @@
+node_modules
+storybook-static
+build
+.git
+.gitignore
+*.md
+dist

Makefile

@@ -0,0 +1,30 @@
+typecheck: ## Runs `pnpm turbo typecheck`
+	pnpm turbo typecheck
+
+lint: ## Runs `pnpm turbo lint`
+	pnpm turbo lint
+
+test: ## Runs `pndpm turbo test`
+	pnpm turbo test
+
+build: ## Runs `pnpm turbo build`
+	pnpm turbo build
+
+build-docker: ## Runs `pnpm turbo build:docker`
+	pnpm turbo build:docker
+
+# ---------------------
+# - Helper functions  -
+# ---------------------
+
+.PHONY: help select
+.DEFAULT_GOAL := select
+
+select:
+	@make help | sed '1,2d' | \
+		fzf --ansi --bind "enter:execute(make {1} < /dev/tty > /dev/tty 2>&1)+abort" || true
+
+# Help command taken from: https://marmelab.com/blog/2016/02/29/auto-documented-makefile.html
+help:
+	@echo "Usage: make [task]\n"
+	@grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | sort | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-30s\x1b[0m %s\n", $$1, $$2}'

package.json

@@ -1,6 +1,5 @@
 {
   "private": true,
-  "scripts": {},
   "devDependencies": {
     "turbo": "1.12.2",
     "@biomejs/biome": "1.5.3"

packages/bff-frontend-poc/Dockerfile

@@ -1,26 +1,19 @@
-# Use a Node.js base image
-FROM node:18
+FROM node:20-slim AS build
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
 
-# Set working directory
-WORKDIR /react
-
-# Copy package.json and package-lock.json
-COPY package.json ./
-
-# Copy yarn.lock
-# COPY yarn.lock ./
+WORKDIR /app
+COPY . .
 
-# Install dependencies
-RUN yarn
+RUN pnpm install --frozen-lockfile
+RUN pnpm --filter bff-frontend-poc run build
 
-# Copy the rest of the client code
-COPY . .
+# ---
 
-# Build the React app
-RUN yarn run build
+FROM nginx:1.25-alpine
+COPY --from=build /app/packages/bff-frontend-poc/dist/ /usr/share/nginx/html/
 
-# Expose the port React app runs on (default: 3000)
 EXPOSE 80
 
-# Command to start the React app
-CMD [ "yarn", "docker" ]
+CMD ["nginx", "-g", "daemon off;"]

packages/bff-frontend-poc/package.json

@@ -14,7 +14,9 @@
     "typecheck": "tsc --noEmit",
     "typecheck:watch": "tsc --noEmit -w",
     "lint": "",
-    "lint:fix": ""
+    "lint:fix": "",
+    "build:docker": "docker build -f ./Dockerfile -t bff-frontend-poc ../..",
+    "run:docker": "docker run -it -p 80:80 bff-frontend-poc"
   },
   "dependencies": {
     "@tanstack/react-query": "^5.8.4",

packages/bff/Dockerfile

@@ -1,23 +1,12 @@
-# Use a Node.js base image
-FROM node:18
+FROM node:20-slim AS build
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
 
-# Set working directory
 WORKDIR /app
-
-# Copy package.json
-COPY package.json ./
-
-# Copy yarn.lock
-COPY yarn.lock ./
-
-# Install dependencies
-RUN yarn install
-
-# Copy the rest of the server code
 COPY . .
 
-# Expose the port your Node.js server runs on (default: 5000)
-EXPOSE 3000
+RUN pnpm install --frozen-lockfile
 
-# Command to start the Node.js server
-CMD [ "yarn", "dev" ]
+EXPOSE 3000
+CMD [ "pnpm", "dev" ]

packages/bff/package.json

@@ -43,7 +43,9 @@
     "typeorm:revert": "npm run typeorm migration:revert",
     "dev2": "nodemon --watch 'src/**/*.ts' --exec 'tsc && node dist/app.js'",
     "dev3": "nodemon --watch 'src/**/*.ts' --exec 'ts-node' src/app.ts",
-    "dev": "concurrently \"npx tsc --watch\" \"nodemon --watch 'src/**/*.ts'\""
+    "dev": "concurrently \"npx tsc --watch\" \"nodemon --watch 'src/**/*.ts'\"",
+    "build:docker": "docker build -f ./Dockerfile -t bff ../..",
+    "run:docker": "docker run -it -p 80:80 bff"
   },
   "devDependencies": {
     "@azure/keyvault-secrets": "^4.7.0",

packages/frontend-design-poc/Dockerfile

@@ -0,0 +1,19 @@
+FROM node:20-slim AS build
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+
+WORKDIR /app
+COPY . .
+
+RUN pnpm install --frozen-lockfile
+RUN pnpm --filter frontend-design-poc run build
+
+# ---
+
+FROM nginx:1.25-alpine
+COPY --from=build /app/packages/frontend-design-poc/dist/ /usr/share/nginx/html/
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

packages/frontend-design-poc/package.json

@@ -9,7 +9,9 @@
     "typecheck": "tsc --noEmit",
     "preview": "vite preview",
     "test": "vitest run",
-    "test:watch": "vitest watch"
+    "test:watch": "vitest watch",
+    "build:docker": "docker build -f ./Dockerfile -t frontend-design-poc ../..",
+    "run:docker": "docker run -it -p 80:80 frontend-design-poc"
   },
   "dependencies": {
     "@digdir/design-system-react": "^0.47.0",

packages/storybook/.gitignore

@@ -1,3 +1,5 @@
+storybook-static/
+
 # Logs
 logs
 *.log

packages/storybook/Dockerfile

@@ -0,0 +1,20 @@
+FROM node:20-slim AS build
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+
+WORKDIR /app
+COPY . .
+
+RUN pnpm install --frozen-lockfile
+RUN pnpm --filter storybook run build
+
+# ---
+
+FROM nginx:1.25-alpine
+COPY --from=build /app/packages/storybook/storybook-static/ /usr/share/nginx/html/
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]
+

packages/storybook/package.json

@@ -4,11 +4,11 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build": "storybook build",
+    "start:storybook": "storybook dev -p 6006",
+    "build:storybook": "storybook build",
+    "build:docker": "docker build -f ./Dockerfile -t storybook ../..",
+    "run:docker": "docker run -it -p 80:80 storybook"
   },
   "dependencies": {
     "@digdir/design-system-react": "^0.47.0",

turbo.json

@@ -15,7 +15,10 @@
 		"typecheck": {
 			"outputs": [],
 			"cache": false
+		},
+		"build:docker": {
+			"outputs": [],
+			"cache": false
 		}
-
 	}
 }