Fix ENV variables are not being set inside docker (#332)

* Fix ENV variables are not being set inside docker

closes Visual-Regression-Tracker/Visual-Regression-Tracker#414

* Update Dockerfile

Author: pashidlos

.env

@@ -1,3 +1,3 @@
 REACT_APP_API_URL=http://localhost:4200
 PORT=8080
-VRT_VERSION=4.20.0
+VRT_VERSION=5.0.0

Dockerfile

@@ -6,17 +6,19 @@ FROM node:18-alpine3.18 AS builder
 WORKDIR /app
 
 # Copy all files from the repo to /app
-COPY . .
+COPY /public ./public
+COPY /src ./src
+COPY index.html .
+COPY package*.json .
+COPY tsconfig.json .
+COPY vite.config.ts .
 
 # Install app dependencies
 RUN npm ci --verbose
 
 # Build the ui
 RUN npm run build
 
-# Create environment variable js file
-RUN node generate-env-browser.js
-
 ### STAGE 2: Run ###
 # This image is around 5 megabytes
 FROM nginx:1.25-alpine3.17-slim
@@ -26,7 +28,17 @@ COPY /nginx /etc/nginx/conf.d
 EXPOSE 8080
 EXPOSE 443
 
-COPY --from=builder /app/build /usr/share/nginx/html
-COPY --from=builder /app/env-config.js /usr/share/nginx/html/
+WORKDIR /usr/share/nginx/html
+
+# Copy built source
+COPY --from=builder /app/build .
+
+# Copy override ENV script with default values
+COPY ./env.sh .
+COPY .env .
+
+# Make our shell script executable
+RUN chmod +x env.sh
 
-# Nginx server will now start automatically.
+# Start Nginx server with override ENV variables script
+CMD ["/bin/sh", "-c", "/usr/share/nginx/html/env.sh && nginx -g \"daemon off;\""]

env.sh

@@ -0,0 +1,7 @@
+#!/bin/sh
+# (c) https://github.com/kunokdev/cra-runtime-environment-variables/blob/master/env.sh
+# line endings must be \n, not \r\n !
+
+echo "window._env_ = {" > ./env-config.js
+awk -F '=' '{ print $1 ": \"" (ENVIRON[$1] ? ENVIRON[$1] : $2) "\"," }' ./.env >> ./env-config.js
+echo "}" >> ./env-config.js

generate-env-browser.js

@@ -38,7 +38,7 @@
     "uuid": "^9.0.0"
   },
   "scripts": {
-    "start": "node generate-env-browser.js && cp env-config.js ./public/ && vite",
+    "start": "chmod +x ./env.sh && sh ./env.sh && cp env-config.js ./public/ && vite",
     "test": "jest",
     "format": "prettier --write integration_tests src *.js *.ts *.md",
     "build": "vite build",