build: Make docker compose prod and add dev extension (#175)

* Add docker-compose extension

* Add tests and .husky to frontend dockerignore

* Set app envs to production in extension

* chore: Move EXPOSE to start in pnpm dev Dockerfile

* style: Drop extra line in docker-compose

* build: Add multi-stage prod Dockerfile for next.js

* build: Configure next.config.mjs for prod

* fix: Use pnpm start in prod Dockerfile

* chore: version deprecated in docker compose

* build: Support SSL disable in local prod

* build: Drop nextjs output traces

* build(fix): Missing package-lock file

* docs: Update prod extension module docs

* build(ui): Add @types/react-syntax-highlighter 15.5.0

* chore: Run pnpm format:fix

* refactor: Remove unused util function

* chore: Fix linter errors

* fix(ui): Fix DOM nesting errors

* chore(ui): Fix lint warnings

* style(ui): Fix shadcn components linter warnings

* fix: Missing build env vars

* fix: WorkflowItem ref in playbooks

* Add NEXT_SERVER_API_URL

Co-authored-by: Daryl Lim <daryllimyt@users.noreply.github.com>

* Add suspence boundary to server-side pages

* fix(ui): Graceful error handling for unable to load workflows or playbooks in server component

* Add Dockerfiles to dockerignore

* fix: Add missing generateBuildId

* feat: Switch docker-compose prod with dev

---------

Signed-off-by: Chris Lo <46541035+topher-lo@users.noreply.github.com>
Co-authored-by: Daryl Lim <5508348+daryllimyt@users.noreply.github.com>
Co-authored-by: Daryl Lim <daryllimyt@users.noreply.github.com>

.env.example

@@ -36,6 +36,7 @@ NEXT_PUBLIC_APP_ENV=development
 NEXT_PUBLIC_APP_URL=http://localhost:3000
 # Allows the browser to communicate with the backend
 NEXT_PUBLIC_API_URL=http://localhost:8000
+NEXT_SERVER_API_URL=http://api:8000
 
 # --- Authentication + Clerk ---
 # Controls auth for both the API and the frontend server + client

docker-compose.dev.yml

@@ -0,0 +1,38 @@
+# Non-development docker compose extension file
+# - Removes all volume bindings
+# - Uses the multi-stage frontend Dockerfile
+# - Changes env vars to production
+services:
+  api:
+    volumes:
+      - ./tracecat:/app/tracecat
+      - app-storage:/var/lib/tracecat
+
+  worker:
+    volumes:
+      - ./tracecat:/app/tracecat
+      - app-storage:/var/lib/tracecat
+
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+      args:
+        NEXT_PUBLIC_API_URL: ${NEXT_PUBLIC_API_URL}
+        NEXT_PUBLIC_APP_URL: ${NEXT_PUBLIC_APP_URL}
+        NEXT_PUBLIC_DISABLE_AUTH: ${TRACECAT__DISABLE_AUTH}
+        NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: ${NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY} # Sensitive
+        NEXT_SERVER_API_URL: ${NEXT_SERVER_API_URL}
+        NODE_ENV: ${NODE_ENV}
+    volumes:
+      - ./frontend/src:/app/src
+      - ./frontend/.next:/app/.next
+      - ./frontend/node_modules:/app/node_modules
+
+  postgres_db:
+    volumes:
+      - db-storage:/var/lib/postgresql/data
+
+volumes:
+  app-storage:
+  db-storage:

docker-compose.yml

@@ -1,14 +1,9 @@
-version: "3.8"
-
 services:
   api:
     build: .
     container_name: api
     ports:
       - "8000:8000"
-    volumes:
-      - ./tracecat:/app/tracecat
-      - app-storage:/var/lib/tracecat
     environment:
       LOG_LEVEL: ${LOG_LEVEL}
       TRACECAT__API_URL: ${TRACECAT__API_URL}
@@ -34,9 +29,6 @@ services:
   worker:
     build: .
     container_name: worker
-    volumes:
-      - ./tracecat:/app/tracecat
-      - app-storage:/var/lib/tracecat
     environment:
       LOG_LEVEL: ${LOG_LEVEL}
       TRACECAT__API_URL: ${TRACECAT__API_URL}
@@ -60,18 +52,18 @@ services:
   frontend:
     build:
       context: ./frontend
+      dockerfile: Dockerfile.prod
       args:
         NEXT_PUBLIC_API_URL: ${NEXT_PUBLIC_API_URL}
         NEXT_PUBLIC_APP_URL: ${NEXT_PUBLIC_APP_URL}
+        NEXT_PUBLIC_DISABLE_AUTH: ${TRACECAT__DISABLE_AUTH}
         NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: ${NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY} # Sensitive
+        NEXT_SERVER_API_URL: ${NEXT_SERVER_API_URL}
+        NODE_ENV: ${NODE_ENV}
     container_name: frontend
     env_file: .env
     ports:
       - "3000:3000"
-    volumes:
-      - ./frontend/src:/app/src
-      - ./frontend/.next:/app/.next
-      - ./frontend/node_modules:/app/node_modules
     environment:
       CLERK_SECRET_KEY: ${CLERK_SECRET_KEY} # Sensitive
       NEXT_PUBLIC_API_URL: ${NEXT_PUBLIC_API_URL}
@@ -81,6 +73,7 @@ services:
       NEXT_PUBLIC_CLERK_SIGN_IN_URL: ${NEXT_PUBLIC_CLERK_SIGN_IN_URL}
       NEXT_PUBLIC_CLERK_SIGN_UP_URL: ${NEXT_PUBLIC_CLERK_SIGN_UP_URL}
       NEXT_PUBLIC_DISABLE_AUTH: ${TRACECAT__DISABLE_AUTH}
+      NEXT_SERVER_API_URL: ${NEXT_SERVER_API_URL}
       NODE_ENV: ${NODE_ENV}
     restart: unless-stopped
     depends_on:
@@ -93,8 +86,6 @@ services:
     container_name: postgres_db
     ports:
       - "5432:5432"
-    volumes:
-      - db-storage:/var/lib/postgresql/data
     restart: always
     shm_size: 128mb
     environment:
@@ -105,8 +96,3 @@ services:
 
 networks:
   internal-network:
-
-
-volumes:
-  app-storage:
-  db-storage:

frontend/.dockerignore

@@ -1,3 +1,8 @@
-node_modules
-build
+.husky
 .next
+build
+node_modules
+tests
+# Ignore Dockerfiles
+Dockerfile.prod
+Dockerfile

frontend/Dockerfile

@@ -1,12 +1,14 @@
+# For development only
+
 FROM node:21-slim AS base
 
+EXPOSE 3000
+
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
 
 RUN corepack enable
 COPY . /app
 WORKDIR /app
 
-
-EXPOSE 3000
 CMD [ "pnpm", "dev" ]

frontend/Dockerfile.prod

@@ -0,0 +1,55 @@
+FROM node:22-alpine AS deps
+WORKDIR /app
+
+RUN apk add --no-cache libc6-compat
+
+# Copy only the files needed to install dependencies
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+
+# Install dependencies with pnpm
+RUN corepack enable pnpm && pnpm i --frozen-lockfile
+
+FROM node:22-alpine AS builder
+WORKDIR /app
+
+ENV NODE_ENV production
+
+ARG NEXT_PUBLIC_APP_URL
+ARG NEXT_PUBLIC_API_URL
+ARG NEXT_PUBLIC_DISABLE_AUTH
+ARG NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
+ARG NEXT_SERVER_API_URL
+
+ENV NEXT_PUBLIC_APP_URL $NEXT_PUBLIC_APP_URL
+ENV NEXT_PUBLIC_API_URL $NEXT_PUBLIC_API_URL
+ENV NEXT_PUBLIC_DISABLE_AUTH $NEXT_PUBLIC_DISABLE_AUTH
+ENV NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY $NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
+ENV NEXT_SERVER_API_URL $NEXT_SERVER_API_URL
+
+COPY --from=deps /app/node_modules ./node_modules
+
+# Copy the rest of the files
+COPY . .
+
+# Run build with the preferred package manager
+RUN corepack enable pnpm && pnpm build
+
+FROM node:22-alpine AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+
+# Add nextjs user
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+# TODO: Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next ./.next
+COPY --from=builder --chown=nextjs:nodejs /app/node_modules ./node_modules
+
+USER nextjs
+
+EXPOSE 3000
+
+CMD ["/app/node_modules/.bin/next", "start"]

frontend/next.config.mjs

@@ -1,6 +1,16 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: false,
+
+const nextConfig = {}
+
+if (process.env.NODE_ENV !== "production") {
+  nextConfig.reactStrictMode = false
+} else {
+  nextConfig.reactStrictMode = true
+  nextConfig.output = "standalone"
+  generateBuildId: async () => {
+    // Return a unique identifier for each build.
+    return Date.now().toString()
+  }
 }
 
 export default nextConfig

frontend/package.json

@@ -82,6 +82,7 @@
     "@types/node": "^20.12.12",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@types/uuid": "^9.0.8",
     "@typescript-eslint/eslint-plugin": "^7.9.0",
     "@typescript-eslint/parser": "^7.9.0",