Basic Environment:

The VM OS is Ubuntu 20.04

Vm ID address: 172.16.1.20

Environment configuration

Install dependencies

sudo apt update
sudo apt install -y git clang curl libssl-dev
Copy the code

Install the Rust

#The installation
curl https://sh.rustup.rs -sSf | sh

#configuration
source ~/.cargo/env

#Configure the default toolchain as the latest stable version
rustup default stable
rustup update

#Install the nightly compiler chain
rustup update nightly

#Add a WASM build target to the nightly build chain
rustup target add wasm32-unknown-unknown --toolchain nightly
Copy the code

Compile the Node Template

Node Template is a Substrate frame-based Template application provided by Substrate Developer Hub.

#Copy the Node Template (version v3.0.0).Git clone - b v3.0.0 - the depth of 1 https://github.com/substrate-developer-hub/substrate-node-template
#compile
cd substrate-node-template
cargo build --release
Copy the code

Install the Front – End Template

Front-end Template is a ReactJS based front-end application provided by Substrate Developer Hub for interaction with Substrate blockchain.

Installation Node. Js

Installation:

curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs
Copy the code

Confirmation:

wangzk@ubuntu:~$node -v v14.16.1 wangzk@ubuntu:~$NPM -v 6.14.12Copy the code

Installation of Yarn

Installation:

sudo npm install --global yarn
Copy the code

Confirmation:

1.22.10 wangzk @ ubuntu: ~ $yarn - vCopy the code

Install the Front – End

#copyGit clone - b v3.0.0 - the depth of 1 https://github.com/substrate-developer-hub/substrate-front-end-template
#Install dependencies
cd substrate-front-end-template
yarn install
Copy the code

Interaction with nodes

Start Node

cd substrate-node-template

#Start a temporary node in development mode
./target/release/node-template --dev --tmp
Copy the code

Among them:

  • --dev— Specify the development mode
  • --tmp— Node data is stored in a temporary directory
wangzk@ubuntu:~/substrate-node-template$ ./target/release/node-template --dev --tmp 2021-04-25 18:06:34 Running in --dev  mode, RPC CORS has been disabled. 2021-04-25 18:06:34 Substrate Node 2021-04-25 18:06:34 ✌️ version DDD 3.0.0-8370 2021-04-25 - x86_64 - Linux - gnu 18:06:34 ❤ ️ by Substrate DevHub < https://github.com/substrate-developer-hub >, 2017-2021 2021-04-25 18:06:34 📋 Chain Specification: Development 2021-04-25 18:06:34 🏷 Node Name: Dreary -spiders-7993 2021-04-25 18:06:34 👤 Role: AUTHORITY 2021-04-25 18:06:34 💾 Database: RocksDb at/TMP/substratej1rcoJ/chains/dev/db 2021-04-25 18:06:34 ⛓ Native runtime: Node-template-100 (node-template-1.tx1.au1) 2021-04-25 18:06:34 🔨 Initializing Genesis block/state (state: 0x6d10... 2825, the header - hash: 0 x94e8... 3adb) 2021-04-25 18:06:34 👴 Loading GRANDPA Authority set from genesis on what appears to be first startup. 2021-04-25 18:06:34 ⏱ Loaded block-time = 6000 milliseconds from genesis on first-launch 2021-04-25 18:06:34 Using default protocol ID "sup" because none is configured in the chain specs 2021-04-25 18:06:34 🏷 Local node identity is: 12 d3koowr5xaliyicraxfg7iuro63qmzduvbgfmifgu9cmihanrp 2021-04-25 18:06:34 📦 Highest known block at # 0 2021-04-25 18:06:34 〽️ Prometheus Server started at 127.0.0.1:9615 2021-04-25 18:06:34 Listening for new connections on 127.0.0.1:9944. 2021-04-25 18:06:36 🙌 Starting consensus session on top of parent 0x94e8821914882c9a650b6648ef0af4e7561cdfbb1585b7613eb9f153b3663adb 2021-04-25 18:06:36 Timeout fired waiting for transaction pool at block #0. Proceeding with production. ......Copy the code

The output contains:

  • Database: RocksDb at /tmp/substratej1rcoJ/chains/dev/db
  • Local node identity is: 12D3KooWR5XALiyiCRAxfg7iuro63QMZdUVBgfMifgU9CmihaNrP

Start the Front – End

cd substrate-front-end-template
yarn start
Copy the code

The following output is displayed after the startup is successful:

Compiled successfully!

You can now view substrate-front-end-template in the browser.

  Local:            http://localhost:8000/substrate-front-end-template
  On Your Network:  http://172.16.1.20:8000/substrate-front-end-template

Note that the development build is not optimized.
To create a production build, use yarn build.
Copy the code

interaction

When front-end is successfully started, the browser will automatically open and display the following page:

Problems encountered

On the outside of the virtual machine cannot access http://172.16.1.20:8000/substrate-front-end-template, the browser prompts the following error message:

Solutions:

First, add the — WS-external parameter when starting Node.

./target/release/node-template --dev --tmp --ws-external
Copy the code

Then, before starting front-end, modify the development.json file.

cd substrate-front-end-template/src/config
vim development.json
Copy the code

Example Change 1237.0.0.1 in the configuration file to the actual IP address.

{
  "PROVIDER_SOCKET": Ws: / / 127.0.0.1:9944 ""
}
/ / to
{
  "PROVIDER_SOCKET": Ws: / / 172.16.1.20:9944 "" // This is the IP of my virtual machine
}
Copy the code

The relevant data

Create Your First Substrate Chain

Fixing “Error Connecting to Substrate” message in Substrate Front End Template