feat(prod): production stage for frontend

Dockerfile.frontend

@@ -3,12 +3,29 @@ FROM oven/bun:1.2.18-alpine@sha256:a7df687a2f684ee2f7404e2592039e192d75d26a04f84
 WORKDIR /app
 
 # Install dependencies
-COPY package.json bun.lock ./
+COPY frontend/package.json frontend/bun.lock ./
 RUN bun install --frozen-lockfile
 
+# ------ Build stage ------
+FROM deps AS build
+WORKDIR /app
+
+# Copy code, and compile
+COPY frontend/ .
+RUN bun run build
+
 # ------ Development stage ------
 FROM deps AS dev
 
 # Run
 CMD ["bun", "run", "dev"]
 
+# ------ Production stage ------
+FROM caddy:2.10.0-alpine@sha256:e2e3a089760c453bc51c4e718342bd7032d6714f15b437db7121bfc2de2654a6 AS prod
+WORKDIR /app
+
+# Copy built code
+COPY --from=build /app/dist .
+
+# Copy configuration for caddy
+COPY caddy/prod /etc/caddy/Caddyfile

caddy/prod

@@ -5,9 +5,16 @@
 
 :8080 {
     encode
-    reverse_proxy frontend:3000
 
+    # Proxy to backend
     handle_path /api* {
         reverse_proxy backend:8080
     }
+
+    # Server static files
+    handle_path /* {
+        root * /app
+        try_files {path} /index.html
+        file_server
+    }
 }

development.yml

@@ -25,8 +25,8 @@ services:
         condition: service_healthy
   frontend:
     build:
-      context: ./frontend
-      dockerfile: ../Dockerfile.frontend
+      context: .
+      dockerfile: Dockerfile.frontend
       target: dev # Development stage
     restart: unless-stopped
     container_name: cover-letter-frontend

frontend/src/layouts/Authorised.tsx

@@ -6,10 +6,9 @@ import type { TokenUserInfo } from "@/types/api";
 
 interface Props {
     children: React.ReactNode;
-    className?: string;
 }
 
-export default function Authorised({ children, className = "" }: Props) {
+export default function Authorised({ children }: Props) {
     // Check authentication
     useQuery({
         queryKey: ["user_info"],

frontend/src/main.tsx

@@ -1,4 +1,3 @@
-import { StrictMode } from "react";
 import ReactDOM from "react-dom/client";
 import { RouterProvider, createRouter } from "@tanstack/react-router";
 

frontend/src/routes/register.tsx

@@ -3,7 +3,7 @@ import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle }
 import { useAppForm } from "@/hooks/formHook";
 import Guest from "@/layouts/Guest";
 import requests from "@/lib/requests";
-import { createFileRoute, Link, redirect, useNavigate } from "@tanstack/react-router";
+import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
 import { useState } from "react";
 import toast from "react-hot-toast";
 import * as z from "zod/v4";

frontend/vite.config.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { defineConfig } from "vite";
 import viteReact from "@vitejs/plugin-react";
 import tailwindcss from "@tailwindcss/vite";

production.yml

@@ -21,33 +21,18 @@ services:
     depends_on:
       db: # Wait for database to be ready (Pass healthcheck)
         condition: service_healthy
-  # frontend:
-  #   build:
-  #     context: ./frontend
-  #     dockerfile: ../Dockerfile.frontend
-  #     target: dev # Development stage
-  #   restart: unless-stopped
-  #   container_name: cover-letter-frontend
-  #
-  #   volumes:
-  #     - "./frontend:/app" # Mount frontend
-  #     - "/app/node_modules" # Ignore node_modules
-  #   networks:
-  #     - cover-letter-network
-  # proxy:
-  #   image: caddy:alpine
-  #   restart: unless-stopped
-  #   container_name: cover-letter-proxy
-  #
-  #   networks:
-  #     - cover-letter-network
-  #   volumes:
-  #     - ./caddy/Caddyfile:/etc/caddy/Caddyfile
-  #   ports:
-  #     - 8000:8080
-  #   depends_on:
-  #     - frontend
-  #     - backend
+  frontend:
+    build:
+      context: .
+      dockerfile: Dockerfile.frontend
+      target: prod # Development stage
+    restart: unless-stopped
+    container_name: cover-letter-frontend
+
+    ports:
+      - 80:8080
+    networks:
+      - cover-letter-network
   db:
     image: postgres:13.21-alpine3.22
     restart: unless-stopped

scripts/var.sh

@@ -1,3 +1,3 @@
 #!/bin/bash
-# export file="development.yml"
-export file="production.yml"
+export file="development.yml"
+# export file="production.yml"