React Project Setup Using Hardhat & Truffle — part 1
When developing smart contracts, it is important to use a development environment. This article will explore Truffle and Hardhat side by side to translate their commands and how to adapt from one to the other by creating a small project in React.
What is Truffle and Hardhat?
Truffle and Hardhat are both a development environment for writing smart contracts on the Ethereum blockchain. These tools allows developers to:
- Compile contracts
- Test contracts
- Deploy contracts
- Debug contracts
You can learn more about each here:
Project Setup
The first step is to set up a project with React before we start writing our smart contracts.
- Go to the folder where you want the project to live
Truffle Setup Method
npx create-react-app <project name>The output should look something like this:
npx create-react-app truffle-exampleCreating a new React app in /Examples/truffle-example.Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...Created git commit.Success! Created truffle-example at /Examples/truffle-example
Inside that directory, you can run several commands:yarn start
Starts the development server.yarn build
Bundles the app into static files for production.yarn test
Starts the test runner.yarn eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!We suggest that you begin by typing:cd truffle-example
yarn startHappy hacking!
Then move into that folder you just created
cd <project name>Another option is using Truffle boxes, there is one created with React that you can use. To learn more about Truffle boxes, go here Truffle Boxes
If you don’t have truffle installed globally
npx truffle unbox reactIf you have truffle installed globally
truffle unbox reactYou should get a similar output like below:
truffle unbox reactStarting unbox...
=================✔ Preparing to download box
✔ Downloading
✔ Cleaning up temporary files
✔ Setting up boxUnbox successful, sweet!Commands:Compile: truffle compile
Migrate: truffle migrate
Test contracts: truffle test
Test dapp: cd client && npm test
Run dev server: cd client && npm run start
Build for production: cd client && npm run build
Now let’s take a look from Hardhat’s side
Hardhat Setup Method
Since hardhat is a lighter tool that utilizes more on plugins, it can be installed as a dependency in your project.
npx create-react-app <project name>Now we should see something like this:
npx create-react-app hardhat-exampleCreating a new React app in /Examples/hardhat-example.Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...Created git commit.Success! Created hardhat-example at /Examples/hardhat-example
Inside that directory, you can run several commands:yarn start
Starts the development server.yarn build
Bundles the app into static files for production.yarn test
Starts the test runner.yarn eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!We suggest that you begin by typing:cd hardhat-example
yarn startHappy hacking!
Then move into that folder you just created
cd <project name>Alright! We just went through the process of adding Truffle/Hardhat into our React project, next we will initialize them.
Installation
Now that the folders are setup, let’s install the development tools
Truffle Installation Method
In the project folder you just created, install truffle.
This is only if you didn’t use truffle unbox! If you use truffle unbox you can skip this step since the unboxing executes this step.
truffle initand you should get a output similar to the following:
Starting init...================> Copying project files to /Examples/truffle-exampleInit successful, sweet!
Hardhat Installation Method
Go into the project folder and install hardhat as a dependency for the project
npm i hardhatNow install hardhat
npx hardhatYou should get this in the terminal:
888 888 888 888 888
888 888 888 888 888
888 888 888 888 888
8888888888 8888b. 888d888 .d88888 88888b. 8888b. 888888
888 888 "88b 888P" d88" 888 888 "88b "88b 888
888 888 .d888888 888 888 888 888 888 .d888888 888
888 888 888 888 888 Y88b 888 888 888 888 888 Y88b.
888 888 "Y888888 888 "Y88888 888 888 "Y888888 "Y888👷 Welcome to Hardhat v2.6.1 👷? What do you want to do? …
❯ Create a basic sample project
Create an advanced sample project
Create an empty hardhat.config.js
Quit
Let’s select:
Create a basic sample projectThen set your project root directory:
✔ What do you want to do? · Create a basic sample project? Hardhat project root: › /Examples/hardhat-example
Since React already has a .gitingnore file, select no
? Do you want to add a .gitignore? (Y/n) › nSince hardhat relies on other dependencies, we will need to install them, however for the purpose of keeping the comparison as close as possible, we will install them ourselves
Hardhat usually use ethers.js but since truffle uses web3.js, we will use web3.js with hardhat as well
? Do you want to install this sample project dependencies with yarn (@nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers ethers)? (Y/n) › nYou might see some warnings during this installation but it should be fine for now just as long as you get a project created confirmation
✨ Done in 47.89s.✨ Project created ✨See the README.txt file for some example tasks you can run.
Hardhat Installing Dependencies
We will need web3.js to interact with the blockchain in our project later on
This lets hardhat interact with web3.js library
npm i @nomiclabs/hardhat-web3This lets hardhat interact with web3.js library
npm i web3We have now know how to completely set up and install a React project with both Truffle and Hardhat
In part 2 we will configure both the development environment and start writing a contract! Click here for part 2.
Join Coinmonks Telegram Channel and Youtube Channel learn about crypto trading and investing
