OCLOMRS-463: Passing OCL URL environment variables to run at runtime

.gitignore

@@ -29,3 +29,5 @@ package-lock.json
 **/__snapshots__/**
 src/components/dashboard/container/ListContainer.jsx
 .env
+/public/env-config.js
+env-config.js

Dockerfile

@@ -23,6 +23,23 @@ RUN npm install react-scripts@1.1.1 -g --silent
 # Copy everything to the working directory
 COPY . /usr/src/app
 
+# # Copy .env file and shell script to container
+# WORKDIR /usr/share/nginx/html
+COPY ./init.sh .
+COPY .env .
+
+# Make our shell script executable
+RUN chmod +x init.sh
+
+# Run the bash script
+RUN /bin/bash -c ./init.sh
+
+# Remove env-config.js from public if any.
+RUN rm -f ./public/env-config.js
+
+# Copy new env-config.js to public if any.
+RUN cp env-config.js ./public/
+
 # Create an optimized build version of the project
 RUN npm run build
 

README.md

@@ -19,8 +19,8 @@
     # git clone [the url of the repository] For example; 
     # git clone https://github.com/yourusername/openmrs-ocl-client.git
     # Create a .env file in the root directory with the variables API URL and Traditional OCL URL as shown below to access app in dev mode;
-      REACT_APP_OCL_API_HOST=https://api.qa.openconceptlab.org/
-      REACT_APP_TRADITIONAL_OCL_HOST=https://qa.openconceptlab.org
+      OCL_API_HOST=https://api.qa.openconceptlab.org/
+      TRADITIONAL_OCL_HOST=https://qa.openconceptlab.org
       
 - In the root directory of the project install all the dependencies using the command below 
     $ npm install

init.sh

@@ -0,0 +1,29 @@
+#!/bin/bash
+
+# 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

@@ -29,7 +29,7 @@
     "uuid": "^3.3.2"
   },
   "scripts": {
-    "start": "npm run build:css && react-scripts start",
+    "start": "chmod +x ./init.sh && ./init.sh && cp env-config.js ./public/ && npm run build:css && react-scripts start",
     "build": "npm run build:css && react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject",

public/index.html

@@ -12,6 +12,7 @@
     <meta name="msapplication-TileColor" content="#da532c">
     <meta name="msapplication-config" content="%PUBLIC_URL%/images/favicons/browserconfig.xml">
     <meta name="theme-color" content="#ffffff">
+    <script src="./env-config.js"></script>
     <title>OpenMRS OCL client</title>
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
   </head>

src/config/index.js

@@ -1,4 +1,4 @@
 export default {
-  OCL_API_HOST: process.env.REACT_APP_OCL_HOST || 'https://api.qa.openconceptlab.org/',
-  TRADITIONAL_OCL: process.env.REACT_APP_TRADITIONAL_OCL_HOST || 'https://qa.openconceptlab.org',
+  OCL_API_HOST: window.env.OCL_API_HOST || 'https://api.qa.openconceptlab./',
+  TRADITIONAL_OCL: window.env.TRADITIONAL_OCL_HOST || 'https://qa.openconceptlab.',
 };