feat(cip-1694-ui): inject env vars via script (#447)

cardano-foundation · Oct 11, 2023 · 4209ee8 · 4209ee8
1 parent ef5b8da
commit 4209ee8
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 212 deletions.
diff --git a/.github/workflows/build-ui.yaml b/.github/workflows/build-ui.yaml
@@ -40,7 +40,7 @@ jobs:
       - name: 🎳 Build cip-1694
         run: |
           cd ui/cip-1694
-          npm run react-inject-env && npm run build
+          npm run build
 
       - name: 🧘‍♀️ Download verification-app dependencies
         run: |

diff --git a/ui/cip-1694/Dockerfile b/ui/cip-1694/Dockerfile
@@ -1,5 +1,15 @@
 FROM node:18-alpine AS builder
 
+# Add a work directory
+WORKDIR /app
+# Cache and Install dependencies
+COPY package.json .
+RUN npm install --quiet --production
+# Copy app files
+COPY . .
+# Build the app
+RUN npm run build
+
 ARG REACT_APP_VOTING_APP_SERVER_URL=http://localhost:3000
 ARG REACT_APP_VOTING_LEDGER_FOLLOWER_APP_SERVER_URL=http://localhost:3000
 ARG REACT_APP_VOTING_VERIFICATION_APP_SERVER_URL=http://localhost:3000
@@ -8,6 +18,9 @@ ARG REACT_APP_CATEGORY_ID=CIP-1694_Pre_Ratification_4619
 ARG REACT_APP_GOOGLE_FORM_URL= https://docs.google.com/forms/u/0/d/e/1FAIpQLSe-dSU0-bi8bjk0wiOaRXj02nxYLvgnpKBgc-eYGRpPYO-y5Q
 ARG REACT_APP_GOOGLE_FORM_VOTE_CONTEXT_INPUT_NAME= entry.75173622
 
+# Bundle static assets with nginx
+FROM nginx:1.25.2-alpine as production
+WORKDIR /app
 ENV NODE_ENV="production" \
     REACT_APP_VOTING_APP_SERVER_URL=${REACT_APP_VOTING_APP_SERVER_URL} \
     REACT_APP_VOTING_LEDGER_FOLLOWER_APP_SERVER_URL=${REACT_APP_VOTING_LEDGER_FOLLOWER_APP_SERVER_URL} \
@@ -19,24 +32,15 @@ ENV NODE_ENV="production" \
     REACT_APP_GOOGLE_FORM_VOTE_CONTEXT_INPUT_NAME=${REACT_APP_GOOGLE_FORM_VOTE_CONTEXT_INPUT_NAME} \
     REACT_APP_SUPPORTED_WALLETS="flint,eternl,nami,typhoncip30,yoroi,nufi,gerowallet,lace,begin,cardwallet"
 
-# Add a work directory
-WORKDIR /app
-# Cache and Install dependencies
-COPY package.json .
-RUN npm install --quiet --production
-# Copy app files
-COPY . .
-# Build the app
-RUN npm run react-inject-env && npm run build
 
-# Bundle static assets with nginx
-FROM nginx:1.25.2-alpine as production
-ENV NODE_ENV="production"
 # Copy built assets from builder
 COPY --from=builder /app/build /usr/share/nginx/html
 # Add your nginx.conf
 COPY docker-assets/nginx.conf /etc/nginx/conf.d/default.conf
+COPY docker-assets/entrypoint.sh /app/entrypoint.sh
+COPY env.global.tmp.js /app/env.global.tmp.js
+COPY package.json /app/
 # Expose port
 EXPOSE 80
 # Start nginx
-CMD ["nginx", "-g", "daemon off;"]
+CMD ["sh", "/app/entrypoint.sh"]
diff --git a/ui/cip-1694/docker-assets/entrypoint.sh b/ui/cip-1694/docker-assets/entrypoint.sh
@@ -0,0 +1,7 @@
+#!/bin/bash
+if [ -z "${REACT_APP_VERSION}" ]
+then
+  export REACT_APP_VERSION=$(grep -m 1 "version" package.json | awk '{print $2}' | sed 's/[",]//g')
+fi
+envsubst < env.global.tmp.js >/usr/share/nginx/html/static/js/env.global.js
+nginx -g 'daemon off;'
diff --git a/ui/cip-1694/env.global.tmp.js b/ui/cip-1694/env.global.tmp.js
@@ -0,0 +1,12 @@
+window.env = {};
+window.env.REACT_APP_VOTING_APP_SERVER_URL = `$REACT_APP_VOTING_APP_SERVER_URL`;
+window.env.REACT_APP_VOTING_LEDGER_FOLLOWER_APP_SERVER_URL = `$REACT_APP_VOTING_LEDGER_FOLLOWER_APP_SERVER_URL`;
+window.env.REACT_APP_VOTING_VERIFICATION_APP_SERVER_URL = `$REACT_APP_VOTING_VERIFICATION_APP_SERVER_URL`;
+window.env.REACT_APP_GOOGLE_FORM_URL = `$REACT_APP_GOOGLE_FORM_URL`;
+window.env.REACT_APP_GOOGLE_FORM_VOTE_CONTEXT_INPUT_NAME = `$REACT_APP_GOOGLE_FORM_VOTE_CONTEXT_INPUT_NAME`;
+window.env.REACT_APP_TARGET_NETWORK = `$REACT_APP_TARGET_NETWORK`;
+window.env.REACT_APP_EVENT_ID = `$REACT_APP_EVENT_ID`;
+window.env.REACT_APP_CATEGORY_ID = `$REACT_APP_CATEGORY_ID`;
+window.env.REACT_APP_COMMIT_HASH = `$REACT_APP_COMMIT_HASH`;
+window.env.REACT_APP_SUPPORTED_WALLETS = `$REACT_APP_SUPPORTED_WALLETS`;
+window.env.REACT_APP_DISCORD_URL = `$REACT_APP_DISCORD_URL`;
diff --git a/ui/cip-1694/package-lock.json b/ui/cip-1694/package-lock.json
diff --git a/ui/cip-1694/package.json b/ui/cip-1694/package.json
@@ -48,7 +48,6 @@
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.1",
-    "react-inject-env": "^2.0.0-next.17",
     "react-minimal-pie-chart": "^8.4.0",
     "react-redux": "^8.0.7",
     "react-router-dom": "^6.11.1",
@@ -75,7 +74,6 @@
     "build": "GENERATE_SOURCEMAP=false react-scripts build",
     "test": "jest --config ./jest.config.ts",
     "test:coverage": "jest --config ./jest.config.ts --collect-coverage --verbose",
-    "react-inject-env": "react-inject-env set",
     "eject": "react-scripts eject",
     "lint": "eslint --fix --ext .ts,.tsx ."
   },

diff --git a/ui/cip-1694/public/index.html b/ui/cip-1694/public/index.html
@@ -64,7 +64,6 @@
     />
   </head>
   <body>
-    <script src="/env.js"></script>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--
@@ -77,5 +76,9 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script
+      src="%PUBLIC_URL%/static/js/env.global.js"
+      type="text/javascript"
+    ></script>
   </body>
 </html>