Writing and Testing Your First dApp on Web3

In this chapter, we will cover the essential steps to set up your development environment and create your first decentralized application (dApp) using the Hardhat framework.

We will start by guiding you through the process of setting up your development environment, including installing the necessary tools and dependencies. With your environment ready, we’ll move on to creating a new Hardhat project, using a pre-built Hardhat template that provides a solid starting point for our dApp.

Once we have our smart contract setup, we’ll compile and migrate it to the Ethereum network, making it ready for interaction. Testing is crucial to ensure the integrity and correctness of our smart contract, so we’ll also guide you through writing test cases to verify its behavior.

However, a dApp wouldn’t be complete without a user interface, right? In the later part of this chapter, we’ll walk you through creating...

Technical requirements

Before you dive into creating your ERC20 token, you’ll need to ensure that you have the following technical requirements set up and ready:

• Operating system (OS): You can choose any OS that you are comfortable with. The examples in this guide use macOS, but it is flexible to your preference.
• GitHub CLI: Make sure you have the GitHub command-line interface (CLI) installed and access to GitHub. This is essential for version control and collaboration.
• Visual studio code (VS Code): Install VS Code, a popular code editor that makes smart contract development more convenient.
• Node.js: Ensure you have Node.js installed. This runtime environment is necessary to run JavaScript-based applications.
• Node package manager (npm): This comes bundled with Node.js. It is used to manage packages and dependencies in your projects.
• Hardhat: Install Hardhat, a development environment for Ethereum that simplifies smart contract development and testing...

Compiling, deploying, and testing the smart contracts

The Git project has already been unboxed for your convenience, and it is now prepared for you to the compilation and testing of smart contracts. Follow the steps outlined as follows to successfully compile and deploy a smart contract on the Hardhat blockchain:

1. Launch VS Code on your computer. Navigate to the project folder that contains the unboxed Hardhat project. The following figure provides an example of how the project folder should look.

Figure 8.3 – VS Code with the Sepolio Pet Store project

2. Now that you are in the project folder within VS Code, you can proceed to compile and deploy the smart contracts to the Hardhat local blockchain. This process will involve using the Hardhat commands and interacting with the blockchain to simulate the deployment.
3. The project folder in VS Code provides you with an environment to manage and interact with your smart contracts effectively...

Running the Web3 dApp

Now, we have come to the last step in the exercise of our goal to launch a dApp and create a Web3 application, end to end. Let us jump right into it:

1. Open your VS Code editor and locate the index.js file. Within this file, you’ll need to update the contractAddress variable to reflect the contract that we deployed in the previous section. Figure 8.12 provides an example.

Figure 8.12 – Changing the contract address in the dApp

This will ensure that the dApp will use the correct contract to call and return the expected values from the contract and complete our exercises.

2. Next, let us start our dApp from the command line:

   npm run dev

   This command will deploy and run a dApp (web app) and the URL will be published as shown in Figure 8.13:

Figure 8.13 – Starting the dApp from the command line

Note the published URL, which is http://localhost:3000. Open this URL in a...

Summary

In this chapter, we embarked on a journey to set up our development environment and create our very first dApp) using the Hardhat framework. We began by configuring our development environment, ensuring that we had all the necessary tools and dependencies installed.

Once our environment was primed, we ventured into creating a new Hardhat project. We kicked off the project with the help of a pre-built Hardhat template, offering a solid foundation for our dApp development endeavors. With our smart contract set up, we took the crucial steps of compiling and deploying it to the Ethereum network, thereby making it ready for interaction.

However, a dApp is not complete without a user interface. Hence, we dedicated the latter part of the chapter to crafting a simple web interface that would enable users to interact with our smart contract. We harnessed the power of JavaScript to communicate seamlessly with the Ethereum network straight from the browser.

Finally, we achieved...