How to Build an Ethereum Blockchain Explorer Dapp HD

How to Build an Ethereum Blockchain Explorer Dapp - https://blockgeeks.com/ 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