This post is part of a series on Web 3.0 Development with Substrate.

In the early days of blockchain development, there weren’t many UI tools available for interacting with clients or nodes. Most operations were exclusively done through CLI, which set the barrier of entry very high for those looking to enter the field. This is not the case anymore with Substrate, as the framework comes with an array of reusable libraries for custom interfaces. This post presents some essential front-end components that are used to interact with a Substrate blockchain node.

Front-End Template

Substrate comes with a separate template that serves as the base layer for your Front-End application UIs, which you can launch with a single command. After configuring your node, this Front-End interface will connect to your node’s Back-End, so that you can walk through your blockchain functionalities straightaway. This template is built with two high-end tools: Create React App and Polkadot-JS API.

Create React App is a command line tool that makes it easy to bootstrap a single-page React app on your computer without handling multiple build dependencies. Essentially, you only get to the files that you will need to for your project, and these files are optimised to deliver the best performance. On the other hand, the Polkadot-JS API is a library of interfaces that are used to communicate with a Substrate blockchain node, whether it be a Permissioned network (i.e your organisation’s) or a Public blockchain (i.e Polkadot).

Node interactor

In a single-chain development mode, the Front-End template loads the data that was previously showing on your CLI into your browser. You can look into the runtime metadata to review the key parameters of your current blockchain without needing to dig into any of the node template folders. Furthermore, you can interact with your runtime pallets from the same interface to call functions (extrinsics) or query specific values (storage): all blockchain operations are reported under the events section on the same page.

There are other important components provided in Substrate so that users can perform basic on-chain operations from the single page interface alone. Some of these tasks include selecting an account from a list (AccountSelector.js), sending units of accounts to a 3rd party address (Transfer.js), checking available units of accounts (Balances.js), displaying the block information (BlockNumber.js). By editing the node template (TemplateModule.js) and adding your own React component, you can customise your Front-End application to reflect any changes made to the runtime pallets.

Polkadot-JS Apps

In a multi-node environment, nodes are required to configure shared parameters (i.e roles, key pairs, communication protocols, etc) before they can even begin to run a viable and valid blockchain. In this context, the variability of back-end operations needs to be translated on screen through a richer UI. Since it would be extremely tedious for developers to build individual interfaces for individual projects from the ground up, Substrate uses Polkadot-JS Apps to extend its basic Front-End template.

Polkadot-JS Apps is first and foremost a portal into Substrate chains from the browser to give users access to all available features in existence. It facilitates interacting with live public networks (i.e Kusama, Edgeware), test networks (i.e Rococo), development networks (i.e your or others’ networks) from a single user-facing application that is distributed across the web via IPFS. Without a doubt, Polkadot-JS Apps cleanly exemplifies how powerful, secure and user-focused Web 3.0 apps are meant to be.

Substrate offers a variety of Front-End utilities that web developers will not only recognise, but also find easy to reuse when building interfaces for their specific projects. The framework has been specifically designed to answer developers’ needs in terms of accessibility and efficiency. This is also the case when it comes to managing core blockchain operations, which we will explore in Part 4.

References:

Substrate Developer (Git)Hub: Substrate Front-end Template

Polkadot/Substrate Portal: Kusama Blockchain explorer