Dockerize wrapper and fix env vars in wrapper

Author: tushar5526

.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

.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

@@ -0,0 +1 @@
+node_modules

apps/wrapper/Dockerfile

@@ -0,0 +1,36 @@
+#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