.gitignore

@@ -11,6 +11,7 @@
 
 # next.js
 /.next/
+/.next-r/
 /out/
 
 # production
@@ -27,6 +28,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env-list.json
 
 # vercel
 .vercel
@@ -45,4 +47,4 @@ next-env.d.ts
 /public/sw.js.map
 /public/workbox-*.js.map
 /public/worker-*.js.map
-/public/fallback-*.js
+/public/fallback-*.js

next.config.js

@@ -3,10 +3,28 @@ const withPWA = require('next-pwa')({
   dest: 'public',
 })
 
+const webpack = require('webpack');
+
+let envMap;
+try {
+  // .env-list.json provides us a list of identifiers which should be replaced at runtime.
+  envMap = require('./.env-list.json').reduce((a, v) => {
+    a[v] = `"CERC_RUNTIME_ENV_${v.split(/\./).pop()}"`;
+    return a;
+  }, {});
+} catch {
+  // If .env-list.json cannot be loaded, we are probably running in dev mode, so use process.env instead.
+  envMap = Object.keys(process.env).reduce((a, v) => {
+    if (v.startsWith('CERC_')) {
+      a[`process.env.${v}`] = JSON.stringify(process.env[v]);
+    }
+    return a;
+  }, {});
+}
+
 module.exports = withPWA({
-  env: {
-    CERC_TEST_WEBAPP_CONFIG1: process.env.CERC_TEST_WEBAPP_CONFIG1,
-    CERC_TEST_WEBAPP_CONFIG2: process.env.CERC_TEST_WEBAPP_CONFIG2,
-    CERC_WEBAPP_DEBUG: process.env.CERC_WEBAPP_DEBUG,
-  },
-})
+  webpack: (config) => {
+    config.plugins.push(new webpack.DefinePlugin(envMap));
+    return config;
+  }
+});

package.json

@@ -1,9 +1,12 @@
 {
   "private": true,
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start"
+    "build": "yarn find-env && next build",
+    "clean": "rm -rf .next* .env-list.json",
+    "dev": "rm -f .env-list.json && next dev",
+    "find-env": "scripts/find-env.sh > .env-list.json",
+    "load-env": "scripts/replace-env.sh .next .next-r",
+    "start": "yarn load-env && next start .next-r"
   },
   "dependencies": {
     "next": "latest",
@@ -14,6 +17,7 @@
   "devDependencies": {
     "@types/node": "17.0.4",
     "@types/react": "17.0.38",
-    "typescript": "4.5.4"
+    "typescript": "4.5.4",
+    "webpack": "^5.89.0"
   }
 }

scripts/find-env.sh

@@ -0,0 +1,17 @@
+#!/bin/bash
+
+TMPF=`mktemp`
+
+for d in $(find . -maxdepth 1 -type d | grep -v '\./\.' | grep '/' | cut -d'/' -f2); do
+  egrep "/$d[/$]?" .gitignore >/dev/null 2>/dev/null
+  if [ $? -eq 0 ]; then
+    continue
+  fi
+
+  for f in $(find $d -regex ".*.[tj]sx?$" -type f); do
+    cat $f | tr -s '[:blank:]' '\n' | tr -s '[{},()]' '\n' | egrep -o 'process.env.[A-Za-z0-9_]+' $f >> $TMPF
+  done
+done
+
+cat $TMPF | sort -u | jq  --raw-input .  | jq --slurp .
+rm -f $TMPF

scripts/replace-env.sh

@@ -0,0 +1,29 @@
+#!/bin/bash
+
+SRC_DIR=$1
+TRG_DIR=$2
+
+rm -rf $TRG_DIR
+mkdir -p $TRG_DIR
+cp -rp $SRC_DIR $TRG_DIR/
+
+if [ -f ".env" ]; then
+  TMPENV=`mktemp`
+  declare -px > $TMPENV
+  set -a
+  source .env
+  source $TMPENV
+  set +a
+  rm -f $TMPENV
+fi
+
+for f in $(find $TRG_DIR -regex ".*.[tj]sx?$" -type f | grep -v 'node_modules'); do
+  for e in $(cat $f | tr -s '[:blank:]' '\n' | tr -s '[{},()]' '\n' | egrep -o '^"CERC_RUNTIME_ENV[^\"]+"$'); do
+    orig_name=$(echo -n $e | sed 's/"//g')
+    cur_name=$(echo -n $orig_name | sed 's/CERC_RUNTIME_ENV_//g')
+    cur_val=$(echo -n "\$${cur_name}" | envsubst)
+    esc_val=$(sed 's/[&/\]/\\&/g' <<<"$cur_val")
+    echo "$cur_name=$cur_val"
+    sed -i "s/$orig_name/$esc_val/g" $f
+  done
+done