Categories
Getting started javascript web3js

Setup web3js to use the Ethereum blockchain in Javascript

In this tutorial, we’ll see how to get started with Web3JS to interact with the Ethereum blockchain. Web3js can be used both in frontends and backends to read data from the blockchain or make transactions and even deploy smart contracts.

The first step is to include web3js in your project. To use it in a web page, you can import the library directly using a CDN like JSDeliver.

<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>

If you prefer installing the library to use in your backend or a frontend project that uses build you can install it using npm:

npm install web3 --save

Then to yo import Web3.js into a Node.js script or Browserify front-end project, you can use the following line of JavaScript:

const Web3 = require('web3');

Now that we included the library in the project we need to initialize it. If your project needs to be able to communicate with the blockchain. Most Ethereum librairies communicate with a node through RPC calls. To initiate our web3 provider, we’ll instantiate a Web3 instance passing as the constructor the URL of the provider. If you have a node or ganache instance running on your computer it will look like this:

Support EthereumDev.io

We hope you enjoy our free tutorials about ethereum programming and would love to get some help to keep new articles coming and cover server costs.

Support free content

const web3 = new Web3('http://localhost:8545');

If you’d like to directly access a hosted node you can use Infura or the free ones provided by Cloudfare:

const web3 = new Web3('https://cloudflare-eth.com');

To test that we correctly configured our web3 instance, we’ll try to retrieve the latest block number by using the getBlockNumber function. This function accepts a callback as parameter and return the block number as an integer.

var Web3 = require('web3');
const web3 = new Web3('https://cloudflare-eth.com');

web3.eth.getBlockNumber(function(error, result) {
    console.log(result);
})

If you execute this program, it will simply print the latest block number: the top of the blockchain. You can also use await/async function calls to avoid nesting callbacks in your code:

async function getBlockNumber() {
    const latestBlockNumber = await web3.eth.getBlockNumber();
    console.log(latestBlockNumber);
    return (latestBlockNumber);
}

getBlockNumber();

You can see all the functions that are available on the web3 instance in the official documentation.

Most of Web3 librairy are asynchronous because in the background the library makes JSON RPC calls to the node which send backs the result.


If you are working in the browser, some wallets directly inject a web3 instance and you should try to use it whenever possible especially if you plan to interact with the user’s ethereum address to make transactions.

Here is the snippet to detect if a Metamask wallet is available and try to unable it if it is. It will later allow you to read the user’s balance and enable him to validate transactions you’d like to make him do on the Ethereum blockchain:

       if (window.ethereum != null) {
          state.web3 = new Web3(window.ethereum);
          try {
            // Request account access if needed
            await window.ethereum.enable();
            // Acccounts now exposed
          } catch (error) {
            // User denied account access...
          }
        }

Alternatives to web3js like Ethers.js does exists but we’ll focus all our javascript tutorials on web3js as it is the official librairy to interact with Ethereum in the browser. In the next tutorial we’ll see how to easily listen to new incoming blocks on the blockchain and see what they contains.

Leave a Reply