How to Build an Ethereum Blockchain Explorer Dapp –
In this lesson we’re going to see how to build a simple dapp using the Ethereum blockchain as our backend
We’re going to build a blockchain explorer, kind of like etherscan, but we’re only going to display the last 10 blocks on the chain. To do this, we’ll use an open-source framework called Ethers.io to quickly develop and deploy our dapp. Ethers comes with command line tools which are available as a node module and can be installed using npm install -g ethers-cli. Let’s install to our global context since we’ll probably use this across multiple projects. You can read more about Ethers by checking out their awesome documentation online.
Ethers.io makes it easy to create dapps by allowing you to quickly run them locally during development. One of the things I really like is that it removes the need to have a copy of the blockchain, so we don’t need to run a local geth node for example in order to build dapps. Another thing I really like is that it comes with a free hosting service called ethers.space, where we can store some of our static files for free. We’ll see how to use this later, but for now we’ll just keep everything local.
The first step is to create a new project folder for our dapp and navigate into it. We’ll call our project, explorer. To use the ethers.space hosting, we need to have an Ethereum account and we can create one by calling ethers-build init, which generates a keyfile for us called account.json. Make sure you use a strong password when encrypting your private key. Your keyfiles never leave your web browser’s local storage when using Ethers
Now let’s start by building our front-end UI. We can create a new HTML file called index.html and define a head and body for our document. Let’s put hello world in the body, and we’ll also give our page a title.
We can quickly spin up a local web server to serve this index.html by using the command ethers-build serve. By default, Ethers will point to the mainnet, but we can also pass the —testnet option to point to ropsten. This prints out a local http address where we can see our UI. Let’s paste this URL into a browser.
We get some sort of view rendered, but this isn’t like anything we wrote in our HTML. We keep seeing this ‘loading application’ spinner because we haven’t included the ethers-app javascript in our document. Let’s add a script tag to the end of our body and link it to the minified ethers-app javascript.
Now when we reload the page in the browser, we are at least able to see our Hello World message meaning our application is loading. There’s also a dashboard across the top of the page, but we didn’t actually write any of this in our index.html. This view is inserted by the Ethers.io container running locally. Through the Ethers.io container, we can serve multiple apps by passing the application URL at the end of the fragment. The part after the hashtag tells the Ethers.io container which application to load. Typically we would have to run the Ethers.io container over https, but it allows for running over http for development.
The Ethers.io container provides a bunch of other tools for us like a messenger, a testnet faucet and even its own blockchain explorer, but we won’t get into these features right now.
Let’s try displaying the last 10 blocks from the blockchain in our UI. We can replace our hello world text with an HTML table element that defines 3 column headers. We’ll print out each block’s number, hash and timestamp of creation. Let’s give our table an ID so we can reference it later in javascript and we’ll also set the width to 100%
To read more, visit