Docker for development and production environments

.dockerignore

@@ -0,0 +1,12 @@
+# items that do not need to be in a Docker image as they
+# are not used by the build system
+.circleci/
+.git/
+docker/Dockerfile.*
+.dockerignore
+.gitignore
+README.md
+
+# items that may be built during Docker image creation
+build/
+node_modules/

.env

@@ -1 +1,6 @@
+ADDRESS=http://localhost
+APP=substrate-front-end-template
+NODE_ENV=
 PORT=8000
+PORT_PROD=8001
+PORT_NGINX=80

.gitignore

@@ -10,3 +10,4 @@ coverage
 !.yarn/sdks
 !.yarn/versions
 .pnp.*
+docker-dev.log

README.md

@@ -143,3 +143,65 @@ it also displays the user's token balance. It is included in the template alread
   ```
 
   Refer to [this doc page](https://github.com/vacp2p/docs.wakuconnect.dev/blob/develop/content/docs/guides/07_reactjs_relay.md).
+
+## Docker
+
+### Development
+
+* Install and run [Docker](https://www.docker.com/)
+* Run Substrate front-end from a Docker container and follow the terminal log instructions.
+```bash
+./docker-dev.sh
+```
+
+### Production
+
+* Install and run [Docker](https://www.docker.com/)
+* Run Substrate front-end from a Docker container and follow the terminal log instructions. 
+```bash
+./docker-prod.sh
+```
+
+### Useful Docker Commands
+
+* Enter Docker container shell
+```bash
+docker exec -it $CONTAINER_ID /bin/sh
+```
+
+* View Docker container logs
+```bash
+docker logs -f $CONTAINER_ID
+```
+
+* List Docker containers
+```bash
+docker ps -a
+```
+
+* List Docker images
+```bash
+docker images -a
+```
+
+* Remove Docker container
+```bash
+docker stop $CONTAINER_ID; docker rm $CONTAINER_ID;
+```
+
+* Remove Docker image
+```bash
+docker rmi $IMAGE_ID
+```
+
+### Useful Nginx Commands
+
+* Verify Nginx Config File Syntax Ok
+```bash
+nginx -t
+```
+
+* [Reload](https://docs.nginx.com/nginx/admin-guide/basic-functionality/runtime-control/) Nginx Config File for changes to take effect
+```bash
+nginx -s reload
+```

docker-compose-dev.yml

@@ -0,0 +1,21 @@
+version: "3.8"
+services:
+  dev:
+    container_name: ${APP}-dev
+    restart: always
+    build:
+      context: "."
+      dockerfile: ./docker/Dockerfile.dev
+      args:
+        - PORT=${PORT}
+        - APP=${APP}
+    volumes:
+      - ./:/usr/local/apps/${APP}:delegated
+      - ignore:/usr/local/apps/${APP}/node_modules
+    ports:
+      - "127.0.0.1:${PORT}:${PORT}"
+    env_file:
+      - .env
+
+volumes:
+  ignore:

docker-dev.sh

@@ -0,0 +1,16 @@
+#!/usr/bin/env bash
+# Copyright 2017-2022 @polkadot authors & contributors
+# This software may be modified and distributed under the terms
+# of the Apache-2.0 license. See the LICENSE file for details.
+
+trap "echo; exit" INT
+trap "echo; exit" HUP
+source .env \
+    && export APP \
+    && export PORT \
+    && ./docker/build.sh \
+    && printf "\n*** Started building Docker container." \
+    && printf "\n*** Please wait... \n***" \
+    && DOCKER_BUILDKIT=0 docker compose -f docker-compose-dev.yml up --build
+printf "\n*** Finished building Docker container."
+printf "\n*** Open web browser: http://localhost:${PORT}\n"

docker-prod.sh

@@ -0,0 +1,28 @@
+#!/usr/bin/env bash
+# Copyright 2017-2022 @polkadot authors & contributors
+# This software may be modified and distributed under the terms
+# of the Apache-2.0 license. See the LICENSE file for details.
+
+trap "echo; exit" INT
+trap "echo; exit" HUP
+source .env \
+    && export ADDRESS \
+    && export APP \
+    && NODE_ENV=production \
+    && export PORT \
+    && export PORT_NGINX \
+    && export PORT_PROD \
+    && PUBLIC_URL="${ADDRESS}:${PORT_PROD}" \
+    && NODE_ENV=${NODE_ENV} PUBLIC_URL=${PUBLIC_URL} ./docker/build.sh \
+    && printf "\n*** Started building ${NODE_ENV} Docker container." \
+    && printf "\n*** Please wait... \n***" \
+    && docker run -it \
+        -e NODE_ENV=${NODE_ENV} \
+        -e PORT_NGINX=${PORT_NGINX} \
+        -e PUBLIC_URL=${PUBLIC_URL} \
+        -d \
+        -p ${PORT_PROD}:${PORT_NGINX} \
+        --name "${APP}-prod" ${APP}
+
+printf "\n*** Finished building ${NODE_ENV} Docker container."
+printf "\n*** Open web browser: ${PUBLIC_URL}\n"

docker/Dockerfile.dev

@@ -0,0 +1,22 @@
+FROM node:gallium-alpine
+
+ARG APP=${APP}
+ARG APP_PATH=/usr/local/apps/${APP}
+ENV PATH=${APP_PATH}/node_modules/.bin:$PATH
+WORKDIR ${APP_PATH}
+
+COPY package.json .
+
+RUN apk update && apk add --update git && rm -rf /var/cache/apk/*
+RUN corepack enable \
+    && corepack prepare yarn@stable --activate \
+    && yarn set version 3.1.1 \
+    && yarn plugin import interactive-tools \
+    && echo -e "nodeLinker: node-modules\n\n$(cat ${APP_PATH}/.yarnrc.yml)" > ${APP_PATH}/.yarnrc.yml \
+    && yarn
+
+COPY . .
+
+EXPOSE ${PORT}
+
+CMD ["yarn", "run", "start"]

docker/Dockerfile.prod

@@ -0,0 +1,40 @@
+FROM node:gallium-alpine AS builder
+
+ARG APP=${APP}
+ARG PORT_NGINX=${PORT_NGINX}
+ARG APP_PATH=/usr/local/apps/${APP}
+# required for it to load correctly
+ENV PUBLIC_URL=${PUBLIC_URL}
+ENV PATH=${APP_PATH}/node_modules/.bin:$PATH
+WORKDIR ${APP_PATH}
+
+COPY package.json .
+
+RUN apk update && apk add --update git && rm -rf /var/cache/apk/*
+RUN corepack enable \
+    && corepack prepare yarn@stable --activate \
+    && yarn set version 3.1.1 \
+    && yarn plugin import interactive-tools \
+    && echo -e "nodeLinker: node-modules\n\n$(cat ${APP_PATH}/.yarnrc.yml)" > ${APP_PATH}/.yarnrc.yml \
+    && yarn
+
+COPY . .
+
+RUN NODE_ENV=production yarn build
+
+# ===========================================================
+FROM nginx:stable-alpine
+
+ARG APP=${APP}
+ARG APP_PATH=/usr/local/apps/${APP}
+ARG NGINX_PATH=/usr/share/nginx/html
+WORKDIR ${NGINX_PATH}
+RUN mkdir -p ${NGINX_PATH}/${APP}
+
+COPY --from=builder ${APP_PATH}/docker/nginx.conf /etc/nginx/nginx.conf
+COPY --from=builder ${APP_PATH}/build/index.html ${NGINX_PATH}/index.html
+COPY --from=builder ${APP_PATH}/build ${NGINX_PATH}/${APP}
+
+EXPOSE ${PORT_NGINX}
+
+CMD ["nginx", "-g", "daemon off;"]

docker/build.sh

@@ -0,0 +1,30 @@
+#!/usr/bin/env bash
+# Copyright 2017-2022 @polkadot/apps authors & contributors
+# This software may be modified and distributed under the terms
+# of the Apache-2.0 license. See the LICENSE file for details.
+
+# Fail fast on any non-zero exits
+set -e
+
+echo "*** Started building $APP"
+
+if [[ $NODE_ENV = "production" ]]
+then
+  echo "*** Building $NODE_ENV $APP"
+  docker build --progress=plain \
+    --no-cache \
+    --build-arg APP=$APP \
+    --build-arg PORT_NGINX=$PORT_NGINX \
+    --build-arg PUBLIC_URL=$PUBLIC_URL \
+    -t $APP \
+    -f docker/Dockerfile.prod .
+else
+  echo "*** Building $APP"
+  docker build --progress=plain \
+    --no-cache \
+    --build-arg APP=$APP \
+    -t $APP \
+    -f docker/Dockerfile.dev .
+fi
+
+echo "*** Finished building $APP"

docker/nginx.conf

@@ -0,0 +1,39 @@
+#!/usr/bin/env bash
+# Copyright 2017-2022 @polkadot/apps authors & contributors
+# This software may be modified and distributed under the terms
+# of the Apache-2.0 license. See the LICENSE file for details.
+
+# Reference: https://github.com/polkadot-js/apps/blob/master/docker/nginx.conf
+
+# Directives and parameters
+user  nginx; # Directive in the 'main' context
+worker_processes  1;
+
+error_log  /var/log/nginx/error.log warn;
+pid        /var/run/nginx.pid;
+
+events {
+    # Configuration of connection processing
+    worker_connections  1024;
+}
+
+http {
+    # Configuration specific to HTTP and affecting all virtual servers  
+    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;
+
+    # Includes server contexts for configuring each HTTP virtual server
+    include /etc/nginx/conf.d/*.conf;
+}

package.json

@@ -14,7 +14,7 @@
     "polkadot-js"
   ],
   "scripts": {
-    "start": "react-app-rewired start",
+    "start": "WATCHPACK_POLLING=true react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "CI=true react-app-rewired test",
     "eject": "react-scripts eject",