Merge pull request #307 from panoratech/feat/nextjsdocker

Feat/nextjsdocker

.github/workflows/sh-build-push-docker.yml

@@ -44,7 +44,7 @@ jobs:
         with:
           platforms: linux/amd64,linux/arm64
           context: .
-          file: ./apps/webapp/Dockerfile
+          file: ./apps/client-ts/Dockerfile
           push: true
           tags: panoradotdev/frontend-webapp:latest
           build-args: |

apps/client-ts/Dockerfile

@@ -0,0 +1,65 @@
+# run directly from the repo root directory
+# docker build -f ./apps/client-ts/Dockerfile .
+FROM node:20-alpine AS base
+# =======================================================================
+FROM base AS builder
+RUN apk add --no-cache libc6-compat
+RUN apk update
+
+# Set pnpm
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+
+WORKDIR /app
+RUN pnpm add -g turbo
+COPY . .
+RUN turbo prune client-ts --docker
+RUN ls -la ./out/full/apps/client-ts
+
+# =======================================================================
+# Add lockfile and package.json's of isolated subworkspace
+FROM base AS installer
+RUN apk add --no-cache libc6-compat
+RUN apk update
+# Set pnpm
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+
+ARG VITE_BACKEND_DOMAIN
+ARG VITE_FRONTEND_DOMAIN
+ARG VITE_STYTCH_TOKEN
+ENV VITE_BACKEND_DOMAIN="$VITE_BACKEND_DOMAIN"
+ENV VITE_FRONTEND_DOMAIN="$VITE_FRONTEND_DOMAIN"
+ENV VITE_STYTCH_TOKEN="$VITE_STYTCH_TOKEN"
+RUN corepack enable
+
+WORKDIR /app
+
+# First install the dependencies (as they change less often)
+COPY .gitignore .gitignore
+COPY --from=builder /app/out/json/ .
+COPY --from=builder /app/out/pnpm-lock.yaml ./pnpm-lock.yaml
+RUN pnpm install
+
+# Build the project
+COPY --from=builder ./app/out/full/ .
+RUN pnpm turbo run build --filter=client-ts...
+
+# ========================================================================
+FROM nginx:stable-alpine as runner
+
+#ARG VITE_BACKEND_DOMAIN
+#ARG VITE_FRONTEND_DOMAIN
+#ENV VITE_BACKEND_DOMAIN="$VITE_BACKEND_DOMAIN"
+#ENV VITE_FRONTEND_DOMAIN="$VITE_FRONTEND_DOMAIN"
+COPY --from=installer ./app/apps/client-ts/dist/ /usr/share/nginx/html
+
+RUN echo "***********************"
+RUN cat /etc/nginx/conf.d/default.conf
+RUN echo "***********************"
+
+COPY apps/client-ts/nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

apps/client-ts/Dockerfile.dev

@@ -0,0 +1,27 @@
+# run directly from the repo root directory
+# docker build -f ./apps/client-ts/Dockerfile.dev .
+FROM node:20-alpine AS base
+# =======================================================================
+FROM base AS builder
+RUN apk add --no-cache libc6-compat
+RUN apk update
+
+# Set pnpm
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+
+ARG VITE_BACKEND_DOMAIN
+ARG VITE_FRONTEND_DOMAIN
+ARG VITE_STYTCH_TOKEN
+
+ENV VITE_BACKEND_DOMAIN="$VITE_BACKEND_DOMAIN"
+ENV VITE_FRONTEND_DOMAIN="$VITE_FRONTEND_DOMAIN"
+ENV VITE_STYTCH_TOKEN="$VITE_STYTCH_TOKEN"
+
+RUN corepack enable
+
+WORKDIR /app
+RUN pnpm add -g turbo
+
+# Start the Webapp
+CMD cd apps/webapp && pnpm install && pnpm run dev --host

apps/client-ts/nginx.conf

@@ -0,0 +1,13 @@
+# This is an Nginx config file that gets imported inside the Webapp production Dockerfile
+
+server {
+    listen 80;
+    server_name localhost;
+
+    location / {
+        root /usr/share/nginx/html;
+        index index.html index.htm;
+        try_files $uri $uri/ /index.html;
+
+    }
+}

packages/api/scripts/docker-compose.dev.yml

@@ -77,9 +77,9 @@ services:
     networks:
       - backend
 
-  webapp:
+  webapp-nextjs:
     build:
-      dockerfile: ./apps/webapp/Dockerfile.dev
+      dockerfile: ./apps/client-ts/Dockerfile.dev
       context: ./
       args:
         VITE_BACKEND_DOMAIN: ${VITE_BACKEND_DOMAIN}