Creating a dApp using Ethereum and Meteor (Setting up)

This blog posts contains the step to be followed when creating a simple dApp (Decentralized Application) using Ethereum and Meteor. 

This application will not use the actual ethereum blockchain. Instead it will connect to the Testnet. This application is developed for Demo purposes. Hence, Meta mask extention will be used. If you need to connect to the main network, geth client or any other client for Ethereum should be used.

Step 1: Create a meteor project

In order to create a new meteor application, run the following command inside the directory you want the app to be created in.

meteor create <app_name>

The application will be created as follows.

Step 2: Add Web3 to the project

Web3 library is what allows you to interact with the ethereum blockchain. Web3 library can be found at [1]. Inside the meteor application just created run the following command to add Web3.

meteor add ethereum:web3

Step 3: Download and install Metamask extension for Chrome

This will allow you to interact with the Ethereum blockchain without having to download the entire blockchain into your local machine like geth client does.

Make sure you are connected to the Test Network as shown below.

Step 4: Launch the Meteor Application

To run the meteor application give the following commands.

meteor npm install

 meteor 

Now if you browse localhost:3000 via the browser, your application will be available.

Step 5: Open the application in an IDE / Text Editor

Create a folder (lib) and a JS (lib.js) file inside that folder as below.

Step 6: Developing a sample dApp

1) Initialize web3 object

Now your application is connected to the Ethereum blockchain.

2) Checking the balance

Inside the main.js insert the following code inside the button click function.

web3.eth.getBalance("0x6DcFA49E1c61758AFd02789c6d2bacdfC4c9cEd9", function (error,result) {
  instance.counter.set(result);});

This address should be replaced with yours.

Your address can be found through the meta mask extention as below.

Your final main.js will look like below.

You can also change your HTML as below.

When you reload the application and click on the button, the balance will be shown.

[1] https://github.com/ethereum/wiki/wiki/JavaScript-API