Add ENV support to the generated site (#2450)

* WIP Add ENV support to the generated site

* At that point, the ENV make it as JS script inside the container but are not picked up yet

* Fix code to fetch WS_URL from our imported ENV

* Cleanup

* Fix Dockerfile and add doc

* Cleanup of the shell script

.dockerignore

@@ -1 +1,3 @@
 node_modules
+build
+.git

.env-example

@@ -0,0 +1,4 @@
+# You can define all your ENV in such a file and run docker as:
+# docker run ... --env-file .env ...
+WS_URL=ws://localhost:9944
+POLKADOT_UI_SAMPLE=42

.gitignore

@@ -18,4 +18,5 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 .idea/
+env-config.js
 NOTES.md

Dockerfile

@@ -11,15 +11,24 @@ WORKDIR /apps
 COPY . .
 
 RUN npm install yarn -g
-RUN yarn
-RUN NODE_ENV=production yarn build:www
+RUN yarn && NODE_ENV=production yarn build:www
+CMD ["ls", "-al", "build"]
 
-FROM ubuntu:18.04
+# ===========================================================
+FROM nginx:stable-alpine
 
-RUN apt-get update && apt-get -y install nginx
+# The following is mainly for doc purpose to show which ENV is supported
+ENV WS_URL=
 
-COPY --from=builder /apps/packages/apps/build /var/www/html
+WORKDIR /usr/share/nginx/html
+
+COPY env.sh .
+
+RUN apk add --no-cache bash; chmod +x env.sh
+
+COPY docker/nginx.conf /etc/nginx/nginx.conf
+COPY --from=builder /apps/packages/apps/build /usr/share/nginx/html
 
 EXPOSE 80
 
-CMD ["nginx", "-g", "daemon off;"]
+CMD ["/bin/bash", "-c", "/usr/share/nginx/html/env.sh && nginx -g \"daemon off;\""]

README.md

@@ -62,10 +62,10 @@ Be sure to follow the [page-123code/README.md](packages/page-123code/README.md)
 
 You can run a docker container via -
 
-  docker run --rm -it --name polkadot-ui -p 80:80 chevdor/polkadot-ui:latest
+  docker run --rm -it --name polkadot-ui -e WS_URL=ws://someip:9944 -p 80:80 chevdor/polkadot-ui:latest
 
 To build a docker container containing local changes -
 
-  docker build -t chevdor/polkadot-ui:latest .
+  docker build -t chevdor/polkadot-ui .
 
 When using these Docker commands, you can access the UI via http://localhost:80 (or just http://localhost)

docker/nginx.conf

@@ -0,0 +1,27 @@
+user  nginx;
+worker_processes  1;
+
+error_log  /var/log/nginx/error.log warn;
+pid        /var/run/nginx.pid;
+
+events {
+    worker_connections  1024;
+}
+
+http {
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+
+    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
+                      '$status $body_bytes_sent "$http_referer" '
+                      '"$http_user_agent" "$http_x_forwarded_for"';
+
+    access_log  /var/log/nginx/access.log  main;
+
+    sendfile        on;
+    #tcp_nopush     on;
+
+    keepalive_timeout  65;
+    gzip  on;
+    include /etc/nginx/conf.d/*.conf;
+}

env.sh

@@ -0,0 +1,20 @@
+#!/bin/bash
+
+# This script is used when the docker container starts and does the magic to
+# bring the ENV variables to the generated static UI.
+
+TARGET=./env-config.js
+
+# Recreate config file
+echo -n > $TARGET
+
+declare -a vars=(
+  "WS_URL"
+  "SAMPLE"
+)
+
+echo "window.process_env = {" >> $TARGET
+for VAR in ${vars[@]}; do
+  echo "  $VAR: \"${!VAR}\"," >> $TARGET
+done
+echo "}" >> $TARGET

packages/apps-config/src/settings/endpoints.ts

@@ -13,12 +13,13 @@ const DEV: Option[] = [
 ];
 
 const ENV: Option[] = [];
+const WS_URL = process.env.WS_URL || (window as any).process_env.WS_URL;
 
-if (process.env.WS_URL) {
+if (WS_URL) {
   ENV.push({
     info: 'WS_URL',
-    text: 'WS_URL: ' + process.env.WS_URL,
-    value: process.env.WS_URL
+    text: 'WS_URL: ' + WS_URL,
+    value: WS_URL
   });
 }
 

packages/apps/public/index.html

@@ -6,6 +6,7 @@
     <link rel="manifest" href="manifest.json">
     <link rel="shortcut icon" href="favicon.ico">
     <title><%= htmlWebpackPlugin.options.PAGE_TITLE %></title>
+    <script type="text/javascript" src="/env-config.js"></script>
   </head>
   <body>
     <noscript>