Initial Next.js setup (#27)

* refactor: cleanup Nuxt.js files in preparation for Next.js migration

* feat: add Next.js setup and home page

* refactor: add .prettierignore file to root folder

* refactor: add compose.yaml to .pretterignore

* refactor: change the frontend's env variables

* dockerise nextjs app

---------

Co-authored-by: Mahdi Khanzadi <[email protected]>

.env

@@ -24,8 +24,8 @@ MAIL_SMTP_HOST=mailserver
 MAIL_SMTP_PORT=1025
 
 ## frontend
-NUXT_PUBLIC_API_BASE_URL=https://backend.tarhche.com
-NUXT_INTERNAL_API_BASE_URL=https://backend.tarhche.com
+NEXT_PUBLIC_EXTERNAL_BACKEND_BASE_URL=https://backend-reactjs.tarhche.com
+INTERNAL_BACKEND_BASE_URL=https://backend-reactjs.tarhche.com
 
-# NUXT_PUBLIC_API_BASE_URL=http://127.0.0.1:8000
-# NUXT_INTERNAL_API_BASE_URL=http://app
+# NEXT_PUBLIC_EXTERNAL_BACKEND_BASE_URL=http://127.0.0.1:8000
+# INTERNAL_BACKEND_BASE_URL=http://app

.prettierignore

@@ -0,0 +1,2 @@
+backend/
+compose.yaml

backend/Dockerfile

@@ -1,11 +1,11 @@
-FROM golang:1.22 as build
+FROM golang:1.22 AS build
 WORKDIR /dist
 COPY . .
 ENV GOARCH=amd64 CGO_ENABLED=0
 RUN go mod download
 RUN go build -v -o app ./main.go && chmod +x app
 
-FROM alpine:latest as production
+FROM alpine:latest AS production
 COPY --from=build /dist /usr/bin
 EXPOSE 80
-CMD ["app", "serve", "-port=80"]
+CMD ["app", "serve", "-port=80"]

compose.yaml

@@ -11,10 +11,10 @@ services:
     volumes:
       - ./frontend:/opt/app
     environment:
-      NUXT_PUBLIC_API_BASE_URL: ${NUXT_PUBLIC_API_BASE_URL}
-      NUXT_INTERNAL_API_BASE_URL: ${NUXT_INTERNAL_API_BASE_URL}
+      NEXT_PUBLIC_EXTERNAL_BACKEND_BASE_URL: ${NEXT_PUBLIC_EXTERNAL_BACKEND_BASE_URL}
+      INTERNAL_BACKEND_BASE_URL: ${INTERNAL_BACKEND_BASE_URL}
     command: >
-      sh -c "npm install; npm run dev -- --host --port 3000"
+      sh -c "npm install; npm run dev -- --hostname \"0.0.0.0\" --port 3000"
 
   app:
     build:

frontend/.env.local.example

@@ -0,0 +1,2 @@
+INTERNAL_BACKEND_BASE_URL=https://backend-reactjs.tarhche.com
+NEXT_PUBLIC_EXTERNAL_BACKEND_BASE_URL=https://backend-reactjs.tarhche.com

frontend/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}

frontend/.gitignore

@@ -1,24 +1,38 @@
-# Nuxt dev/build outputs
-.output
-.data
-.nuxt
-.nitro
-.cache
-dist
-
-# Node dependencies
-node_modules
-
-# Logs
-logs
-*.log
-
-# Misc
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
 .DS_Store
-.fleet
-.idea
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+.env.development
+.env.production
+
+# vercel
+.vercel
 
-# Local env files
-.env
-.env.*
-!.env.example
+# typescript
+*.tsbuildinfo
+next-env.d.ts

frontend/.prettierrc

@@ -0,0 +1,9 @@
+{
+  "singleQuote": false,
+  "semi": true,
+  "trailingComma": "all",
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "bracketSpacing": false
+}

frontend/Dockerfile

@@ -1,17 +1,26 @@
-FROM node:20.11-alpine AS base
+FROM node:20.18-alpine AS base
+# 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 /opt/app
+
+FROM base AS install
 COPY . .
 RUN npm install
 
-FROM base AS develop
+FROM install AS develop
 EXPOSE 3000
-CMD ["npm", "run", "dev", "--", "--host", "--port", "3000"]
+CMD ["npm", "run", "dev", "--", "--hostname", "0.0.0.0", "--port", "3000"]
 
-FROM base as build
+FROM install AS build
+RUN pwd && ls
+RUN cp .env.local.example .env
 RUN npm run build
 
-FROM node:20.11-alpine as production
-WORKDIR /opt/app
-COPY --from=build /opt/app/.output .
+FROM base AS production
+COPY --from=build /opt/app/.next/standalone ./
+COPY --from=build /opt/app/.next/static ./.next/static
+# COPY --from=builder /opt/app/public ./public
+ENV PORT=3000
+ENV HOSTNAME="0.0.0.0"
 EXPOSE 3000
-CMD ["node", "server/index.mjs"]
+CMD ["node", "server.js"]