Polkadot

Medium

How to build a dApp on Polkadot ?

Welcome to this tutorial on how to build a decentralized application (dApp) on Polkadot. Substrate is a framework that provides all the necessary components for building dApps on Polkadot. It allows developers to focus on creating custom features and functionality for their projects. In this tutorial, we will guide you through the process of setting up a blockchain application using a preformatted template on Substrate, as well as setting up a frontend application for interacting with the dApp. We will also cover how to deploy the dApp on the Polkadot network and test it using the Substrate developer hub. To get started, you will need Rust installed on your computer and some basic programming knowledge. Let’s dive in!

Prerequisites for building a dApp on Polkadot

To build a dApp using Substrate, here is what you will need:

• Rust, installed locally on your computer and configured to create a development environment.

• Basic knowledge of software programming and the use of terminal.

Step 1: Set up a blockchain application with Substrate

There are preformatted templates on Substrate that you can use to set up a development environment. These templates help add more customizations and features when developing using Substrate.

git clone https://github.com/substrate-developer-hub/substrate-node-template

Run these commands to integrate the Nightly build with Rust:

rustup update nightly
rustup target add wasm32-unknown-unknown –toolchain nightly

Now, change the directory into the ./substrate-node-template folder. Then check out to the latest version inside the repository:

cd substrate-node-template
git checkout latest

The repository stores Rust files that you can modify as per the customizations or features that you need in your project.

Apply the below commands to compile and run the node template within your project.

$ cargo build –release

2021-12-16 00:36:30 Running in –dev mode, RPC CORS has been disabled.
2021-12-16 00:36:30 Substrate Node
…
2021-12-16 00:36:33 Highest known block at #0
2021-12-16 00:36:33 Prometheus exporter started at 127.0.0.1:9615
2021-12-16 00:36:33 Listening for new connections on 127.0.0.1:9944.
2021-12-16 00:36:36 Starting consensus session on top of parent 0x4bbcc70ccccc322d314a5df12a814c28d40e6879b7b930df5ac5a50fe4be4c30
2021-12-16 00:36:36 Prepared block for proposing at 1 (1 ms) [hash: 0x18f1c7bf91a1544c9a0e35ac08c8f036b4cb2f8d8297233fffadb94022b982a7; parent_hash: 0x4bbc…4c30; extrinsics (1): [0x6458…325e]]
2021-12-16 00:36:36 Pre-sealed block for proposal at 1. Hash now 0xf10d170d82617ff5df6752dc911d3483badf34b005c8c48a46aeb6b708c915b2, previously 0x18f1c7bf91a1544c9a0e35ac08c8f036b4cb2f8d8297233fffadb94022b982a7.
2021-12-16 00:36:36 Imported #1 (0xf10d…15b2)
2021-12-16 00:36:38 Idle (0 peers), best: #1 (0xf10d…15b2), finalized #0 (0x4bbc…4c30), 0 0
…
2021-12-16 00:36:42 Pre-sealed block for proposal at 2. Hash now 0x409138fda4f59dc093dce60fefbaca31c354ce18cef1bbea6f69a5009af6e0f4, previously 0x484e81ea10a15f04a640a595cb51d41eecc05919b4a16839852ba4d8a69440e1.
…

In the terminal output you see above, your app produces new blocks and achieves consensus for the state they define.

In the next step, you set up a frontend application to enable interaction with your dApp currently running on the terminal. Run the following commands by opening a new terminal session:

git clone https://github.com/substrate-developer-hub/substrate-front-end-template

Now, you need to change the directory into the freshly created folder, substrate-front-end-template, and then install the required dependencies for the user interface:

yarn install