This is part 2 of our four-tutorial series on creating a decentralized web app to sell ebooks. In the previous part, we built the smart contract and deployed it on the hardhat node for testing.
Now it’s time to deploy the contract on the testnet.
But before that, let’s install the react app first. Open the command prompt from your directory. Then type
npx create-react-app frontend
Now, the React framework is installed. But before initializing react, move to the installed directory and install the tailwind CSS for react.
cd frontend npm install -D tailwindcss npx tailwindcss init
Inside the tailwind.config.js file, configure the template paths
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
And inside the index.css file add the tailwind directives.
@tailwind base; @tailwind components; @tailwind utilities;
💡 Info: Tailwind directives are CSS classes generated by Tailwind CSS that add custom styles to your web projects quickly and easily. With their help, you can create custom design systems with minimal effort while still being able to customize the look and feel of your website. Tailwind directives are incredibly flexible and customizable, so you can use them to create complex and unique designs.
Now initiate the React.
npm start
The react app should be running on the browser in the port:3000.
Now it’s time to deploy the contract. Earlier, we deployed the contract on the hardhat blockchain node, but this time we will deploy it to the testnet.
💡 Info: We will use the famous Goerli testnet for the deployment. Goerli is a cross-client Ethereum testnet designed for developers, service providers, and users. It is an alternative to Ropsten, featuring Clique Proof of Authority as its consensus mechanism for faster block times and greater reliability. Goerli is composed of nodes from Geth, Parity, Nethermind, and Besu, offering greater security and more options for developers.
Create a new javascript file, “goerliDeploy“, inside the script folder to deploy the contract on the test net.
Connect Hardhat with Goerli Testnet
We did not install our dotenv file yet. So, let’s install it first.
npm install dotenv
Now create a .env file in the bookSell folder. Inside the dotenv file, we will secure the Goerli URL, Goerli API key, and the private key that will be acquired from the Metamask wallet. You must have known the importance of the dotenv file.
When we deploy the code on GitHub, this dotenv file will remain in the local directory, thus making it difficult for hackers to infiltrate the private keys.
To connect the hardhat with the goerli test net, we need to bring some changes on the hardhat.config.js file.
require("@nomicfoundation/hardhat-toolbox");
require("dotenv").config();
const GOERLI_URL = process.env.GOERLI_URL;
const PRIVATE_KEY = process.env.PRIVATE_KEY;
/** @type import('hardhat/config').HardhatUserConfig */
module.exports = {
solidity: "0.8.17",
networks: {
goerli: {
URL: GOERLI_URL,
accounts: [PRIVATE_KEY],
},
},
};
We imported a dotenv file to keep the private key and the Goerli testnet URL safe.
This private key is the account’s private key that will bear the transaction cost for deploying the smart contract on the blockchain.
Inside the “module.exports” you need to mention the network you are using. Since we are using the Goerli testnet, we mentioned the Goerli URL and the account we are using. You need to input the private key of your account; the system will fetch the account you belong to on the Goerli test net.
Now, where will you get this info? You will get those from the test net. You can connect to a Goerli test net via an Infura node or alchemy.
In my other videos in this series, I have shown how you can connect with the Goerli blockchain. Today we will try to connect to goerli test net via alchemy.
After signing in to alchemy, you will reach a dashboard. Click on the “Create app” option on the dashboard. A form will appear.
You need to feel it up with Ethereum as a chain and Goerli as the network. You can give it any name you want. Click on the create app button. Your app will be created.
Now the app is created, and you click on the view key option. You will get the API key and the URL of the goerli testnet. Just copy and paste this on the dotenv file. As we all know, the keys will be secured inside the dotenv file because this file won’t be sent to GitHub with the other codes.
To collect the private key, we need to go to the Metamask extension. You must be connected to the Goerli testnet.
If you are not, move to the add network option and add Goerli as a test network. In the Metamask, click on the add network option and move to the networks option. From the networks, select the Goerli testnet to add to your network.
If you want to recharge your Goerli account with some free test ETH, move to the Goerli faucet website and insert your Metamask wallet address. You can collect 0.2 fake ETH per day from the Goerli wallet for testing purposes.
In the Metamask wallet, just beside the account name, click on the three vertical dots and go for the account details. You will get the option to export the private key. Copy the key and paste it to the dotenv file.
All the requirements are fulfilled. Move to the goerliDeploy.js file.
Create an instance of the contract as we did earlier on the deploy.js file. Write the code to deploy the contract. To make sure the contract is deployed, ask for the contract address. Just “console.log” the contract address after the deployment.
const hre = require("hardhat");
async function main() {
const bookSell = await hre.ethers.getContractFactory("BookSell");
const contract = await bookSell.deploy();
await contract.deployed();
console.log("Contract Address:", contract.address);
}
// We recommend this pattern to be able to use async/await everywhere
// and properly handle errors.
main().catch((error) => {
console.error(error);
process.exitCode = 1;
});
Finally, it’s time to deploy the contract on the goerli test net. In the terminal type:
npx hardhat run -–network goerli scripts/goerliDeploy.js
Remember to mention the directory of the file you want to deploy. You would get the contract address as a return if the smart contract was deployed.
In my terminal, I got this contract address. Copy the address and move to the Etherscan website to check if the contract is really deployed. You will get the details of the transaction hash and the deployment time on the website.
We need to copy the contract address and save it somewhere. We will require this address after some time when we call the smart contract from the front end.
Create Functional Components in React
We have initialized react but have not done anything yet. Let’s create a components folder inside the source folder.
Create a heading.js file for making a simple heading component. Get inside the folder and press “RSC” on the keyboard. A functional component structure will be ready. If you don’t have the required plug-in installed, then there is no need to worry. You can make it manually.
I will not waste much time on the front end as this is not our main focus.
Instead, we will import some ready-to-use templates from the flowbite website. Move to the flowbite and collect a colorful heading that you love. Then customize the code in your own way. If you like, you can build on my own code.
const Heading = () => {
return (
<div className="text-center pt-5">
<h1 className="mb-4 mt-4 text-3xl font-extrabold text-gray-900 dark:text-white md:text-5xl lg:text-6xl">
<span className="text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400 font-serif">
BOOK STALL
</span>
</h1>
<p className="font-serif font-bold text-gray-500 lg:text-3xl dark:text-cyan-600">
FOR THE BOOK LOVERS TO READ YOUR FAVORITE BOOKS.
</p>
<p className="font-serif font-bold text-gray-500 lg:text-3xl dark:text-cyan-600">
THE BEST BOOK SUBSCRIPTION SERVICE IS HERE.
</p>
</div>
);
};
Here I have introduced a heading and then written a couple of lines. Then just did a little edit. You are always welcome to make your custom code.
That’s all for today. In the next part, we will start interacting with the smart contract with the help of ether.js. Hope that will be an interesting one.