feat: add a stub frontend page

cms/run.sh

@@ -3,15 +3,15 @@
 echo $NODE_ENV
 
 # Check the value of NODE_ENV
-if [ "$NODE_ENV" == "develop" ]; then
+if [ "$NODE_ENV" == "development" ]; then
     echo "Running in development mode..."
     npm run build
     npm run develop:watch
-elif [ "$NODE_ENV" == "prod" ]; then
+elif [ "$NODE_ENV" == "production" ]; then
     echo "Running in production mode..."
     npm run build
     npm run start
 else
-    echo "NODE_ENV is not set or has an invalid value. Please set it to 'develop' or 'prod'."
+    echo "NODE_ENV is not set or has an invalid value. Please set it to 'development' or 'production'."
     exit 1
 fi

dev-config/.env.example

@@ -5,4 +5,4 @@ API_TOKEN_SALT=tobemodified
 ADMIN_JWT_SECRET=tobemodified
 TRANSFER_TOKEN_SALT=tobemodified
 JWT_SECRET=tobemodified
-NODE_ENV=prod // or develop
+NODE_ENV=production // or development

dev-config/Dockerfile.cms

@@ -13,7 +13,7 @@ RUN echo "COPY . ."
 COPY . .
 
 # Add a step to remove node_modules if it was accidentally copied
-RUN echo "rm -rf node_modules"
+RUN echo "rm -rf node_*****modules"
 RUN rm -rf node_modules
 
 RUN echo "ls -la"

dev-config/Dockerfile.frontend.dev

@@ -0,0 +1,34 @@
+# syntax=docker.io/docker/dockerfile:1
+
+FROM node:18-alpine
+
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* .npmrc* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i; \
+  # Allow install without lockfile, so example works even without Node.js installed locally
+  else echo "Warning: Lockfile not found. It is recommended to commit lockfiles to version control." && yarn install; \
+  fi
+
+COPY src ./src
+COPY public ./public
+COPY next.config.ts .
+COPY tsconfig.json .
+
+# Next.js collects completely anonymous telemetry data about general usage. Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line to disable telemetry at run time
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+# Note: Don't expose ports here, Compose will handle that for us
+
+# Start Next.js in development mode based on the preferred package manager
+CMD \
+  if [ -f yarn.lock ]; then yarn dev; \
+  elif [ -f package-lock.json ]; then npm run dev; \
+  elif [ -f pnpm-lock.yaml ]; then pnpm dev; \
+  else npm run dev; \
+  fi

dev-config/Dockerfile.frontend.prod

@@ -0,0 +1,51 @@
+FROM node:18-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+
+
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json package-lock.json* .npmrc* ./
+RUN npm ci
+
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+RUN apk add --no-cache bash # Install bash
+
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+# ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN npm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+RUN apk add --no-cache bash
+
+# Uncomment the following line in case you want to disable telemetry during runtime.
+# ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# 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/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+RUN ls -la /app
+
+CMD ["node", "server.js"]

dev-config/docker-compose.dev.override.yml

@@ -9,3 +9,13 @@ services:
     # command: "node --inspect=0.0.0.0:9229 --enable-source-maps --no-deprecation node_modules/.bin/strapi develop -- --watch-admin"
     volumes:
       - /mnt/c/Users/Rita/projects/pets/church/strapi-2/strapi-church-cms/cms/src:/usr/app/src
+  frontend:
+    build:
+      context: ../frontend
+      dockerfile: ../dev-config/Dockerfile.frontend.dev
+    environment:
+      - WDS_SOCKET_HOST=127.0.0.1
+      - CHOKIDAR_USEPOLLING=true
+      - WATCHPACK_POLLING=true
+    volumes:
+      - /mnt/c/Users/Rita/projects/pets/church/strapi-2/strapi-church-cms/frontend/src:/app/src

dev-config/docker-compose.yml

@@ -1,10 +1,24 @@
 services:
+  frontend:
+    build:
+      context: ../frontend
+      dockerfile: ../dev-config/Dockerfile.frontend.prod
+      tags:
+        - b80ow4gcgs4k44g4ck4kgcow-cms:SHA_frontend_${SOURCE_COMMIT}
+    ports:
+      - "127.0.0.1:3000:3000"
+    environment:
+      HOSTNAME: ${FRONTEND_HOSTNAME}
+      NEXT_PUBLIC_BACKEND_URL: ${NEXT_PUBLIC_BACKEND_URL}
+      NODE_ENV: ${NODE_ENV}
+    networks:
+      - strapi
   cms:
     build:
       context: ../cms
       dockerfile: ../dev-config/Dockerfile.cms
       tags:
-        - b80ow4gcgs4k44g4ck4kgcow-cms:SHA_${SOURCE_COMMIT}
+        - b80ow4gcgs4k44g4ck4kgcow-cms:SHA_cms_${SOURCE_COMMIT}
     ports:
       - "127.0.0.1:1337:1337"
     healthcheck:

frontend/.dockerignore

@@ -0,0 +1,2 @@
+*/node_modules
+node_modules

frontend/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

frontend/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

frontend/eslint.config.mjs

@@ -0,0 +1,16 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+];
+
+export default eslintConfig;

frontend/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  output: "standalone",
+};
+
+export default nextConfig;