Docker for development and preview of DApps in container environment

.dockerignore

@@ -0,0 +1,9 @@
+apps/bridge-dapp/build
+apps/bridge-dapp/node_modules
+apps/stats-dapp/build
+apps/stats-dapp/node_modules
+apps/webbsite/build
+apps/webbsite/node_modules
+build/
+node_modules/
+.env

.env.example

@@ -0,0 +1,4 @@
+PUBLIC_IP_ADDRESS=
+NODE_ENV=development
+PORT_BRIDGE_DAPP=3000
+PORT_STATS_DAPP=3001

README.md

@@ -97,7 +97,7 @@ Once the development environment is set up, you may proceed to install the requi
    yarn start:stats
    ```
 
-Visit http://localhost:3000/ to see the Webb Stats UI! 🕸️ 🚀
+Visit http://localhost:3001/ to see the Webb Stats UI! 🕸️ 🚀
 
 <h2 id="test"> Testing 🧪 </h2>
 
@@ -125,6 +125,90 @@ yarn test
 
 Visit http://localhost:4400/ to see the Webb Component Library! 🕸️ 🚀
 
+## Docker
+
+### Setup Container
+
+* Install and run [Docker](https://www.docker.com/)
+* Generate .env file from sample file
+```bash
+cp .env.example .env
+```
+* Run Substrate front-end from a Docker container and follow the terminal log instructions.
+```bash
+./docker-dev.sh
+```
+Note: The script requires `jq` command to be installed (i.e. Ubuntu `apt-get install -y jq`)
+
+### Run Bridge Dapp
+
+* Enter Docker container
+```bash
+# last created docker container id
+CONTAINER_ID=$(docker ps -n=1 -q)
+docker exec -it $CONTAINER_ID yarn start:bridge
+```
+* Wait until it says `webpack ... compiled`
+* Go to http://<IP_ADDRESS>:3000
+
+Note: If run on your local machine then Substitute <IP_ADDRESS> with `localhost`. If hosted on a remote cloud provider then substitute it with the Public IP Address of the cloud provider server instance.
+
+### Run Stats Dapp
+
+* Enter Docker container
+```bash
+docker exec -it $CONTAINER_ID yarn start:stats
+```
+* Wait until it says `webpack ... compiled`
+* Go to http://<IP_ADDRESS>:3001
+
+### Expose Ports
+
+* Open relevant ports if necessary
+```
+source .env && export PORT_BRIDGE_DAPP PORT_STATS_DAPP
+apt install ufw
+ufw default allow outgoing
+ufw default allow incoming
+ufw enable
+ufw allow $PORT_BRIDGE_DAPP/tcp && ufw allow $PORT_BRIDGE_DAPP/udp
+ufw allow $PORT_STATS_DAPP/tcp && ufw allow $PORT_STATS_DAPP/udp
+ufw reload
+ufw status
+```
+
+### Useful Docker Commands
+
+* List Docker containers
+```bash
+docker ps -a
+```
+
+* List Docker images
+```bash
+docker images -a
+```
+
+* Enter Docker container shell
+```bash
+docker exec -it $CONTAINER_ID /bin/sh
+```
+
+* View Docker container logs
+```bash
+docker logs -f $CONTAINER_ID
+```
+
+* Remove Docker container
+```bash
+docker stop $CONTAINER_ID; docker rm $CONTAINER_ID;
+```
+
+* Remove Docker image
+```bash
+docker rmi $IMAGE_ID
+```
+
 <h2 id="contribute"> Contributing </h2>
 
 Interested in contributing to the Webb Dapp interface? Thank you so much for your interest! We are always appreciative for contributions from the open-source community!
@@ -151,4 +235,4 @@ yarn build
 
 Licensed under <a href="LICENSE">Apache 2.0 license</a>.
 
-Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in this crate by you, as defined in the Apache 2.0 license, shall be licensed as above, without any additional terms or conditions.
+Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in this crate by you, as defined in the Apache 2.0 license, shall be licensed as above, without any additional terms or conditions.

apps/bridge-dapp/webpack.base.js

@@ -285,7 +285,7 @@ function createWebpack(env, mode = 'production') {
 
     // https://webpack.js.org/configuration/dev-server/
     devServer: {
-      port: 3000,
+      port: process.env.PORT_BRIDGE_DAPP || 3000,
       host: '0.0.0.0',
       compress: true,
       allowedHosts: 'all',

apps/bridge-dapp/webpack.dev.js

@@ -17,7 +17,7 @@ module.exports = (env, config) => {
     devServer: {
       hot: true,
       open: false,
-      port: 3000,
+      port: process.env.PORT_BRIDGE_DAPP || 3000,
       static: path.resolve(__dirname, 'build'),
       client: {
         overlay: {

apps/stats-dapp/src/containers/Layout/Layout.tsx

@@ -24,7 +24,7 @@ export const Layout: FC<PropsWithChildren> = ({ children }) => {
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const retryLink = new RetryLink({
     delay: () => {
-      console.log('rertyLink');
+      console.log('retryLink');
       return 0;
     },
     attempts: () => {

apps/stats-dapp/webpack.config.js

@@ -350,7 +350,7 @@ function createWebpackBase(env, mode = 'production') {
 
     // https://webpack.js.org/configuration/dev-server/
     devServer: {
-      port: 3001,
+      port: process.env.PORT_STATS_DAPP || 3001,
       host: '0.0.0.0',
       compress: true,
       allowedHosts: 'all',

docker-compose-dev.yml

@@ -0,0 +1,25 @@
+version: "3.8"
+services:
+  dev:
+    container_name: ${NAME_PROJECT}-dev
+    restart: always
+    build:
+      context: "."
+      dockerfile: ./docker/Dockerfile.dev
+      args:
+        - NAME_PROJECT=${NAME_PROJECT}
+        - NAME_BRIDGE_DAPP=${NAME_BRIDGE_DAPP}
+        - NAME_STATS_DAPP=${NAME_STATS_DAPP}
+        - PORT_BRIDGE_DAPP=${PORT_BRIDGE_DAPP}
+        - PORT_STATS_DAPP=${PORT_STATS_DAPP}
+    volumes:
+      - ./:/app/${NAME_PROJECT}:delegated
+      - ignore:/app/${NAME_PROJECT}/node_modules
+    ports:
+      - "${PORT_BRIDGE_DAPP}:${PORT_BRIDGE_DAPP}"
+      - "${PORT_STATS_DAPP}:${PORT_STATS_DAPP}"
+    env_file:
+      - .env
+
+volumes:
+  ignore:

docker-dev.sh

@@ -0,0 +1,37 @@
+#!/bin/bash
+
+trap "echo; exit" INT
+trap "echo; exit" HUP
+
+# try to fetch public IP address if value not set in .env
+PUBLIC_IP_ADDRESS_FALLBACK=$(wget http://ipecho.net/plain -O - -q ; echo)
+NAME_PROJECT_FALLBACK=webb-monorepo
+NAME_BRIDGE_DAPP_FALLBACK=bridge-dapp
+NAME_STATS_DAPP_FALLBACK=stats-dapp
+
+# assign fallback values for environment variables from .env.example incase
+# not declared in .env file. alternative approach is `echo ${X:=$X_FALLBACK}`
+source $(dirname "$0")/.env.example
+source $(dirname "$0")/.env
+export NAME_PROJECT=$(jq '.name' $PWD/package.json | sed 's/\"//g')
+export NAME_BRIDGE_DAPP=$(jq '.name' $PWD/apps/bridge-dapp/package.json | sed 's/\"//g' | sed 's/.*\///g')
+export NAME_STATS_DAPP=$(jq '.name' $PWD/apps/stats-dapp/package.json | sed 's/\"//g' | sed 's/.*\///g')
+export PORT_BRIDGE_DAPP PORT_STATS_DAPP
+echo ${PUBLIC_IP_ADDRESS:=$PUBLIC_IP_ADDRESS_FALLBACK}
+echo ${NAME_PROJECT:=$NAME_PROJECT_FALLBACK}
+echo ${NAME_BRIDGE_DAPP:=$NAME_BRIDGE_DAPP_FALLBACK}
+echo ${NAME_STATS_DAPP:=$NAME_STATS_DAPP_FALLBACK}
+if [ "$NODE_ENV" != "development" ]; then
+    printf "\nError: NODE_ENV should be set to development in .env\n";
+    kill "$PPID"; exit 1;
+fi
+printf "\n*** Started building Docker container."
+printf "\n*** Please wait... \n***"
+DOCKER_BUILDKIT=0 docker compose -f docker-compose-dev.yml up --build -d
+if [ $? -ne 0 ]; then
+    kill "$PPID"; exit 1;
+fi
+printf "\n*** Finished building Docker container.\n"
+if [ "$PUBLIC_IP_ADDRESS" != "" ]; then
+    printf "\n*** Public IP address: http://${PUBLIC_IP_ADDRESS}\n***\n";
+fi

docker/Dockerfile.dev

@@ -0,0 +1,27 @@
+FROM node:gallium-alpine
+
+ARG NAME_PROJECT=${NAME_PROJECT}
+ARG NAME_BRIDGE_DAPP=${NAME_BRIDGE_DAPP}
+ARG NAME_STATS_DAPP=${NAME_STATS_DAPP}
+ARG PORT_BRIDGE_DAPP=${PORT_BRIDGE_DAPP}
+ARG PORT_STATS_DAPP=${PORT_STATS_DAPP}
+
+ARG PATH_PROJECT=/app/${NAME_PROJECT}
+
+ENV PATH=${PATH_PROJECT}/node_modules/.bin:$PATH
+
+WORKDIR ${PATH_PROJECT}
+
+COPY package.json yarn.lock ./
+
+RUN apk update && apk add --update git python3 make g++ \
+  && rm -rf /var/cache/apk/*
+
+RUN yarn
+
+COPY . .
+
+EXPOSE ${PORT_BRIDGE_DAPP}
+EXPOSE ${PORT_STATS_DAPP}
+
+CMD tail -f /dev/null

package.json

@@ -10,8 +10,8 @@
     "build:stats": "cd apps/stats-dapp && NODE_ENV=production webpack",
     "build:webbsite": "yarn nx build webbsite",
     "gql:codegen": "graphql-codegen --config codegen.yml",
-    "start:bridge": "cd apps/bridge-dapp && yarn webpack-cli serve --config webpack.dev.js --port 3000",
-    "start:stats": "nx serve stats-dapp",
+    "start:bridge": "source .env && export PORT_BRIDGE_DAPP && cd apps/bridge-dapp && yarn webpack-cli serve --config webpack.dev.js --port $PORT_BRIDGE_DAPP",
+    "start:stats": "source .env && export PORT_STATS_DAPP && nx serve stats-dapp --port $PORT_STATS_DAPP",
     "start:webbsite": "nx serve webbsite",
     "format": "prettier --write \"{lib,apps,tools}/**/*.{ts,js,jsx,tsx}\" "
   },