How to Develop an Ethereum Dapp With Truffle and Metamask (Ethereum Dapp Tutorial)

develop ethereum dapp

This tutorial is for Ethereum Developers or Blockchain Consultants who are looking for guide about developing Ethereum Dapp using Metamask and Truffle 2.0 framework.

Overview of Ethereum Dapp

In simple words, Ethereum dapp is a decentralized web application which can tap into the Ethereum network. Ethereum dapps differ from normal web applications in following two significant ways:

  1. An Ethereum Dapp interacts with Ethereum Network rather than a server.
  2. Ethereum Dapps must be browsed through an enhanced web browser, because the standard browsers do not provide access to the Ethereum Network.

However, Ethereum provides a Javascript API called Web3 to access Ethereum network. Mist and Metmask are two compatible browsers of Web3. Though, Metamask is just a Google Chrome Extension.

Now, note that familiarity with Node.js and web development experience is assumed here. And for our Ethereum app development, we’re going to use following three tools:

  • Truffle
  • TestRPC
  • Metamask

How to Develop Ethereum Dapp

Before we get started, let’s first learn the basics about the tools which we’re going to be using for developing our first dapp.

Truffle: Truffle is a development environment, asset pipeline, and testing framework for Ethereum. It helps ethereum developers to deploy contracts on the blockchain, replace old contracts with new ones, and hooks front-end up to the deployed contracts.

In simple terms, it provides useful functionalities such as management of contract deployment, concept for interacting with contracts, and testing support for the contracts.

TestRPC: TestRPC is a Node.js based Ethereum client for development and testing. It runs 100% locally and provides a fake ethereum client (but much faster), making it ideal for development and testing.

While this is useless for production, but very useful for development. You can deploy your contracts to TestRPC and interact with them as if they were deployed on the Ethereum.

Metamask: As previously mentioned, Metamask is a Google Chrome Extension and Ethereum light client that allows users to interact with the blockchain without having to download the whole blockchain.

metamask

To put it simply, Metamask allows users to interact with Dapps in an Chrome browser. It works like a charm and we recommend using Metamask.

Let’s Get Started!

We need to install our tools. Assuming that you’re developing Ethereum dapp for the first time, first we need to install npm (Node Package Manager). Once npm is installed, we can install Truffle and TestRPC.

For installing npm, you can find instructions on how to install it from here.

Step: #1 – Install TestRPC

To develop Ethereum dapp, first thing we need to do is install TestRPC. The simplest way to get started is to install it globally. Use following command for installation:

npm install -g ethereumjs-testrpc

Now note that TestRPC requires node version 6.9.1 or higher. However, you can use nvm to switch between node versions easily.

Step: #2 – Install Truffle

Truffle is the most popular development framework for Ethereum. And, the simplest way to get Truffle is to install it as a global npm package. Use following command for installing Truffle:

npm install -g truffle

Step: #3 – Install Metamask

You can find Metamask Chrome Plugin from here. Make sure you have added it.

Now that we’ve installed our tools, we can get started on our dapp development. The first step for developing dapp will be to run TestRPC in the background.

Step: #4 – Run TestRPC

In order to run TestRPC, simply run the following command:

$ testrpc

This command will start up the client and will generate list of accounts that will be pre-funded with ether, along with private keys associated with each account.

Step: #5 – Setting Up Our First Truffle Dapp

Development environment is now set up and we’re ready to create and deploy our first ethereum dapp.

In this ethereum Dapp tutorial, we’ll start with the most basic and generate a basic truffle dapp. The default sample app in Truffle is a simple example currency.

To get started, run following commands.

mkdir MyEthereumDapp  \\Create a folder for your ethereum dapp

cd MyEthereumDapp  \\Move into that folder

truffle init  \\It will Initialize the default example currency project in that folder

truffle migrate  \\It helps to build, compile, & deploy the ethereum dapp

truffle serve  \\It will host your web interface on port 8080

It’s done!

You can check it in your browser on http://localhost:8080

Now it’s your turn.

Try implementing your ethereum dapp idea.

We are trying to make Metamask and Truffle tools to be used the most for Dapps on etheruem blockchain. we are also working on new version of Truffle and we will soon update this tutorial with Trffle 3.0.

Our senior etherium enginners are working on to create advanced smart contracts for Ethereum using the Solidity language, on client ideas. we will write more on the documentation to be full of contract specifics examples.

This page was last edited on November 12th, 2018, at 3:23.
 
 

Have an App Idea?

Get your free consultation now