diff --git a/.dockerignore b/.dockerignore index 3c3629e647..1c8c93fa2d 100644 --- a/.dockerignore +++ b/.dockerignore @@ -1 +1,3 @@ node_modules +build +.git diff --git a/.env-example b/.env-example new file mode 100644 index 0000000000..0b0cd09dcf --- /dev/null +++ b/.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 diff --git a/.gitignore b/.gitignore index fc68f75057..28329430fa 100644 --- a/.gitignore +++ b/.gitignore @@ -18,4 +18,5 @@ npm-debug.log* yarn-debug.log* yarn-error.log* .idea/ +env-config.js NOTES.md diff --git a/Dockerfile b/Dockerfile index 02bfc440e8..360b2dbb3d 100644 --- a/Dockerfile +++ b/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;\""] diff --git a/README.md b/README.md index d79a7ca50a..71efafe898 100644 --- a/README.md +++ b/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) diff --git a/docker/nginx.conf b/docker/nginx.conf new file mode 100644 index 0000000000..dce1ffbd61 --- /dev/null +++ b/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; +} diff --git a/env.sh b/env.sh new file mode 100755 index 0000000000..e01e134aad --- /dev/null +++ b/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 diff --git a/packages/apps-config/src/settings/endpoints.ts b/packages/apps-config/src/settings/endpoints.ts index f8c5a774fc..9ed64c3a09 100644 --- a/packages/apps-config/src/settings/endpoints.ts +++ b/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 }); } diff --git a/packages/apps/public/index.html b/packages/apps/public/index.html index f3991a767d..e6f1ea0045 100644 --- a/packages/apps/public/index.html +++ b/packages/apps/public/index.html @@ -6,6 +6,7 @@ <%= htmlWebpackPlugin.options.PAGE_TITLE %> +