Tutorial: Ethereum BlockChain Development (1)
Tags: ethereum, blockchain, hardhat, tutorial
Published: 2022-02-16 20:42:00

## Part 1: Deploy BlockChain and Smart Contract from scratch

> The purpose of building this blog is to write down the detailed operation history and my memo for learning dApps.

> If you are also interested and want to get hands dirty, just follow the steps below and have fun!~

### warm up

[What is Ethereum?](https://ethereum.org/en/)
[What is BlockChain?](https://www.blockchain.com/)
[How does Node.js work?](https://nodejs.org/en/about/)

### Prerequisites

- [Node.js](https://nodejs.org/en/download/) installed on your local machine
- [MetaMask](https://metamask.io/download/) Chrome extension installed in your browser

### Getting started
First, let's create a new React application:
```linux
npx create-react-app react-dapp
```
Unfortunately, my installation for the react app is not successful, and I got error like in below:
```linux
Need to install the following packages:
  create-react-app
Ok to proceed? (y) y
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
sh: create-react-app: command not found
```

Then I solve such problem by running the follow commands:
```linux
npm config set prefix /usr/local
sudo npm install -g create-react-app
create-react-app react-dapp
```
Then, I got a message notifying me that my installation is successful:

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

Next, we are going to change the directory:
```linux
cd react-dapp/
```
And `ls` to see what files are in this directory:

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

Next step run the follow command to install ethers.js and hardhat using npm:
```linux
npm install ethers hardhat @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers
```
Then we got this message in the Terminal:

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

we can view react-dapp in the browser using the URL it inferred.

Open a new terminal and change directory to `react-dapp` again, and run `npx hardhat` to install hardhat:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8m9x21o2ui3eph9yl6my.png)
we can now find artifacts **contracts** , **hardhat.config.js**, **scripts** and **test** in the current directory if previous steps are successful.

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

**contracts** - A folder holding an example Solidity smart contract
**hardhat.config.j**s - The entirety of your Hardhat setup (i.e. your config, plugins, and custom tasks) is contained in this file.
**scripts** - A folder containing a script named sample-script.js that will deploy your smart contract when executed
**test** - A folder containing an example testing script


The next step is to launch VS Code and direct to the current work folder: **react-dapp**


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

open **hardhat.config.js** and update the `module.exports` to look like this:
```js
module.exports = {
  solidity: "0.8.4",
  paths: {
    artifacts: './src/artifacts',
  },
  networks: {
    hardhat: {
      chainId: 1337
    }
  }
};
```
Next let us take a look at our smart contract at directory: **contracts/Greeter.sol**

```solidity
//SPDX-License-Identifier: Unlicense
pragma solidity ^0.8.4;

import "hardhat/console.sol";

contract Greeter {
    string private greeting;

    constructor(string memory _greeting) {
        console.log("Deploying a Greeter with greeting:", _greeting);
        greeting = _greeting;
    }

    function greet() public view returns (string memory) {
        return greeting;
    }

    function setGreeting(string memory _greeting) public {
        console.log("Changing greeting from '%s' to '%s'", greeting, _greeting);
        greeting = _greeting;
    }
}
```

This is a basic smart contract. When deployed, this contract sets a Greeting variable and exposes a function called **greet()** to return the greeting.

This contract also exposes another function **setGreeting** that allows a user to update the greeting. When deployed to the Ethereum BlockChain, these methods will be available for a user to interact with.

Next let us go back to Terminal and run: `npx hardhat compile`

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

This should compile smart contract into an artifacts directory, and now we should see our **artifacts** directory under **src**:

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

Click the folder **contracts/Greeter.sol** and open the file **Greeter.json**, we will find"**abi**" inside:

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

**abi** stands for: application binary interface. This is the thing we are going to import into our front end application to interact with it.

### Deploy BlockChain
Next step is to deploy our smart contract to the local blockchain.
First we need to start the local test node. run the following command in Terminal:
```linux
npx hardhat node
```
This should launch a local test network, which is going ahead and provides us with 20 accounts to test with. Every account has their own account id as well as a private key, and we will use both of them when we start interacting with front end application.

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

### Deploy Smart Contract
Next let's start another terminal window, and deploy our contract to the running test network by running the following command:
```linux
npx hardhat run scripts/deploy.js --network localhost
```
If deploy successfully, we should get message like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t8feabvl62lnw1br31wu.png)
It responses to you the address of smart contract. getting permission issues? Just run command `sudo su` to become root user first.

Now things should have got updated in the previous terminal window like this:

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

It gives us message that the smart contract has been deployed to the running test network. We can see the Gas used, the Contract address, the Transaction and so on. We can also see the console.log message that we wrote in our smart contract. 

Cool?


### reference:
https://dribbble.com/shots/14225432-Coder
https://stackoverflow.com/questions/38751830/create-react-app-installation-error-command-not-found
https://dev.to/dabit3/the-complete-guide-to-full-stack-ethereum-development-3j13
https://richpicksdaily.com/ethereum-l2-scene-heats-up-with-boba-network-taking-second-spot-in-tvl/