Merge pull request #8 from prototyp3-dev/feature/cd

Automate build of frontend

.github/workflows/build-frontend.yaml

@@ -0,0 +1,40 @@
+name: build-frontend
+run-name: Building Frontend Image
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - 'frontend/**'
+
+env:
+  IMAGE_NAME: world-arcade-front
+
+jobs:
+  build-frontend:
+    runs-on: ubuntu-latest
+
+    permissions:
+      packages: write
+      contents: read
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Build image
+        run: docker build frontend/ --file frontend/Dockerfile --tag $IMAGE_NAME --label "runnumber=${GITHUB_RUN_ID}"
+
+      - name: Log in to registry
+        run: echo "${{ secrets.GITHUB_TOKEN }}" | docker login ghcr.io -u $ --password-stdin
+
+      - name: Push image
+        run: |
+          IMAGE_ID=ghcr.io/${{ github.repository_owner }}/$IMAGE_NAME
+          IMAGE_ID=$(echo $IMAGE_ID | tr '[A-Z]' '[a-z]')
+
+          VERSION=$(date -u +%Y%m%d.%H%M).$(echo $GITHUB_SHA | head -c 7)
+
+          echo Will push $IMAGE_ID:$VERSION
+
+          docker tag $IMAGE_NAME $IMAGE_ID:$VERSION
+          docker push $IMAGE_ID:$VERSION

frontend/Dockerfile

@@ -0,0 +1,78 @@
+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 git
+
+# Clone and build cartesi-client
+WORKDIR /opt/cartesi-client
+RUN \
+  git clone -b feature/types-and-standardizations --depth 1 https://github.com/prototyp3-dev/cartesi-client.git && \
+  cd cartesi-client && \
+  npm clean-install && \
+  npm run build
+
+# Install dependencies
+WORKDIR /app
+COPY package.json package-lock.json* ./
+RUN \
+  npm clean-install && \
+  npm install --no-save --install-links /opt/cartesi-client/cartesi-client && \
+  npm install --no-save "@cartesi/rollups@^1.1.0" "@urql/core@^4.1.4" "@urql/exchange-retry@^1.2.0" "urql@^4.0.5"
+
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+
+ENV NEXT_TELEMETRY_DISABLED 1
+
+# FIXME: uncomment this for production
+# RUN npm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+
+LABEL org.opencontainers.image.source https://github.com/prototyp3-dev/world-arcade-app
+
+WORKDIR /app
+
+# FIXME: uncomment this for production
+# ENV NODE_ENV production
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+# FIXME: uncomment this for production
+# COPY --from=builder /app/public ./public
+RUN chown -R nextjs:nodejs /app
+COPY --from=builder --chown=nextjs:nodejs /app/ ./
+
+# 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
+# FIXME: uncomment this for production
+# COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+# COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+# set hostname to localhost
+ENV HOSTNAME "0.0.0.0"
+
+# server.js is created by next build from the standalone output
+# https://nextjs.org/docs/pages/api-reference/next-config-js/output
+# FIXME: uncomment this for production
+# CMD ["node", "server.js"]
+CMD ["npm", "run", "dev"]