Hands-On Hardhat - Part-1 (Setting up Environment)
Tags: hardhat, solidity, smartcontract, web3
Published: 2022-06-24 21:36:00

Hi everyone I hope that you’re doing good. Today I’m gonna explain Hardhat in briefly. What is Hardhat and why we need it?

**So What is It?**

Firstly, according to their documentation; Hardhat is a development environment to compile, deploy, test, and debug your Ethereum software. It helps developers manage and automate the recurring tasks that are inherent to the process of building smart contracts and dApps, as well as easily introducing more functionality around this workflow. This means compiling, running and testing smart contracts at the very core. Hardhat comes built-in with Hardhat Network, a local Ethereum network designed for development. It’s functionality focuses around Solidity debugging, featuring stack traces, `console.log()`and explicit error messages when transactions fail. And Hardhat is written in JavaScript and `Node.js`.

**Why we need it?**
Before production we write our codes and we need to test them locally. Because we can make mistake in our own local environment and we don’t want users to see our mistakes and to prevent wrong operations, transactions or related stuffs in production. And especially if we work with Ethereum or other cryptos ecosystems we don’t wanna deploy our smart contracts straight to mainnet because these kinds of deployments are so much expensive we have to pay gas to run these transactions. So without further ado Hardhat helps us to set up a local ethereum development environment.

Okay, lads and gents let’s not beat around the bush and start to set up our environment.

Note: Before starting I assume that you’ve installed [node.js](https://nodejs.org/en/)

Open your terminal and create a project directory;

```solidity
mkdir hands-on-hardhat
```

 and go into it,

```solidity
cd hands-on-hardhat
```

and then writes these command lines to init and install hardhat;

```solidity
npm init --yes
npm install --save-dev hardhat
```

In the same directory where you installed **Hardhat** and run:

```solidity
npx hardhat
```

at there, the command line ask you to choice an option and I wanna point out a few things here;


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uyutootqkj0ca4iicw3r.png)

These options totally depend on your requirements.
For example **an empty hardhat**  option is a very basic project sample if you need more libraries, plugins or you use Typescript later, you have to add them manually. Like [@nomiclabs/hardhat-waffle](https://www.npmjs.com/package/@nomiclabs/hardhat-waffle) , `[ethereum-waffle](https://www.npmjs.com/package/ethereum-waffle)`, [chai](https://www.npmjs.com/package/chai) , [@nomiclabs/hardhat-ethers](https://www.npmjs.com/package/@nomiclabs/hardhat-ethers) ,  [ethers](https://www.npmjs.com/package/ethers) ,  `[@openzeppelin/contracts](https://www.npmjs.com/package/@openzeppelin/contracts)`
Because, they'll allow us to interact with Ethereum and to test our contracts.

So, let me show you when you choose one of these options what will your project structure look like? 

**Empty**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9xvucwl2trd5ag58lsy3.png)

**Basic**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fcm3hv41qicrqfebk76a.png)

**Advanced**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bk2w4rtk34vrklg4a3dl.png)

**Advanced-ts**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/coma7wpip644ge880zvp.png)

In this tutorial I’m gonna choose **an advanced sample** because this tutorial will be a series so later on, I will need some libraries and I don’t want to waste my time adding other libraries.

After choosing **an advanced sample** my terminal is asking to me “**Do you want to add a .gitignore?“**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jo9y4i9mlgizcnkga3ur.png)

I’m gonna press enter and it will add .**gitignore** automatically for me.

After pressing **enter** look carefully at the terminal the libraries that I mentioned before all starting to download.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iqgs5m24j37j9z5uje4e.png)

To make sure everything is working correctly run this command:

```solidity
npx hardhat test
```

If you get an error like this;


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6hukp7okfed0w51jrijc.png)

write this line to the command line;

```solidity
export NODE_OPTIONS=--openssl-legacy-provider
```

for furthermore details please check out [this](https://stackoverflow.com/questions/69692842/error-message-error0308010cdigital-envelope-routinesunsupported)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/88ry5iehdbofu6o5hngj.png)

well, seems everything is perfect!

The next thing that I wanted to show is the different **tasks** so now that we've let hardhat initialize our application and create that directory structure. If we run **npx hardhat**  we'll see a list of different tasks or commands that we can run.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i7lcmqm9hb2bunr45m34.png)

For example **accounts** task provides us a list of ethereum accounts that are available or **compile** task if we want to compile all the smart contracts in our project we use this task.
Maybe we need a local node for a local node we use **node** task.

To demonstrate I’m just running the **accounts** task for now;


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/41hw0xsase32d9tbsl3y.png)

So as you see It provided to us 20 ethereum test accounts.

after all installation is finished, just write this command line in the same directory;

```solidity
code .
```

This command line will open your project automatically in VSCode. 
If the command line doesn’t work like this;


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6gkxdt0fo3hkftmnofyz.png)

Please check out [this solution](https://stackoverflow.com/questions/29955500/code-is-not-working-in-on-the-command-line-for-visual-studio-code-on-os-x-ma).

Well, congratulations you've just finished the project setup, take a breathe and wait for **part 2**, please.

Connect with me on social media: [Twitter](https://twitter.com/0xazat)  && [LinkedIn](https://www.linkedin.com/in/azatsayan/) && [Github](https://github.com/0xazat)