refactor: frontend code quality (#22)

docker-compose.dev.yaml

@@ -4,7 +4,7 @@ services:
       context: services/web
       dockerfile: Dockerfile.dev
     ports:
-      - 3000:3000
+      - 80:3000
     environment:
       - NEXT_PUBLIC_API_BASE_URL=${NEXT_PUBLIC_API_BASE_URL}
       - API_BASE_URL=${API_BASE_URL}

services/item/src/index.ts

@@ -21,9 +21,11 @@ app.use(
   // once Bun has implemented `CompressionStream`. See oven-sh/bun#1723.
   compress(),
 
-  // Enable CORS for all origins.
-  // TODO: Narrow the origin to our own domain for better security.
-  cors({ origin: "*", credentials: true }),
+  // Enable CORS for local development and testing.
+  cors({
+    origin: (origin) => (Bun.env.NODE_ENV === "production" ? null : origin),
+    credentials: Bun.env.NODE_ENV === "production" ? false : true,
+  }),
 
   // Log every incoming request and their corresponding response.
   // TODO: Write logs to a file for better monitoring.

services/item/tests/index.test.ts

@@ -39,9 +39,15 @@ describe("Compression", () => {
 
 describe("CORS", () => {
   it("sets the correct CORS headers", async () => {
-    const res = await request("/healthz");
+    const res = await request("/healthz", {
+      headers: {
+        Origin: "http://localhost:3000",
+      },
+    });
 
-    expect(res.headers.get("Access-Control-Allow-Origin")).toEqual("*");
+    expect(res.headers.get("Access-Control-Allow-Origin")).toEqual(
+      "http://localhost:3000",
+    );
     expect(res.headers.get("Access-Control-Allow-Credentials")).toEqual("true");
   });
 });

services/web/.env.example

@@ -1,9 +1,3 @@
-# How user browser accesses API.
-# For example, "https://nshm.mrcai.dev/api",
-# Note: Do not include a trailing slash.
+# Refer to `src/global.d.ts` for explanations about each environment variable.
 NEXT_PUBLIC_API_BASE_URL=
-
-# How web service accesses other services.
-# For example, "http://service-registry:8761".
-# Note: Do not include a trailing slash.
 API_BASE_URL=

services/web/Dockerfile

@@ -1,5 +1,3 @@
-# Build Next.js standalone server.
-
 FROM node:lts-alpine AS build
 
 WORKDIR /app
@@ -19,17 +17,12 @@ ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL
 
 RUN pnpm run build
 
-# Copy and serve only the necessary files.
-
 FROM node:lts-alpine AS production
 
 WORKDIR /app
 
 COPY --from=build /app/.next/standalone .
 
 ENV HOSTNAME=0.0.0.0
-ENV PORT=3000
-
-EXPOSE 3000
 
 CMD ["node", "server.js"]

services/web/Dockerfile.dev

@@ -13,9 +13,8 @@ COPY package.json pnpm-lock.yaml ./
 
 RUN pnpm install --frozen-lockfile
 
-ENV HOSTNAME=0.0.0.0
-ENV PORT=3000
+COPY . .
 
-EXPOSE 3000
+ENV HOSTNAME=0.0.0.0
 
 CMD ["pnpm", "run", "dev"]

services/web/next.config.js

@@ -1,6 +1,9 @@
 /** @type {import("next").NextConfig} */
 const config = {
   output: "standalone",
+  experimental: {
+    typedRoutes: true,
+  },
 };
 
 export default config;

services/web/package.json

@@ -1,47 +1,47 @@
 {
-  "name": "web-service",
+  "name": "web",
   "private": true,
   "type": "module",
-  "packageManager": "pnpm@9.11.0",
+  "packageManager": "pnpm@9.12.0",
   "scripts": {
     "dev": "next dev",
     "build": "next build && cp -r .next/static .next/standalone/.next && cp -r public .next/standalone",
     "start": "node .next/standalone/server.js",
     "lint": "tsc && eslint . --cache --cache-location node_modules/.cache/eslint/.eslint-cache"
   },
   "dependencies": {
-    "@radix-ui/react-alert-dialog": "^1.1.1",
-    "@radix-ui/react-avatar": "^1.1.0",
-    "@radix-ui/react-dialog": "^1.1.1",
-    "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-alert-dialog": "^1.1.2",
+    "@radix-ui/react-avatar": "^1.1.1",
+    "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-slot": "^1.1.0",
-    "@radix-ui/react-toast": "^1.2.1",
+    "@radix-ui/react-toast": "^1.2.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.446.0",
-    "next": "^14.2.13",
+    "lucide-react": "^0.447.0",
+    "next": "^14.2.14",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "swr": "^2.2.5",
-    "tailwind-merge": "^2.5.2",
+    "tailwind-merge": "^2.5.3",
     "tailwindcss-animate": "^1.0.7",
-    "valibot": "^0.42.1"
+    "valibot": "1.0.0-beta.0"
   },
   "devDependencies": {
-    "@eslint/compat": "^1.1.1",
+    "@eslint/compat": "^1.2.0",
     "@eslint/eslintrc": "^3.1.0",
     "@types/eslint-config-prettier": "^6.11.3",
     "@types/eslint__eslintrc": "^2.1.2",
-    "@types/node": "^22.7.2",
-    "@types/react": "^18.3.9",
+    "@types/node": "^22.7.4",
+    "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
-    "eslint": "^9.11.1",
-    "eslint-config-next": "14.2.13",
+    "eslint": "^9.12.0",
+    "eslint-config-next": "14.2.14",
     "eslint-config-prettier": "^9.1.0",
     "lint-staged": "^15.2.10",
     "prettier": "^3.3.3",
-    "shadcn": "^2.0.8",
+    "shadcn": "^2.1.0",
     "tailwindcss": "^3.4.13",
     "typescript": "^5.6.2"
   },