Working frontend with docker

Author: NoahStapp

cookiecutter.json

@@ -47,6 +47,7 @@
     "_copy_without_render": [
         "frontend/**/*.html",
         "frontend/**/*.tsx",
+        "frontend/**/*.ico",
         "frontend/.next/*",
         "frontend/node_modules/*",
         "backend/app/app/email-templates/**"

{{cookiecutter.project_slug}}/docker-compose.override.yml

@@ -71,14 +71,10 @@ services:
 
   frontend:
     ports:
-      - "24678:24678"
-    volumes:
-      # https://stackoverflow.com/a/32785014
-      - ./frontend:/frontend
-      - node_modules:/frontend/node_modules
+      - "3000:3000"
     build:
       context: ./frontend
-      target: run-dev
+      target: runner
     labels:
       - traefik.enable=true
       - traefik.constraint-label-stack=${TRAEFIK_TAG?Variable not set}

{{cookiecutter.project_slug}}/docker-compose.yml

@@ -170,7 +170,7 @@ services:
     image: "${DOCKER_IMAGE_FRONTEND?Variable not set}:${TAG-latest}"
     env_file:
       - .env
-      - ./frontend/.env
+      - ./frontend/.env.local
     build:
       context: ./frontend
     deploy:

{{cookiecutter.project_slug}}/frontend/Dockerfile

@@ -1,54 +1,62 @@
-FROM node:18.17 AS build
-ENV NODE_ENV=development APP_ENV=development
-# ENV PATH /frontend/node_modules/.bin:$PATH
-COPY . /frontend
+FROM node:18-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
 WORKDIR /frontend
-RUN yarn install --frozen-lockfile --network-timeout 100000 --non-interactive
-RUN yarn build --standalone
-EXPOSE ${NUXT_PORT}
-
-FROM build AS run-dev
-# ENTRYPOINT ["yarn"]
-CMD ["yarn", "dev"]
-
-FROM build AS run-start
-ENV NODE_ENV=production APP_ENV=production
-ENTRYPOINT ["yarn"]
-CMD ["start"]
-
-FROM node:18.17-alpine AS run-minimal
-# ARG NEXT_VERSION=^13.5.4
-# ARG TAILWINDCSS_VERSION=^4.0.0
-# ARG AUTOPREFIXER_VERSION=^10.4.13
-# ARG POSTCSS_VERSION=^8.4.18
-# ARG ASPECT_RATIO_VERSION=^0.4.2
-# ARG FORMS_VERSION=^0.5.3
-# ARG TYPOGRAPHY_VERSION=^0.5.7
-# ARG HEADLESSUI_VERSION=^1.7.3
-# ARG HEROICONS_VERSION=^2.0.12
-# ENV NODE_ENV=production APP_ENV=production
-# WORKDIR /frontend
-RUN yarn install
-# nuxt@${NUXT_VERSION} @nuxt/content@${NUXT_CONTENT_VERSION} tailwindcss@${TAILWINDCSS_VERSION} autoprefixer@${AUTOPREFIXER_VERSION} postcss@${POSTCSS_VERSION} @tailwindcss/aspect-ratio@${ASPECT_RATIO_VERSION} @tailwindcss/forms@${FORMS_VERSION} @tailwindcss/typography@${TYPOGRAPHY_VERSION} @headlessui/vue@${HEADLESSUI_VERSION} @heroicons/vue@${HEROICONS_VERSION} @pinia/nuxt@${PINIA_VERSION} @pinia-plugin-persistedstate/nuxt${PINIA_PERSISTED_VERSION} vee-validate@${VEE_VERSION} @vee-validate/i18n${VEE_INT_VERSION} @vee-validate/rules${VEE_RULES_VERSION} qrcode.vue${QR_CODE_VERSION} @nuxtjs/i18n${I18N_VERSION} @nuxtjs/robots${NUXT_ROBOTS_VERSION} @vite-pwa/nuxt${VITE_PWA_NUXT_VERSION}
-# COPY --from=build /app/.next ./.next
-# COPY --from=build /app/app/api ./api
-# COPY --from=build /app/app/assets ./assets
-# COPY --from=build /app/app/components ./components
-# COPY --from=build /app/app/config ./config
-# COPY --from=build /app/app/content ./content
-# COPY --from=build /app/app/interfaces ./interfaces
-# COPY --from=build /app/app/layouts ./layouts
-# COPY --from=build /app/app/locales ./locales
-# COPY --from=build /app/app/middleware ./middleware
-# COPY --from=build /app/app/pages ./pages
-# COPY --from=build /app/app/plugins ./plugins
-# COPY --from=build /app/public ./public
-# COPY --from=build /app/app/static ./static
-# COPY --from=build /app/app/stores ./stores
-# COPY --from=build /app/app/utilities ./utilities
-# COPY --from=build /app/.env.local ./
-# COPY --from=build /app/next.config* ./
-# COPY --from=build /app/tailwind.config* ./
-# COPY --from=build /app/tsconfig.json ./
-ENTRYPOINT [ "yarn" ]
-CMD [ "start" ]
+
+# Install dependencies based on the preferred package manager
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /frontend
+COPY --from=deps /frontend/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
+
+# If using npm comment out above and use below instead
+RUN npm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /frontend
+
+ENV NODE_ENV production
+# 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 /frontend/public ./public
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /frontend/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /frontend/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+ENV PORT 3000
+
+# set hostname to localhost
+ENV HOSTNAME "0.0.0.0"
+
+CMD [ "node", "server.js" ]

{{cookiecutter.project_slug}}/frontend/app/lib/interfaces/index.ts

@@ -20,7 +20,7 @@ interface IKeyable {
   [key: string]: any | any[]
 }
 
-export {
+export type {
   IKeyable,
   IUserProfile,
   IUserProfileUpdate,

{{cookiecutter.project_slug}}/frontend/app/lib/slices/authSlice.ts

@@ -25,7 +25,6 @@ import {
   validateTOTPClaim,
 } from "./tokensSlice"
 import { PURGE, purgeStoredState } from "redux-persist"
-import { perstistor } from "../reduxProvider"
 
 interface AuthState {
   id: string

{{cookiecutter.project_slug}}/frontend/next.config.js

@@ -8,4 +8,5 @@ module.exports = {
       },
     ],
   },
+  output: 'standalone'
 }

{{cookiecutter.project_slug}}/frontend/package.json

@@ -11,6 +11,8 @@
   "dependencies": {
     "@headlessui/react": "^1.7.17",
     "@heroicons/react": "^2.0.18",
+    "webpack": "latest",
+    "redux": "latest",
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
     "@next/mdx": "^13.5.3",