How to make Dapp using solidity and web3js
Tags: web3j, smartcontracts, solidity, blockchaindevelopmen
Published: 2021-04-12 21:39:53

---
title: How to make Dapp using solidity and web3js
published: true
date: 2021-04-11 10:34:18 UTC
tags: web3j,smartcontracts,solidity,blockchaindevelopmen
canonical_url: https://medium.com/coinmonks/how-to-make-dapp-using-solidity-and-web3js-1c758628033
---

![](https://cdn-images-1.medium.com/max/1024/0*M-p2nZwJZYzwnDBc.png)

### What are we making?

A basic counter app which will have increment and decrement function in solidity and we will be able to interact with these functions using web3.js in our browser

### **What is Dapp?**

A **Dapp** , or decentralized application, is a software application that runs on a distributed network. It’s not hosted on a centralized server, but instead on a peer-to-peer decentralized network.

### **What is Solidity Language?**

**Solidity** is a high-level and contract-oriented language **used for** writing smart contracts. Developed by the core contributors of the Ethereum Blockchain Platform, it is **used for** designing and implementing smart contracts within the Ethereum Virtual Machine and other blockchain development platforms.

### What is Web3.js and why are we using Web3.js?

**Web3.js** is a collection of libraries that allow you to interact with a local or remote ethereum node using HTTP, IPC, or WebSocket. The **web3** JavaScript library interacts with the Ethereum blockchain. It can retrieve user accounts, send transactions, interact with smart contracts, and more.

### Prerequisites **:**

**Npm:** npm is a package manager for the JavaScript programming language. Link: [**https://nodejs.org/en/**](https://nodejs.org/en/)

**Ganache:** [Ganache](https://www.trufflesuite.com/ganache) is a personal blockchain for rapid Ethereum and Corda distributed application development. You can use Ganache across the entire development cycle; enabling you to develop, deploy, and test your [Dapps](https://blog.coincodecap.com/what-are-dapps-an-ultimate-guide) in a safe and deterministic environment. After successfully installing npm install ganache-cli. Command :

```
npm install ganache-cli
```

**Web3.js Command:**

```
npm install web3
```

**Solcjs:** is a Node. js library and command-line tool that is used to compile solidity files. Command:

```
npm install solc
```

### Getting Started:

The project will be broken down into 3 main files, counter.sol which will be our solidity contract, counter.js which will consist of our deployment code, and counter.html which will connect to the contract using web3js, and have frontend of our app.

Project Structure will be achieved after completing all the steps:

![](https://cdn-images-1.medium.com/max/407/1*-jmQ4qHLEi41TW_IVk_psQ.jpeg)<figcaption>File system structure</figcaption>

### Writing our first contract

**Counter.sol**

```
// SPDX-License-Identifier: MIT
pragma solidity >=0.7.4;
contract FirstContract {
int public count = 0;
  function incr() public{
    count++;
  }
  function decr() public{
    count--;
  }
  function display() public view returns (int){
    return count;
  }
}
```

You can relate solidity with java as it has a similar structure as that of java. As in java we have classes, we have contracts in solidity. A contract is a collection of functions and data that resides at a specific address on the Ethereum blockchain.

So in the above code, we have 3 functions and one public variable which maintains the counter.

By Default, a contract state is **read-only** unless it is specified as **public** , so we have made all the functions public.

The **view functions** are read-only functions, which ensures that state variables cannot be modified after calling them. As the **display()** function won’t be modifying the variable, it is kept to **view** function.

Compile code using solc:

```
solcjs --bin --abi -o ./build counter.sol
```

![created binary and abi files for our first contract](https://cdn-images-1.medium.com/max/422/1*hcIzy459GmXoVBySEjTTsg.jpeg)

As we installed **ganache** before we need to start ganache. Command:

```
ganache-cli
```

### Deployment on our local server

**Deploy.js**

```
const fs = require('fs');
const Web3 = require('web3');
const web3 = new Web3('http://localhost:8545');
const bytecode = fs.readFileSync('build/counter_sol_FirstContract.bin');
const abi = JSON.parse(fs.readFileSync('build/counter_sol_FirstContract.abi'));(async function () {
  const ganacheAccounts = await web3.eth.getAccounts();
  const myWalletAddress = ganacheAccounts[0];
  const myContract = new web3.eth.Contract(abi);
  myContract.deploy({
    data: bytecode.toString()
  }).send({
    from: myWalletAddress,
    gas: 5000000
  }).then((deployment) => {
    console.log('voting was successfully deployed!');
    console.log('voting can be interfaced with at this address:');
    console.log(deployment.options.address);
  }).catch((err) => {
    console.error(err);
  });
})();
```

Once done with compiling of solidity code and starting ganache, we need to deploy the above script. The above script is not too complex to understand so calm down.

First 3 lines are basic include statements which will we needed to deploy the script.

The next 2 variables i.e **bytecode** and **abi** are the files that were built during the compilation of  **.sol** script. The **ABI** is a .json file that describes the deployed contract and its functions. It allows us to contextualize the contract and call its functions.bin is simply a compact binary representation of the compiled bytecode. The opcodes aren’t referenced by PUSH, PULL or DELEGATECALL, but their binary representations, which look like random numbers when read by a text editor.

Next few lines takes in different parameters like ganache accounts, wallet address and abi of contract, once deployed we will get contract address which will be used to intract from web3.js

Command to deploy:

```
node counter.js
```

![Generated Contract address](https://cdn-images-1.medium.com/max/467/1*oX2YRf9QoiFwrxNH7rf0SA.jpeg)<figcaption>Contract address</figcaption>

### The frontend of our Dapp

Counter.html

```

<!DOCTYPE html>
<html>
<head>
  <title>First DApp</title>
</head>
<body>
  Increment
  <button id="incr">+</button>
  <br>
  Decrement
  <button id="decr">-</button>
  <br />
  <label id="myLabel"></label>
</body>
<script src="[https://code.jquery.com/jquery-3.6.0.min.js](https://code.jquery.com/jquery-3.6.0.min.js)"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="[https://cdn.jsdelivr.net/npm/web3@1.2.6/dist/web3.min.js](https://cdn.jsdelivr.net/npm/web3@1.2.6/dist/web3.min.js)"></script>
```

The first half of the **Html** code is just 2 buttons which are assigned 2 id’s to increment and decrement value. My label will show to display the counter. After that it contains 2 CDN scripts, the first one is **JQuery** which is used to handle click events and the second is **web3js** to interact with the contract

```
<script>
  const **web3** = new Web3('[http://localhost:8545'](http://localhost:8545'));
  const **myContractAddress** = //paste the address generated during deployment with single quotes;
  const **myAbi** = // paste your abi code as it is.
  const myContract = new web3.eth.Contract(myAbi, myContractAddress);
  const **htmlLabel** = document.getElementById('myLabel');
  myContract.methods.display().call().then((jsonRpcResult) => {
    htmlLabel.innerHTML = jsonRpcResult;
    console.log(jsonRpcResult);
  });
  $('#incr').click(function () {
myContract.methods **.incr** ().send({from:' **//paste avaiable accounts from ganache**'},function () {
      myContract.methods. **display** ().call((error, result) => { htmlLabel.innerHTML = result; console.log(result) })
    })
  });
  $('#decr').click(function () {
    myContract.methods. **decr** ().send({from:' **//paste avaiable accounts from ganache**'}, function () {
      myContract.methods. **display** ().call((error, result) => { htmlLabel.innerHTML = result; console.log(result) })
    })
  });
</script>
</html>
```

Paste the generated contract address during the deployment in **myContractAddress** variable.

Paste the **abi** code from abi file which was generated during the compilation of the .sol file.

Htmllabel is just getting the reference of **myLabel** to update whenever a button is clicked.

Whenever we try to access the functions we need to pass a from variable i.e from which account we are accessing the contract, this can be fetched from ganache cli, paste in any one of the addresses.

![](https://cdn-images-1.medium.com/max/542/1*zJ1_-lV8nn7YUMB-LssuvQ.jpeg)

### Output:

Once done with all the steps open your HTML file in chrome or any other web browser to see your first Dapp Working! Woho!

![](https://cdn-images-1.medium.com/max/162/1*u1ICVQ3Aumk795kuxHTyPg.png)

Congratulations! You on writing your first Dapp, hope you like it. If you need more interesting articles on decentralized web apps do drop your suggestions!

Thanks for reading! 👋👋

**Do check my website** [**sagar-gada.tech**](https://sagar-gada.tech/) **and GitHub** [**here**](http://github.com/sagargada73/)  
**Follow me on ** [**LinkedIn**](https://www.linkedin.com/in/sagar-gada-7631b6108/)

* * *