build(v3): use pnpm, docker, docker-compose to orchestrate two services (client, server)

client/Dockerfile

@@ -0,0 +1,51 @@
+FROM node:16-alpine as dependencies
+
+RUN apk add --no-cache curl g++ make python3 \
+  && curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm
+
+WORKDIR /app
+
+COPY package.json pnpm-*.yaml ./
+COPY ./schema/package.json ./schema/package.json
+COPY ./client/package.json ./client/package.json
+
+RUN pnpm install --frozen-lockfile
+
+FROM node:16-alpine as builder
+
+RUN apk add --no-cache curl g++ make python3 \
+  && curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm
+
+WORKDIR /app
+
+COPY . .
+
+COPY --from=dependencies /app/node_modules ./node_modules
+COPY --from=dependencies /app/schema/node_modules ./schema/node_modules
+COPY --from=dependencies /app/client/node_modules ./client/node_modules
+
+RUN cp .env ./client/.env
+
+RUN pnpm run build:schema
+RUN pnpm run build:client
+
+FROM node:16-alpine as production
+
+WORKDIR /app
+
+RUN apk add --no-cache curl \
+  && curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm
+
+COPY --from=builder /app/pnpm-*.yaml .
+COPY --from=builder /app/package.json .
+COPY --from=builder /app/client/.next ./client/.next
+COPY --from=builder /app/client/public ./client/public
+COPY --from=builder /app/client/next.config.js ./client/next.config.js
+COPY --from=builder /app/client/next-i18next.config.js ./client/next-i18next.config.js
+COPY --from=builder /app/client/package.json ./client/package.json
+
+RUN pnpm install -F client --frozen-lockfile --prod
+
+EXPOSE 3000
+
+CMD [ "pnpm", "run", "start:client" ]

client/config/theme.ts

@@ -1,6 +1,4 @@
 import { createTheme } from '@mui/material';
-import { grey } from '@mui/material/colors';
-import { teal } from 'tailwindcss/colors';
 
 const theme = createTheme({
   typography: {
@@ -57,8 +55,8 @@ export const lightTheme = createTheme({
   ...theme,
   palette: {
     mode: 'light',
-    primary: { main: grey[800] },
-    secondary: { main: teal[600] },
+    primary: { main: '#404040' }, // neutral[700]
+    secondary: { main: '#0d9488' }, // teal[600]
   },
 });
 
@@ -66,7 +64,7 @@ export const darkTheme = createTheme({
   ...theme,
   palette: {
     mode: 'dark',
-    primary: { main: grey[100] },
-    secondary: { main: teal[400] },
+    primary: { main: '#f5f5f5' }, // neutral[100]
+    secondary: { main: '#2dd4bf' }, // teal[400]
   },
 });

client/next.config.js

@@ -1,3 +1,4 @@
+const { version } = require('../package.json');
 const { i18n } = require('./next-i18next.config');
 
 /** @type {import('next').NextConfig} */
@@ -6,20 +7,15 @@ const nextConfig = {
 
   i18n,
 
-  env: {
-    appVersion: '3.0.0',
-    appUrl: process.env.APP_URL,
-    serverUrl: process.env.SERVER_URL,
-    googleClientId: process.env.GOOGLE_CLIENT_ID,
-  },
-
   images: {
     domains: ['www.gravatar.com'],
   },
 
-  experimental: {
-    externalDir: true,
-    outputStandalone: true,
+  env: {
+    appVersion: version,
+    appUrl: process.env.APP_URL,
+    serverUrl: process.env.SERVER_URL,
+    googleClientId: process.env.GOOGLE_CLIENT_ID,
   },
 
   // Hack to make Tailwind darkMode 'class' strategy with CSS Modules

client/package.json

@@ -39,6 +39,7 @@
     "react-hotkeys-hook": "^3.4.4",
     "react-icons": "^4.3.1",
     "react-markdown": "^8.0.0",
+    "react-query": "^3.34.16",
     "react-redux": "^7.2.6",
     "react-zoom-pan-pinch": "^2.1.3",
     "redux": "^4.1.2",
@@ -51,7 +52,6 @@
   },
   "devDependencies": {
     "@babel/core": "^7.17.5",
-    "@reactive-resume/schema": "workspace:^",
     "@types/downloadjs": "^1.4.3",
     "@types/lodash": "^4.14.179",
     "@types/node": "17.0.21",
@@ -66,9 +66,9 @@
     "eslint-config-next": "12.1.0",
     "postcss": "^8.4.7",
     "prettier": "^2.5.1",
-    "react-query": "^3.34.16",
     "sass": "^1.49.9",
     "tailwindcss": "^3.0.23",
-    "typescript": "<4.6.0"
+    "typescript": "<4.6.0",
+    "@reactive-resume/schema": "workspace:*"
   }
 }