React frontend & motoko smart contract for our first Rasa Chatbot for the Internet Computer.
The live deployment can be found at https://web3r.chat
The full application consists of 3 GitHub repositories:
Download MiniConda and then install it:
bash Miniconda3-xxxxx.sh
Create a conda environment with NodeJS & Python 3.9:
conda create --name dapp-0 nodejs python=3.9
conda activate dapp-0
git clone [email protected]:web3r-chat/dapp-0.git
cd dapp-0
Create this pre-commit script, file .git/hooks/pre-commit
#!/bin/bash
# Apply all static auto-formatting & perform the static checks
export PATH="$HOME/miniconda3/envs/dapp-0/bin:$PATH"
/usr/bin/make all-static
and make the script executable:
chmod +x .git/hooks/pre-commit
All color styling is done using Dracula UI,
This styling library is not Open Source, and we plan to swap it out for an open source library.
After purchasing a license, do the following, so the install scripts will be able to install it:
-
Create a GitHub Personal Access Token
-
Store it in a
.env
file in the root of this repo, as:# GitHub Personal Access Token to install Dracula UI GITHUB_PAT_FOR_DRACULA_UI=ghp_...
Install the toolchain:
- The [dfinity/sdk release version](dfinity/sdk release version) is specified in
dfx.json
- We use vessel to include motoko package sets curated in the vessel-package-set. (See Appendix B below)
conda activate dapp-0
make install-all
# ~/bin must be on path
source ~/.profile
# Verify all tools are available
dfx --version
vessel --version
# verify all other items are working
make all-static-check
make dfx-start-local
# stop it with
make dfx-stop-local
Our dapp is using internet identity for authentication.
To be able to develop the dapp locally, we must deploy the Internet Identity canister to the local network:
-
Start the local network as described above
-
clone the Internet Identity repo and deploy the internet identity canister:
# Use a conda environment with nodejs conda create --name internet-identity nodejs conda activate internet-identity # Clone internet-identity as a sibling repository on your computer cd ../ git clone [email protected]:dfinity/internet-identity.git cd internet-identity npm install # Install internet identity canister into your running local network rm -rf .dfx/local II_ENV=development II_DUMMY_AUTH=1 II_DUMMY_CAPTCHA=1 II_FETCH_ROOT_KEY=1 dfx deploy --no-wallet --argument '(null)'
-
Use the canister ID of the
internet_identity canister
for theII_URL_LOCAL
variable on line8
in ourwebpack.config.js
:// file: webpack.config.js // Replace ID with your local internet_identity canister const II_URL_LOCAL = 'https://<ID>.localhost:8000'
Deploy the dapp to the local network with:
# from root directory
conda activate dapp-0
# Start local network
make dfx-start-local
# Deploy
make dfx-deploy-local
The frontend is a react application with a webpack based build pipeline. Webpack builds with sourcemaps, so you can use the devtools of the browser for debugging:
-
Run frontend with npm development server:
# from root directory conda activate dapp-0 # start the development server, with hot reloading npm run start # to rebuild from scratch npm run build
-
Open the browser at https://localhost:8080 & open the browser devtools
-
Make changes to the frontend code in your favorite editor, and when you save it, everything will auto-rebuild and auto-reload