Home Run Ethereum Dapps in Your Browser

Run Ethereum Dapps in Your Browser

Ethereum Dapps

Prior to blockchain, the application development life cycle, which facilitated large “Web2” applications, was built using tools like HTML, CSS, JavaScript, REST web services, Java, SQL, and NOSQL data stores. Now it is being amended to integrate the blockchain onto that stack. Ethereum enables the decentralized web, referred to as “Web3.” What makes it different from Web2 is that on Ethereum the web servers are gone except where used to access some verifiable condition needed to support smart contract execution. So the new dapp (“decentralized application”) is just like most applications. It consists of two parts: classic front-end and back-end architecture. As you would expect the frontend is written to either handle web services like REST or provide an HTML/CSS user experience to handle user requests and provide a response. The other part of the application is the backend, which interacts with the blockchain, the new “database.” So how does a web browser application converse with the blockchain?

MetaMask solves that key blockchain usability point of friction by providing a way for normal browsers to access the blockchain and propose transactions, to help anyone accomplish any action on the blockchain, easily and securely, enabling a new kind of web browsing experience.


MetaMask is a browser extension that injects the web3 API into website you visit. Using MetaMask, you can use the browser you are comfortable with to browse the emerging decentralized web. The key advantage of using MetaMask is simplified key management. It encrypts your private key locally and asks users to confirm and sign transactions and as requested before relaying them to the Ethereum blockchain.

In order to interact with the blockchain, a client needs access to the entire chain. This implies that for MetaMask to interact with the blockchain, it would need to download the entire blockchain locally for use. To circumvent this, a “zero-client” gateway can be used for instant access via RPC to and from the blockchain. The JSON-RPC API was discussed in the previous chapter. MetaMask uses INFURA as its gateway, which allows for instant setup simply by installing an extension.

Installing MetaMask

MetaMask is currently available as a Chrome extension, with other browser support under active development. The technology is advancing rapidly that could ultimately allow for MetaMask to function within a browser without requiring an extension.

To install MetaMask, simply visit the Chrome Web Store, search for and install MetaMask.

Developing a Contract Using MetaMask

After installing, you will see the MetaMask fox logo in the browser toolbar. The first time using the application you will need to generate your wallet public and private keys. The private key will be encrypted locally using a password you set. You will also be given a recovery seed phrase which you should save and store securely if you plan to use MetaMask to store real value. If you forget your wallet password, lose your computer, or otherwise can’t get access to your MetaMask wallet, you will be able to restore to a fresh browser using this seed phrase.

The Ethereum wallet is a gateway to decentralized applications on the Ethereum blockchain. It allows you to hold and secure ether and other crypto-assets built on Ethereum. as well as write, deploy, and use smart contracts. MetaMask provides an Ethereum wallet inside your browser. Metamask hosts a wallet with your private key-an Ethereum wallet and allows you to access sites directly in your Chrome browser and trade as if you had your wallet right there with you on the site. The MetaMask user interface is quite simple, as seen in Figure 6-1. Your Ethereum account address is available, with links to a more detailed view of the account activity on a popular blockchain explorer. When on the Ethereum Main net, you have the option to buy the ether token via integrations with popular exchanges such as Coinbase, where you can buy ether for fiat currency such as USD, or ShapeShift, where you can convert existing cryptocurrencies such as bitcoin to ether. You can send transactions as well, including sending the ether token to another account or smart contract.

In order to interact with the Ethereum blockchain, it is necessary to pay “gas” costs for each computational step a smart contract takes. Since this could become quite costly during development, test networks exist where the ether has no real-world value. In this way, development and testing can occur without risk of lost value. One such test network is called Ropsten MetaMask supports Ropsten natively with INFURA on the backend communicating with the Ropsten chain. For now, you can switch MetaMask to use the Ropsten network on the top navigation bar of the MetaMask interface.

In the next step, we will start to write our first smart contract. To deploy that to the Ropsten test network we will need some Ropsten test ether. You can click the Buy button in MetaMask to get a link to the Ropsten faucet. At the faucet, you can request 1 ether. As soon as that transaction is included on the Ropsten blockchain, your ether balance in MetaMask will be 1. We will come back to this later when we deploy a smart contract.

MetaMask is the gateway that allows your web-based decentralized application to interact with the blockchain. Deployed smart contracts on the blockchain are the backbone of the decentralized web. Now that we have a gateway to interact with these smart contracts, we can look more closely at how to write and deploy them.

Remix/Browser Solidity

Smart contracts for the Ethereum blockchain are written in high-level languages and compiled to bytecode interpreted by the Ethereum Virtual Machine (EVM). Compilers exist for the following languages, developed specifically for Ethereum: LLL, Serpent, and Solidity. There are active efforts to further the development of LLL and Serpent, but for now Solidity is the most popular language used by Ethereum developers. The easiest way to get your feet wet with Solidity is through the Remix Solidity IDE and compiler.

Remix is an online Solidity editor that enables compilation of Solidity code and even deployment to the blockchain using MetaMask. To access Remix, visit Remix When you first visit the Remix interface, you will see sample Solidity code in the editor window. For this exercise, we will be starting with a much more basic smart contract.

Develop a Simple Smart Contract

Let’s write our first smart contract! Open Remix in a browser and create an empty new file by clicking the + at the top left. Enter the following Solidity code into the editor:

contract HelloWorld {
  event log_string(bytes32 log);

  function () {
    log_string("Hello World!");

This is a very simple smart contract that when executed writes “Hello World!” to the transaction log for that contract address. By default, Remix is set to autocompile as you are typing. When you have completely entered the code with no syntax errors, the Contract tab on the right side of the Remix interface will show the compiled bytecode and the application binary interface (ABI) needed to interact with the contract. The ABI is a JSON-formatted text string you will use in your code that interacts with a smart contract.

Remix provides a whole set of other features, including a debugger, formal verification, and of course links to complete documentation of the Solidity language. Remix has integrated deployment capabilities, which coupled with MetaMask make deployment painless.

Deploy the Smart Contract

First, in Remix, select Injected Web3 in the option to select execution environment. This tells Remix that you want to rely on MetaMask in your browser to intercept and handle any interactions with the web3 APIs. Now you are ready to deploy Hello World to the Ropsten network. Assuming you have pointed MetaMask at Ropsten and your Hello World contract has compiled successfully, you can click the Create button.

When you click Create, Remix will create a transaction to send to the Ropsten test network. That transaction must first be signed, so a MetaMask window will pop up asking you to accept the transaction. By accepting, you are effectively signing the transaction with your private key in your MetaMask wallet and sending the signed transaction to the Ethereum blockchain.

After accepting, you will see Remix telling you that the transaction is waiting to be mined. As soon as this pending transaction is mined, or included in a block, you will see the contract address where this newly deployed smart contract can be found on the blockchain. In this case, the contract address is 0x2f8eb76Db701a36f8F44C1cEf0402bD329F6C03B. Once this contract has been deployed to the blockchain, it cannot be changed, deleted, or tampered with. It is now an immutable piece of software that when executed will do exactly what it should. Namely, log Hello World.

Validate the Smart Contract

To validate that our Hello World smart contract has been deployed, we can look it up in a block explorer. Recall that a property of most blockchains is complete transparency to the blocks and the data in each transaction. A block explorer is like a search engine that allows you to look into all of the data contained on the chain. The leading explorer in the Ethereum ecosystem is Etherscan.

Etherscan supports multiple test networks, in addition to the main Ethereum network. To search for your newly deployed contract, first select the Ropsten network in Etherscan. On the MISC menu, you will be able to choose Ropsten. Then you can search for the contract address you received from Remix when you deployed the contract. Etherscan should identify the address as a contract. as opposed to a user account. The contract is holding 0 ether and has had one transaction, which was the contract creation we just did. You’ll be able to see what block this contract was created on as well, which can be useful in proving a timeline of activity. Furthermore, you’ll see who created the contract-this is your MetaMask wallet address as MetaMask was the wallet that signed the transaction and sent it to the test network.

Now that we know the contract exists, let’s execute it so we can validate that it behaves as we expect. To execute the contract, we need to send a transaction to the contract itself There is no need to send any ether to the contract-in fact, if you do, that ether will be lost forever because the contract isn’t written to do anything with any ether sent to it. Therefore, we can send an empty transaction to the contract address to execute it. How will we send a transaction? The answer again is MetaMask.

Next Step: Try Truffle

If you’re interested in some interesting tutorials or you want to start building web-based applications with the Ethereum blockchain, you will find the Truffle web framework to be a nice fit for your needs. For many types of dapps, Truffle does everything you could want: it compiles your blockchain injects them into your web app, and can even run a test suit against them! See Truffle for documentation and tutorials.

In this post we gained knowledge about tools that make it simple and easy to fast-track deploy a smart contract to the Ethereum.

This post is licensed under CC BY 4.0 by the author.