refactor: changes to docker config and env variables (#288)

* refactor: updating the docker to require env and config files

* refactor: removed the verifyattestation async as no await

* feat: make it work for development

* feat: do not set PUBLIC_URL

* feat: use env variables in task-definition

Co-authored-by: Timo Welde <tjwelde@gmail.com>

.env

@@ -3,5 +3,3 @@ REACT_APP_SERVICE_HOST=//127.0.0.1:3000
 REACT_APP_NODE_HOST=ws://127.0.0.1:9944
 
 REACT_APP_FAUCET_URL=//127.0.0.1:3002
-
-PUBLIC_URL=.

.eslintrc.json

@@ -32,6 +32,7 @@
       "error",
       "never"
     ],
+    "no-underscore-dangle": ["error", { "allow": ["_env_"] }],
     "import/extensions": ["error", "ignorePackages", {
       "ts": "never",
       "tsx": "never",

.gitignore

@@ -23,3 +23,7 @@ yarn-debug.log*
 yarn-error.log*
 /src/dist/
 *.iml
+
+# Temporary env files
+/public/env-config.js
+env-config.js

Dockerfile

@@ -13,11 +13,24 @@ EXPOSE 3001
 CMD [ "yarn", "start" ]
 
 FROM develop as builder
-ARG BUILD_ENV=.env.production
 RUN yarn lint
 #RUN yarn testCI
-RUN yarn env-cmd -f ${BUILD_ENV} node scripts/build.js
+RUN yarn build
 
 FROM nginx:alpine as release
 COPY --from=builder /app/build/ /usr/share/nginx/html/
 COPY --from=builder /app/config/nginx.conf /etc/nginx/conf.d/default.conf
+
+# Copy .env file and shell script to container
+WORKDIR /usr/share/nginx/html
+COPY ./env.sh .
+COPY .env .
+
+# Add bash
+RUN apk add --no-cache bash
+
+# Make our shell script executable
+RUN chmod +x env.sh
+
+# Start Nginx server
+CMD ["/bin/bash", "-c", "/usr/share/nginx/html/env.sh && nginx -g \"daemon off;\""]

docker-compose.yml

@@ -62,7 +62,6 @@ services:
       - REACT_APP_SERVICE_HOST=//127.0.0.1:3000
       - REACT_APP_NODE_HOST=ws://127.0.0.1:9944
       - REACT_APP_FAUCET_URL=http://127.0.0.1:3002
-      - PUBLIC_URL=.
       # if you experience issues where the watcher does not trigger rebuilds
       # when changing files in src/ the following option may help
       #- CHOKIDAR_USEPOLLING=true

env.sh

@@ -0,0 +1,30 @@
+#!/bin/sh
+
+# Recreate config file
+rm -rf ./env-config.js
+touch ./env-config.js
+
+# Add assignment 
+echo "window._env_ = {" >> ./env-config.js
+
+# Read each line in .env file
+# Each line represents key=value pairs
+while read -r line || [[ -n "$line" ]];
+do
+  # Split env variables by character `=`
+  if printf '%s\n' "$line" | grep -q -e '='; then
+    varname=$(printf '%s\n' "$line" | sed -e 's/=.*//')
+    varvalue=$(printf '%s\n' "$line" | sed -e 's/^[^=]*=//')
+  fi
+
+  # Read value of current variable if exists as Environment variable
+  value=$(printf '%s\n' "${!varname}")
+  # Otherwise use value from .env file
+  [[ -z $value ]] && value=${varvalue}
+
+  # Append configuration property to JS file
+  echo "  $varname: \"$value\"," >> ./env-config.js
+done < .env
+
+
+echo "}" >> ./env-config.js

package.json

@@ -4,7 +4,7 @@
   "license": "BSD-4-Clause",
   "private": true,
   "scripts": {
-    "start": "PORT=3001 node scripts/start.js",
+    "start": "chmod +x ./env.sh && ./env.sh && cp env-config.js ./public/ && PORT=3001 node scripts/start.js",
     "build": "node scripts/build.js",
     "build:devnet": "env-cmd -f .env.devnet node scripts/build.js",
     "test": "node scripts/test.js --env=jsdom",

public/index.html

@@ -5,12 +5,13 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, shrink-to-fit=no, initial-scale=1.0, user-scalable=no">
   <meta name="theme-color" content="#000000">
-
   <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
+
   <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+  <script src="%PUBLIC_URL%/env-config.js" ></script>
   <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
   <!--
       Notice the use of %PUBLIC_URL% in the tags above.

src/components/IdentityView/IdentityView.tsx

@@ -39,7 +39,7 @@ type State = {
   showPublicIdentityQRCode: boolean
 }
 
-const FAUCET_URL = process.env.REACT_APP_FAUCET_URL
+const FAUCET_URL = window._env_.REACT_APP_FAUCET_URL
 
 class IdentityView extends React.Component<Props, State> {
   private static openKiltFaucet(address: IMyIdentity['identity']['address']) {

src/services/BlockchainService.ts

@@ -10,7 +10,7 @@ class BlockchainService {
   }
 
   public static getNodeWebsocketUrl(): string {
-    return `${process.env.REACT_APP_NODE_HOST}`
+    return `${window._env_.REACT_APP_NODE_HOST}`
   }
 }
 

src/services/ContactRepository.ts

@@ -12,7 +12,7 @@ import { notifyFailure } from './FeedbackService'
 // (for other tests)
 
 class ContactRepository {
-  public static readonly URL = `${process.env.REACT_APP_SERVICE_HOST}/contacts`
+  public static readonly URL = `${window._env_.REACT_APP_SERVICE_HOST}/contacts`
 
   public static async findAll(): Promise<IContact[]> {
     return fetch(`${ContactRepository.URL}`)

src/services/CtypeRepository.ts

@@ -52,7 +52,7 @@ class CTypeRepository {
     })
   }
 
-  private static readonly URL = `${process.env.REACT_APP_SERVICE_HOST}/ctype`
+  private static readonly URL = `${window._env_.REACT_APP_SERVICE_HOST}/ctype`
 }
 
 export default CTypeRepository

src/services/DidService.ts

@@ -7,7 +7,7 @@ import ContactRepository from './ContactRepository'
 import MessageRepository from './MessageRepository'
 
 class DidService {
-  public static readonly URL = `${process.env.REACT_APP_SERVICE_HOST}/contacts/did`
+  public static readonly URL = `${window._env_.REACT_APP_SERVICE_HOST}/contacts/did`
 
   public static async resolveDid(
     identifier: string

src/services/MessageRepository.tsx

@@ -28,7 +28,7 @@ export interface IMessageOutput extends sdk.IMessage {
 // (for other tests)
 
 class MessageRepository {
-  public static readonly URL = `${process.env.REACT_APP_SERVICE_HOST}/messaging`
+  public static readonly URL = `${window._env_.REACT_APP_SERVICE_HOST}/messaging`
 
   /**
    * takes contact or list of contacts

src/types/global.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable @typescript-eslint/interface-name-prefix */
+interface GlobalVariables {
+  _env_: any
+}
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+declare interface Window extends GlobalVariables {}

task-definition.json

@@ -21,7 +21,21 @@
           "containerPort": 80
         }
       ],
-      "essential": true
+      "essential": true,
+      "environment": [
+        {
+          "name": "REACT_APP_SERVICE_HOST",
+          "value": "https://services.devnet.kilt.io:443"
+        },
+        {
+          "name": "REACT_APP_NODE_HOST",
+          "value": "wss://full-nodes-lb.devnet.kilt.io:443"
+        },
+        {
+          "name": "REACT_APP_FAUCET_URL",
+          "value": "https://faucet-devnet.kilt.io"
+        }
+      ]
     }
   ],
   "cpu": "512",