Web3.js Complete Tutorial 2022 – Get Started with Web3.js

Web3.js is a Javascript library that allows developers to interact with the Ethereum and other Ethereum based blockchains. With Web3.js, developers can create decentralized applications (dApps) that can interact with smart contracts on the Ethereum or other related blockchains. By the end of this article, you will get to know everything required for you to get started with blockchain development using Web3.js.

Introduction to Web3

Web3 can be defined in simple words as a form of the internet, which is decentralized, allowing users to interact with applications and services in a secure and trustless manner. Using these decentralized apps (abbreviated as dApps), users can interact without any interference from any third-party intermediary. In addition, users can access the Ethereum or other related blockchains and interact with smart contracts using the Web3 technology.

There are various applications currently which are using Web3 technology, like Zillow which is decentralizing the process of buying and selling real estate properties, OpenSea which is decentralizing the process of trading digital assets like images, videos, etc on the blockchain and many more.

What is Web3.js

Web3.js is a JavaScript library that allows developers to interact with the Ethereum blockchain. It consists of various modules which allow us to use various functionalities of Ethereum ecosystem. For example, we can use web3.eth, one of the modules available in Web3.js, which provides us with core functionalities to interact with the Ethereum blockchain. Similarly, we can use web3.utils the module, which provides us with various utilities like converting to Eth amount in terms of Wei, checking if the value is a valid address or not, etc.

Hence, we can say that Web3.js provides us with everything we need which is required to create an Ethereum-based decentralized application. Let’s see how you can get started with using Web3.js

Getting Started with Web3.js

Starting with Web3.js is fairly easy. You can follow these steps in order to start using Web3.js.

As I already mentioned that Web3.js is a JavaScript library. Thus, you need to have Node.js installed so that you can use Web3.js. In order to install Node.js, you can go to the official download page of Node.js and download the required setup file based on your current operating system. After downloading the appropriate Node.js setup file, open it and follow the on-screen instructions. After the setup is done, open up the Terminal (or Windows Powershell if using Windows), and try executing these commands there to verify if you can use Node.js and npm (Node Package Manager):

node -v
npm -vCode language: Bash (bash)

If on running these commands in Terminal/Windows PowerShell you get the version of Node.js and npm respectively, it means you are good to go. If you get any error on running these commands in the Terminal/Windows Powershell, it means you may have made some mistakes while doing the Node.js setup. In such a case, you can try running the setup once again and again to check if the installation is done correctly.

It is recommended that you install the Metamask extension for Google Chrome, as it will provide you an Ethereum wallet. Or else, you can use an existing Ethereum wallet. This is recommended as we are going to use an Ethereum wallet's address further in the tutorial.

If you have Node.js installed, you can follow these steps to install Web3.js:

• Make sure that the npm command is running without any errors.
• Create a new directory/folder and initialize it as a Node project. For the tutorial, let’s create a directory named web3-codedamn and let’s initialize it as a Node project. You can do that through these commands.

mkdir web3-codedamn
cd web3-codedamn
npm init -yCode language: Bash (bash)

• After successfully initializing a Node project, you need to install web3.js so that you can use it in the initialized project. You can do that by running this command in the terminal opened in the project directory:

npm install web3 --saveCode language: Bash (bash)

• After the installation is complete, you can now create a new file in that directory, let’s call it index.js. Now, we can create a basic program that will help us to query information from the Ethereum blockchain. For the tutorial, we are going to get the Ether balance of some wallet address using Web3.js
• Write the following lines of code in index.js file:

// Importing web3.js library 
const Web3 = require("web3")

// Instantiating a Web3 instance and using Cloudflare's free Ethereum Node
const web3 = new Web3("https://cloudflare-eth.com")

// This is the wallet address whose balance we are going to check. 
// Make sure to change this with your Ethereum Wallet Address
const walletAddress = '<Your Wallet Address>'

// Calling getBalance function of web3.eth and logging the final balance of the wallet address
// We will get our value in terms of Wei (1 Ether = 10^18 Wei))  
web3.eth.getBalance(walletAddress).then(res => console.log(res));Code language: JavaScript (javascript)

• Once you have written this code in the index.js file, try to execute the file. The comments in the code tell what exactly each line is doing, which will help you understand the code better. You can execute this file by running this command in the Terminal/Windows PowerShell:

node index.jsCode language: PowerShell (powershell)

• As soon as you run the above command, you should see the balance of the entered wallet address in terms of Wei in the terminal.

Next Steps

After you have successfully executed the above code, you have successfully performed the operation of getting the wallet balance of the entered address using Web3.js. Now, you can install and use truffle framework in order to create a project that will help you use Web3.js with React, which is one of the most popular frameworks for building a front end. Also, you need to install ganache-cli, which will set up an Ethereum-like blockchain on your machine. This will also provide you with some wallet addresses with some fake testing Ethers, which you can use to perform some operations and pay the required gas fee (fee required to create the transaction block on the chain). You also need to learn a language Solidity, using which you will be able to create smart contracts, which will act as the backend for the app. Truffle provides you with many tools which will help you to compile and deploy the smart contract on Ethereum or other Ethereum based blockchains (testnet/mainnet) and many more. These will help you create a fully-fledged decentralized app like an NFT(Non-Fungible Token) Marketplace based on ERC721 Standards, a token-minting app based on ERC20 Tokens, and many more.