Merge pull request #31 from noclocks/hotfix/nav-server-error

Hotfix/nav server error

.github/workflows/cloudrun.yml

@@ -28,6 +28,6 @@ jobs:
     - name: Deploy to Cloud Run
       run: |
         gcloud run deploy bastienlaw-website \
-        --region useast1 \
-        --source .\app\ \
+        --region us-east1 \
+        --source ./app/ \
         --allow-unauthenticated

app/Dockerfile

@@ -1,10 +1,16 @@
-ARG NODE_VERSION=18
-ARG PNPM_VERSION=9.0.5
+# syntax=docker/dockerfile:1
+
+# ENV COREPACK_ENABLE_STRICT=0
+
+ARG NODE_VERSION=20.11.0
+ARG PNPM_VERSION=9.7.0
 
 ################################################################################
-# Base stage for shared node/pnpm setup
+# Use node image for base image for all stages.
 FROM node:${NODE_VERSION}-alpine AS base
 
+ENV DOCKER_BUILDKIT=1
+
 # Associate with GitHub repository
 LABEL org.opencontainers.image.source=https://github.com/noclocks/bastienlaw-remix
 
@@ -16,67 +22,61 @@ RUN --mount=type=cache,target=/root/.npm \
     npm install -g pnpm@${PNPM_VERSION}
 
 ################################################################################
-# Dependencies stage - install all dependencies
+# Create a stage for installing production dependecies.
 FROM base AS deps
 
-# Copy package files
-COPY package.json pnpm-lock.yaml ./
-
-# Install dependencies with a more flexible approach
-RUN --mount=type=cache,target=/root/.local/share/pnpm/store \
-    pnpm install --prod
+# Download dependencies AS a separate step to take advantage of Docker's caching.
+# Leverage a cache mount to /root/.local/share/pnpm/store to speed up subsequent builds.
+# Leverage bind mounts to package.json and pnpm-lock.yaml to avoid having to copy them
+# into this layer.
+RUN --mount=type=bind,source=package.json,target=package.json \
+    --mount=type=bind,source=pnpm-lock.yaml,target=pnpm-lock.yaml \
+    --mount=type=cache,target=/root/.local/share/pnpm/store \
+    pnpm install
 
 ################################################################################
-# Builder stage - build the application
-FROM base AS builder
-
-# Copy package files
-COPY package.json pnpm-lock.yaml ./
+# Create a stage for building the application.
+FROM deps AS build
 
-# Install all dependencies (including dev deps)
-RUN --mount=type=cache,target=/root/.local/share/pnpm/store \
-    pnpm install
+# Download additional development dependencies before building, AS some projects require
+# "devDependencies" to be installed to build. If you don't need this, remove this step.
+RUN --mount=type=bind,source=package.json,target=package.json \
+    --mount=type=bind,source=pnpm-lock.yaml,target=pnpm-lock.yaml \
+    --mount=type=cache,target=/root/.local/share/pnpm/store \
+    pnpm install --frozen-lockfile
 
-# Copy source code
+# Copy the rest of the source files into the image.
 COPY . .
-
-# Build the application
+# Run the build script.
 RUN pnpm run build
 
-# List build output for debugging
-RUN echo "Build directory structure:" && \
-    find build -type f
-
 ################################################################################
-# Runner stage - final production image
-FROM node:${NODE_VERSION}-alpine AS runner
+# Create a new stage to run the application with minimal runtime dependencies
+# where the necessary files are copied from the build stage.
+FROM base AS final
 
-# Use production node environment
+# Use production node environment by default.
 ENV NODE_ENV=production
-ENV HOST=0.0.0.0
-ENV PORT=3000
-
-WORKDIR /usr/src/app
+# ENV NODE_ENV=development
 
-# Install only the packages needed to run the server
-COPY package.json pnpm-lock.yaml ./
-RUN npm install --global pnpm@${PNPM_VERSION} && \
-    pnpm install --prod
+# # Run the application AS a non-root user.
+USER node
 
-# Copy server.js and the build directory
-COPY server.js ./
-COPY --from=builder /usr/src/app/build ./build
-COPY --from=builder /usr/src/app/public ./public
+# Copy package.json so that package manager commands can be used.
+COPY package.json .
 
-# List directories for debugging
-RUN echo "Final build structure:" && \
-    find . -type f
+# Copy the production dependencies from the deps stage and also
+# the built application from the build stage into the image.
+COPY --from=deps /usr/src/app/node_modules ./node_modules
+COPY --from=build /usr/src/app/build ./build
 
-# Run the application as a non-root user.
-USER node
+ENV HOST='0.0.0.0'
+# ENV PORT=8080
+# ARG PORT=8080
+# ENV PORT=${PORT}
 
 # Expose the port that the application listens on.
-EXPOSE 3000
+EXPOSE 8080
 
-# Run the application using the express server
-CMD ["node", "server.js"]
+# Run the application.
+CMD ["pnpm", "run", "serve"]

app/app/components/HelpForm.tsx

@@ -15,7 +15,9 @@ import 'react-toastify/dist/ReactToastify.min.css';
 //   return json(data);
 // };
 
-const notify = ({type = 'success' || 'error'}) =>
+const notify = ({type}: {
+  type: 'success' | 'error';
+}) =>
   toast(
     type === 'success'
       ? 'Thank you for contacting us!'

app/app/root.tsx

@@ -63,6 +63,7 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
       <body>
         <noscript>
           <iframe
+            title="Google Tag Manager"
             src="https://www.googletagmanager.com/ns.html?id=GTM-K6DB8PVD"
             height="0"
             width="0"

app/package.json

@@ -5,53 +5,52 @@
   "type": "module",
   "scripts": {
     "preinstall": "pnpm dlx only-allow pnpm",
-    "build": "remix vite:build",
+    "build": "remix vite:build --port 8080",
     "dev": "remix vite:dev --port 8080",
     "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
     "preview": "pnpm dlx vite preview",
-    "serve": "node server.js",
-    "start": "node server.js",
+    "serve": "pnpm dlx sirv-cli build/client --single --host",
+    "start": "pnpm dlx remix-serve ./build/client",
     "typecheck": "tsc",
     "analyze": "vite build --mode analyze",
     "docker:push": "./scripts/push-image.sh"
   },
   "dependencies": {
     "@emailjs/browser": "^4.1.0",
     "@hookform/resolvers": "^3.3.4",
-    "@remix-run/express": "^2.8.1",
     "@remix-run/node": "^2.8.1",
     "@remix-run/react": "^2.8.1",
     "compression": "^1.7.4",
     "dotenv": "^16.4.5",
-    "express": "^4.18.3",
     "isbot": "^5.1.17",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-toastify": "^10.0.5",
     "remix-hook-form": "^4.2.0",
+    "sirv-cli": "^3.0.0",
     "zod": "^3.22.4"
   },
   "devDependencies": {
     "@remix-run/dev": "^2.8.1",
     "@types/compression": "^1.7.5",
-    "@types/express": "^4.17.21",
     "@types/react": "^18.2.67",
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^6.7.4",
-    "eslint": "^8.38.0",
+    "eslint": "^8.57.1",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "prettier": "^3.2.5",
     "remix-development-tools": "^4.0.10",
+    "rollup-plugin-visualizer": "^5.9.0",
     "typescript": "^5.1.6",
     "vite": "^5.1.6",
-    "vite-tsconfig-paths": "^4.3.2",
-    "rollup-plugin-visualizer": "^5.9.0"
+    "vite-tsconfig-paths": "^4.3.2"
   },
   "engines": {
     "node": ">=18.0.0"
-  }
+  },
+  "packageManager": "[email protected]+sha512.dc09430156b427f5ecfc79888899e1c39d2d690f004be70e05230b72cb173d96839587545d09429b55ac3c429c801b4dc3c0e002f653830a420fa2dd4e3cf9cf"
 }