wip

.env.example

@@ -0,0 +1,7 @@
+NAME_PROJECT=webb-dapp
+NAME_BRIDGE_DAPP=bridge-dapp
+NAME_STATS_DAPP=stats-dapp
+NAME_UI_COMPONENTS_DAPP=ui-components-dapp
+PORT_BRIDGE_DAPP=3000
+PORT_STATS_DAPP=3001
+PORT_UI_COMPONENTS_DAPP=4400

README.md

@@ -97,13 +97,43 @@ Once the development environment is set up, you may proceed to install the requi
    yarn start:stats
    ```
 
-Visit http://localhost:4000/ to see the Webb Stats UI! 🕸️ 🚀
+Visit http://localhost:3001/ to see the Webb Stats UI! 🕸️ 🚀
+
+<h2 id="test"> Testing 🧪 </h2>
+
+The following instructions outlines how to run Webb Dapp test suite.
+
+### To run tests
+
+```
+yarn test
+```
+
+### To start [Storybook](https://storybook.js.org/) for component library
+
+1. Install dependencies by `yarn`
+
+   ```bash
+   yarn install
+   ```
+
+2. Start the storybook:
+
+   ```bash
+   yarn nx storybook webb-ui-components 
+   ```
+
+Visit http://localhost:4400/ to see the Webb Component Library! 🕸️ 🚀
 
 ## Docker
 
-### Setup Container
+### Setup Docker 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
@@ -113,31 +143,45 @@ Visit http://localhost:4000/ to see the Webb Stats UI! 🕸️ 🚀
 
 * 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 cloud provider then substitute it with the Public IP Address (e.g. `wget http://ipecho.net/plain -O - -q ; echo`) 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>:4000
+* Go to http://<IP_ADDRESS>:3001
+
+### Run UI Components Dapp
+
+* Enter Docker container
+```bash
+docker exec -it $CONTAINER_ID yarn nx storybook webb-ui-components
+```
+* Wait until it says `webpack built preview ...`
+* Go to http://<IP_ADDRESS>:4400
 
 ### Expose Ports
 
 * Open relevant ports if necessary
 ```
-source .env && export PORT_BRIDGE_DAPP PORT_STATS_DAPP
+source .env && export PORT_BRIDGE_DAPP PORT_STATS_DAPP PORT_UI_COMPONENTS_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/tcp
 ufw allow $PORT_STATS_DAPP/tcp && ufw allow $PORT_STATS_DAPP/tcp
+ufw allow $PORT_UI_COMPONENTS_DAPP/tcp && ufw allow $PORT_UI_COMPONENTS_DAPP/tcp
 ufw reload
 ufw status
 ```
@@ -174,32 +218,6 @@ docker stop $CONTAINER_ID; docker rm $CONTAINER_ID;
 docker rmi $IMAGE_ID
 ```
 
-<h2 id="test"> Testing 🧪 </h2>
-
-The following instructions outlines how to run Webb Dapp test suite.
-
-### To run tests
-
-```
-yarn test
-```
-
-### To start [Storybook](https://storybook.js.org/) for component library
-
-1. Install dependencies by `yarn`
-
-   ```bash
-   yarn install
-   ```
-
-2. Start the storybook:
-
-   ```bash
-   yarn nx storybook webb-ui-components 
-   ```
-
-Visit http://localhost:4400/ to see the Webb Component Library! 🕸️ 🚀
-
 <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!

apps/bridge-dapp/webpack.base.js

@@ -285,7 +285,7 @@ function createWebpack(env, mode = 'production') {
 
     // https://webpack.js.org/configuration/dev-server/
     devServer: {
-      port: process.env.PORT_BRIDGE_DAPP,
+      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: process.env.PORT_BRIDGE_DAPP,
+      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

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

docker-compose-dev.yml

@@ -10,14 +10,17 @@ services:
         - NAME_PROJECT=${NAME_PROJECT}
         - NAME_BRIDGE_DAPP=${NAME_BRIDGE_DAPP}
         - NAME_STATS_DAPP=${NAME_STATS_DAPP}
+        - NAME_UI_COMPONENTS_DAPP=${NAME_UI_COMPONENTS_DAPP}
         - PORT_BRIDGE_DAPP=${PORT_BRIDGE_DAPP}
         - PORT_STATS_DAPP=${PORT_STATS_DAPP}
+        - PORT_UI_COMPONENTS_DAPP=${PORT_UI_COMPONENTS_DAPP}
     volumes:
       - ./:/usr/local/${NAME_PROJECT}:delegated
       - ignore:/usr/local/${NAME_PROJECT}/node_modules
     ports:
       - "${PORT_BRIDGE_DAPP}:${PORT_BRIDGE_DAPP}"
       - "${PORT_STATS_DAPP}:${PORT_STATS_DAPP}"
+      - "${PORT_UI_COMPONENTS_DAPP}:${PORT_UI_COMPONENTS_DAPP}"
     env_file:
       - .env
 

docker-dev.sh

@@ -1,7 +1,16 @@
+#!/bin/bash
+
 trap "echo; exit" INT
 trap "echo; exit" HUP
+
+# if $PORT_UI_COMPONENTS_DAPP is 4400 then replace the line `"port": 4400,`
+# with `"port": $PORT_UI_COMPONENTS_DAPP,` incase the port differs from the port in .env file
 source .env \
-    && export NAME_PROJECT NAME_BRIDGE_DAPP NAME_STATS_DAPP PORT_BRIDGE_DAPP PORT_STATS_DAPP \
+    && export NAME_PROJECT NAME_BRIDGE_DAPP NAME_STATS_DAPP NAME_UI_COMPONENTS_DAPP \
+        PORT_BRIDGE_DAPP PORT_STATS_DAPP PORT_UI_COMPONENTS_DAPP \
+    && if [[ ! -z "$PORT_UI_COMPONENTS_DAPP" ]]; \
+        then sed -i "s/\"port\":\s[0-9]*\,/\"port\"\: $PORT_UI_COMPONENTS_DAPP\,/gI" \
+        $PWD/libs/webb-ui-components/project.json ; 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

docker/Dockerfile.dev

@@ -3,8 +3,10 @@ FROM node:gallium-alpine
 ARG NAME_PROJECT=${NAME_PROJECT}
 ARG NAME_BRIDGE_DAPP=${NAME_BRIDGE_DAPP}
 ARG NAME_STATS_DAPP=${NAME_STATS_DAPP}
+ARG NAME_UI_COMPONENTS_DAPP=${NAME_UI_COMPONENTS_DAPP}
 ARG PORT_BRIDGE_DAPP=${PORT_BRIDGE_DAPP}
 ARG PORT_STATS_DAPP=${PORT_STATS_DAPP}
+ARG PORT_UI_COMPONENTS_DAPP=${PORT_UI_COMPONENTS_DAPP}
 
 ARG PATH_PROJECT=/usr/local/${NAME_PROJECT}
 
@@ -21,5 +23,6 @@ COPY . .
 
 EXPOSE ${PORT_BRIDGE_DAPP}
 EXPOSE ${PORT_STATS_DAPP}
+EXPOSE ${PORT_UI_COMPONENTS_DAPP}
 
 CMD tail -f /dev/null