Integrating Hyperledger Explorer with Hyperledger Fabric Network v2.2

Published in

Coinmonks

4 min readDec 30, 2020

1. Overview

The ability to visualize data is of critical importance, in order to extract business value from it. Hyperledger Explorer provides this much-needed functionality. Hyperledger Explorer is a user-friendly Web application tool used to view, invoke, deploy, or query blocks, transactions and associated data, network information (name, status, list of nodes), chain codes and transaction families, as well as any other relevant information stored in the ledger. In this article, we are going to learn how we can integrate Hyperledger Explorer with Hyperledger Fabric. We will be using v2.2 as it is the current LTS release.

TL DR. Source code can be found here.
Also, checkout my course on Hyperledger Fabric Deployment on MultiHost

2. key features of Hyperledger Explorer

Integrating Hyperledger Explorer with Hyperledger Fabric Network v2.2

Web application with a rich user interface, developed using the latest technologies, such as ReactJS, Google material UI, web-sockets, and others.
Blockchain module that can listen, and query a Hyperledger Fabric network.
Get the latest status blocks, network, and chaincodes, view blocks, and transactions.
Blocks and transactions metrics by hours, and minutes.
Search, and filter blocks, transactions by date range, and channels.
Dynamically discover new channels and switch data presentation by channels.
Get real-time notification of new blocks.

3. Architecture

It Consists of 3 layer

Presentation Layer/Frontend- The frontend of Hyperledger explorer is built over ReactJs
Backend Layer- The backend is built over node js and express framework with WebSockets.
Database Layer- It uses the PostgreSQL database. The information about blocks, transactions, channels, etc will be stored in this database.

The following diagram shows a high-level view of the Hyperledger Explorer data model.

4. Implementation

clone the repository

git clone https://github.com/adityajoshi12/fabric-samples-advance-topics

2. Start the network

cd fabric-samples-advance-topics/test-network
./network.sh up createChannel -c mychannel -s couchdb -i 2.2

3. start the explorer docker containers

cd ../explorer
docker-compose up -d

4. Once the explorer containers are up, Open http://localhost:8080 on your browser. And you can see the explorer dashboard. you need to log in and once logged in successfully, you will be able to see a screen like below.

The username and password of the dashboard are defined in explorer/first-network.json and to disable the authentication, we can set enableAuthentication to true

you can check the logs using docker logs -f explorer.mynetwork.com , You ca finds the video tutorial here.

To stop the hyperledger explorer run:

docker-compose down

5. Building your own UI

You can build your own user interface on the top of hyperledger explorer using the REST API exposed by the explorer. Explorer team has provided us the Swagger specifications and you can simply import that into your REST client like Postman or Insomnia. You can find the swagger specification here.

After import the swagger specifications you can see a collection with REST API.

And now you can simply use these APIs with any frontend framework of your choice.

6. Summary

In this article, we learned how we can integrate Hyperledger explorer with the Hyperledger Fabric network, You can see that it is very straight forward and within 5 minutes we can integrate hyperledger explorer with HLF. You can find the source code here.

Check out my course on Hyperledger Fabric Deployment on MultiHost

If you find this article helpful do hit the clap button and follow me for more such informative articles.

You can find me on Linkedin or stalk me on GitHub? If that’s too social for you, just drop a mail to adityaprakashjoshi1@gmail.com if you wish to talk tech with me.