Merge pull request #37 from TheSoftwareDevGuild/fix-front-end-deplloyment

Use public envs from secrets

Author: oscarwroche

.env.example

@@ -1,6 +1,14 @@
 # Database
 DATABASE_URL=postgres://guild_user:guild_password@postgres:5432/guild_genesis
 
-# Frontend
+# WalletConnect Project ID
 PUBLIC_WALLET_CONNECT_PROJECT_ID=your_project_id_here
+
+# Backend API URL
 PUBLIC_API_URL=http://localhost:3001
+
+# Contract addresses (values for amoy)
+PUBLIC_BADGE_REGISTRY_ADDRESS=0xc142ab6b4688b7b81cb4cc8b305f517bba3bfd25
+PUBLIC_EAS_CONTRACT_ADDRESS=0xb101275a60d8bfb14529C421899aD7CA1Ae5B5Fc
+PUBLIC_ACTIVITY_TOKEN_ADDRESS=0x5db978bc69e54250f577ed343273508baea136cd
+PUBLIC_SCHEMA_ID=0xb167f07504166f717f2a2710dbcfbfdf8fad6e8c6128c1a7fa80768f61b1d0b2

.github/workflows/deploy-frontend.yml

@@ -52,11 +52,23 @@ jobs:
       - name: Build and push (linux/amd64)
         env:
           HEROKU_FRONTEND_APP: ${{ secrets.HEROKU_FRONTEND_APP }}
+          PUBLIC_WALLET_CONNECT_PROJECT_ID: ${{ secrets.PUBLIC_WALLET_CONNECT_PROJECT_ID }}
+          PUBLIC_API_URL: ${{ secrets.PUBLIC_API_URL }}
+          PUBLIC_BADGE_REGISTRY_ADDRESS: ${{ secrets.PUBLIC_BADGE_REGISTRY_ADDRESS }}
+          PUBLIC_EAS_CONTRACT_ADDRESS: ${{ secrets.PUBLIC_EAS_CONTRACT_ADDRESS }}
+          PUBLIC_ACTIVITY_TOKEN_ADDRESS: ${{ secrets.PUBLIC_ACTIVITY_TOKEN_ADDRESS }}
+          PUBLIC_SCHEMA_ID: ${{ secrets.PUBLIC_SCHEMA_ID }}
         run: |
           docker buildx build \
             --platform linux/amd64 \
             -t registry.heroku.com/${HEROKU_FRONTEND_APP}/web \
             -f frontend/Dockerfile frontend \
+            --build-arg PUBLIC_WALLET_CONNECT_PROJECT_ID="${PUBLIC_WALLET_CONNECT_PROJECT_ID}" \
+            --build-arg PUBLIC_API_URL="${PUBLIC_API_URL}" \
+            --build-arg PUBLIC_BADGE_REGISTRY_ADDRESS="${PUBLIC_BADGE_REGISTRY_ADDRESS}" \
+            --build-arg PUBLIC_EAS_CONTRACT_ADDRESS="${PUBLIC_EAS_CONTRACT_ADDRESS}" \
+            --build-arg PUBLIC_ACTIVITY_TOKEN_ADDRESS="${PUBLIC_ACTIVITY_TOKEN_ADDRESS}" \
+            --build-arg PUBLIC_SCHEMA_ID="${PUBLIC_SCHEMA_ID}" \
             --push
         if: steps.changes.outputs.frontend == 'true'
 

docker-compose.yml

@@ -27,15 +27,24 @@ services:
       - postgres
 
   frontend:
-    build: ./frontend
-    command: npm run dev -- --host 0.0.0.0 --port 4321
-    ports:
-      - "4321:4321"
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+      args:
+        PUBLIC_WALLET_CONNECT_PROJECT_ID: ${PUBLIC_WALLET_CONNECT_PROJECT_ID}
+        PUBLIC_API_URL: ${PUBLIC_API_URL}
+        PUBLIC_BADGE_REGISTRY_ADDRESS: ${PUBLIC_BADGE_REGISTRY_ADDRESS}
+        PUBLIC_EAS_CONTRACT_ADDRESS: ${PUBLIC_EAS_CONTRACT_ADDRESS}
+        PUBLIC_ACTIVITY_TOKEN_ADDRESS: ${PUBLIC_ACTIVITY_TOKEN_ADDRESS}
+        PUBLIC_SCHEMA_ID: ${PUBLIC_SCHEMA_ID}
+    env_file:
+      - .env
     environment:
       HOST: 0.0.0.0
-      PORT: 4321
-      PUBLIC_WALLET_CONNECT_PROJECT_ID: ${PUBLIC_WALLET_CONNECT_PROJECT_ID}
-      PUBLIC_API_URL: ${PUBLIC_API_URL}
+      PORT: 3000
+      NODE_ENV: production
+    ports:
+      - "3000:3000"
     depends_on:
       - backend
 

frontend/Dockerfile

@@ -4,12 +4,26 @@ RUN apk add --no-cache python3 make g++
 COPY package*.json ./
 RUN npm ci
 COPY . .
+# Build-time public envs (injected via build args from CI)
+ARG PUBLIC_WALLET_CONNECT_PROJECT_ID
+ARG PUBLIC_API_URL
+ARG PUBLIC_BADGE_REGISTRY_ADDRESS
+ARG PUBLIC_EAS_CONTRACT_ADDRESS
+ARG PUBLIC_ACTIVITY_TOKEN_ADDRESS
+ARG PUBLIC_SCHEMA_ID
+
+# Expose them to the build environment
+ENV PUBLIC_WALLET_CONNECT_PROJECT_ID=$PUBLIC_WALLET_CONNECT_PROJECT_ID \
+    PUBLIC_API_URL=$PUBLIC_API_URL \
+    PUBLIC_BADGE_REGISTRY_ADDRESS=$PUBLIC_BADGE_REGISTRY_ADDRESS \
+    PUBLIC_EAS_CONTRACT_ADDRESS=$PUBLIC_EAS_CONTRACT_ADDRESS \
+    PUBLIC_ACTIVITY_TOKEN_ADDRESS=$PUBLIC_ACTIVITY_TOKEN_ADDRESS \
+    PUBLIC_SCHEMA_ID=$PUBLIC_SCHEMA_ID
 RUN npm run build
 
 FROM node:20-alpine
 WORKDIR /app
 ENV NODE_ENV=production
 COPY --from=build /app ./
-ENV HOST=0.0.0.0
 # keep CMD as:
 CMD ["node", "./dist/server/entry.mjs"]