DEV Community

Kevin Kuo
Kevin Kuo

Posted on

How to interact with Polkadot Substrate Node from front-end web browser

Substrate allows developers to build their own customised Parachains, but how can we easily
interact with the substrate node from the web browser?


I have found 3 ways to interact, you can choose it according to your use case:

1, Substrate Front End Template (Basic Level)

Link: https://substrate-developer-hub.github.io/substrate-front-end-template/

It allows developers basic functionalities for interacting with the pallets including Pallet Interactor, Transfer, Upgrade runtime and Event viewer. You can fork the source code from the Github repo to create customise components to interact according to different pallets.

Use cases: Use when you just need to perform basic transaction with the pallets and look up for the events.

Image description


2, Polkadot.js App (Advanced Level)

Link: https://polkadot.js.org/apps/

It provides the most extensive functionalities with generating new accounts, smart contract deployment (provided the contracts pallets being installed), block details, and connecting to different networks.

Use cases: Use when you need to implement those features that Substrate Front End Template is not available to use.

Image description


3, ParityTech Contracts UI (Smart contracts ONLY)

Link: https://paritytech.github.io/contracts-ui/

It only allows for smart contract deployment and transactions, cannot interact with pallets transactions. You can add contract pallets into your runtime node, or simply use this pre-configured node template.

Use case: Use when you only need to interact with smart contract.

Image description


To connect to a specific ip address, just add the
?rpc=wss://your ipaddress to the end of the link. For example:

https://polkadot.js.org/apps/?rpc=wss://10.194.120.80

https://paritytech.github.io/contracts-ui/#/?rpc=wss://10.194.120.80


Thank you for reading! Feel free to reach out to me if you have any questions!

Top comments (0)