Dockerize wrapper and fix env vars in wrapper

.env

@@ -19,8 +19,8 @@ ENCRYPTION_KEY=somestrongencrytionkey
 LESS_SECURE_ENCRYPTION_KEY=ssssomestrongencrytionkey
 
 # form manager
-FORM_MANAGER_URL=https://3006-tushar5526-workflow-fnu74wzypyq.ws-us93.gitpod.io
-MINIO_URL=https://9000-tushar5526-workflow-fnu74wzypyq.ws-us93.gitpod.io
+FORM_MANAGER_URL=http://form-manager:3006
+MINIO_URL=http://minio:9000
 MINIO_ENDPOINT=minio
 MINIO_PORT=9000
 REDIS_HOST=fm-cache
@@ -36,3 +36,7 @@ HASURA_GRAPHQL_ADMIN_SECRET=myadminsecretkey
 HASURA_GRAPHQL_JWT_SECRET={"type":"RS256","jwk_url":"http://fusionauth:9011/.well-known/jwks.json"}
 HASURA_GRAPHQL_DATABASE_URL=postgres://$TSDB_POSTGRES_USER:$TSDB_POSTGRES_PASSWORD@tsdb:5432/postgres?sslmode=disable
 
+#react wrapper
+REACT_APP_ENKETO_URL=http://enketo-express:8065
+REACT_APP_FORM_MANAGER_URL=http://form-manager:3006
+REACT_APP_HASURA_URL=http://gql:8080
\ No newline at end of file

.gitpod.yml

@@ -18,23 +18,18 @@ tasks:
     openMode: tab-after
     init: |
       gp sync-done dev-setup
-      sed -i~ "/^FORM_MANAGER_URL=/s/=.*/=https\:\/\/3006-${GITPOD_WORKSPACE_URL:8}/" .env
-      sed -i~ "/^MINIO_URL=/s/=.*/=https\:\/\/9000-${GITPOD_WORKSPACE_URL:8}/" .env
-      sed -i~ "/^MINIO_ENDPOINT=/s/=.*/=9000-${GITPOD_WORKSPACE_URL:8}/" .env
-      sed -i~ "/^MINIO_PORT=/s/=.*/=80/" .env
-      sed -i~ "/^MINIO_USE_SSL=/s/=.*/=true/" .env
+      # Not needed now, we can use docker-compose networking.. but one can use this in a script to repalce env vars at runtime in .env
+      # sed -i~ "/^FORM_MANAGER_URL=/s/=.*/=https\:\/\/3006-${GITPOD_WORKSPACE_URL:8}/" .env
+      # sed -i~ "/^MINIO_URL=/s/=.*/=https\:\/\/9000-${GITPOD_WORKSPACE_URL:8}/" .env
+      # sed -i~ "/^MINIO_ENDPOINT=/s/=.*/=9000-${GITPOD_WORKSPACE_URL:8}/" .env
+      # sed -i~ "/^MINIO_PORT=/s/=.*/=80/" .env
+      # sed -i~ "/^MINIO_USE_SSL=/s/=.*/=true/" .env
+      # sed -i~ "/^REACT_APP_ENKETO_URL=/s/=.*/=https\:\/\/8065-${GITPOD_WORKSPACE_URL:8}/" .env
+      # sed -i~ "/^REACT_APP_FORM_MANAGER_URL=/s/=.*/=https\:\/\/3006-${GITPOD_WORKSPACE_URL:8}/" .env
+      # sed -i~ "/^REACT_APP_HASURA_URL=/s/=.*/=https\:\/\/8080-${GITPOD_WORKSPACE_URL:8}/" .env
+      
       docker-compose up -d
       gp sync-done setup
-  - name: Setup React Wrapper
-    openMode: tab-after
-    init: |
-      gp sync-await setup
-      cd apps/wrapper
-      nvm use 16
-      pnpm install
-      bash make-envs-for-react.sh
-    command: |
-      npm run start
       
 ports:
   - port: 8065

README.md

@@ -221,3 +221,10 @@ TODO: Add details on the specifications
 ## Possible Attack Vectors
 1. XSS (High Priority) - Simple form
 2. SQL Injection (High Priority) - needs to be fixed.
+
+NOTE:
+-----
+```
+For local development enketo-express needs node 14 and pnpm@7
+Run nvm use 14 && npm i -g pnpm@7 if developing in enketo-express
+```

apps/wrapper/.dockerignore

+node_modules

apps/wrapper/Dockerfile

+#get the latest alpine image from node registry
+FROM node:16-alpine AS build-stage
+RUN npm i -g pnpm
+#set the working directory
+WORKDIR /app
+
+#copy the package and package lock files
+#from local to container work directory /app
+COPY package.json /app/
+COPY pnpm-lock.yaml /app/
+
+#Run command npm install to install packages
+RUN pnpm install
+
+#copy all the folder contents from local to container
+COPY . .
+
+#specify env variables at runtime
+ARG REACT_APP_ENKETO_URL
+ARG REACT_APP_FORM_MANAGER_URL
+ARG REACT_APP_HASURA_URL
+
+ENV REACT_APP_ENKETO_URL $REACT_APP_ENKETO_URL
+ENV REACT_APP_FORM_MANAGER_URL $REACT_APP_FORM_MANAGER_URL
+ENV REACT_APP_HASURA_URL $REACT_APP_HASURA_URL
+
+
+#create a react production build
+RUN npm run build
+
+#get the latest alpine image from nginx registry
+FROM nginx:alpine
+
+#we copy the output from first stage that is our react build
+#into nginx html directory where it will serve our index file
+COPY --from=build-stage /app/build/ /usr/share/nginx/html
\ No newline at end of file

apps/wrapper/make-envs-for-react.sh

-#!/bin/bash
-
-echo "REACT_APP_GITPOD_WORKSPACE_URL=${GITPOD_WORKSPACE_URL}" > .env
\ No newline at end of file

apps/wrapper/src/api/index.js

-const HASURA_URL = process.env.REACT_APP_HASURA_URL_URL
+const HASURA_URL = process.env.REACT_APP_HASURA_URL
 const FORM_MANAGER_URL = process.env.REACT_APP_FORM_MANAGER_URL
 
 const makeHasuraCalls = async (query) => {

apps/wrapper/src/components/GenericForm/index.js

@@ -3,7 +3,7 @@ import styles from './index.module.css';
 import beautify from "xml-beautifier";
 import { getPrefillXML, saveFormSubmission } from '../../api';
 
-const EKETO_URL = process.env.REACT_APP_EKETO_URL
+const ENKETO_URL = process.env.REACT_APP_ENKETO_URL
 const FORM_MANAGER_URL = process.env.REACT_APP_FORM_MANAGER_URL
 const HASURA_URL = process.env.REACT_APP_HASURA_URL
 
@@ -122,7 +122,7 @@ const GenericForm = (props) => {
         <iframe title='current-form'
           className={styles.odkForm}
           src={
-            `${EKETO_URL}/preview?formSpec=${encodedFormSpec}&xform=${encodedFormURI}`
+            `${ENKETO_URL}/preview?formSpec=${encodedFormSpec}&xform=${encodedFormURI}`
           }
         />
         <div className={styles.jsonResponse}>

docker-compose.yml

@@ -193,6 +193,18 @@ services:
       REDIS_HOST: ${REDIS_HOST}
       REDIS_PORT: ${REDIS_PORT}
 
+  wrapper:
+    image: wrapper
+    build:
+      context: apps/wrapper
+      # env vars to be passed at build time as it will build a static file
+      args:
+        REACT_APP_ENKETO_URL: ${REACT_APP_ENKETO_URL}
+        REACT_APP_FORM_MANAGER_URL: ${REACT_APP_FORM_MANAGER_URL}
+        REACT_APP_HASURA_URL: ${REACT_APP_HASURA_URL}
+    ports:
+      - 3000:80
+      
 networks:
   db_net:
     driver: bridge