DEV Community

Cover image for Tutorial: Ethereum BlockChain Development (1)
Yongchang He
Yongchang He

Posted on • Updated on

Tutorial: Ethereum BlockChain Development (1)

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?
What is BlockChain?
How does Node.js work?

Prerequisites

  • Node.js installed on your local machine
  • MetaMask Chrome extension installed in your browser

Getting started

First, let's create a new React application:

npx create-react-app react-dapp
Enter fullscreen mode Exit fullscreen mode

Unfortunately, my installation for the react app is not successful, and I got error like in below:

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
Enter fullscreen mode Exit fullscreen mode

Then I solve such problem by running the follow commands:

npm config set prefix /usr/local
sudo npm install -g create-react-app
create-react-app react-dapp
Enter fullscreen mode Exit fullscreen mode

Then, I got a message notifying me that my installation is successful:

Image description

Next, we are going to change the directory:

cd react-dapp/
Enter fullscreen mode Exit fullscreen mode

And ls to see what files are in this directory:

Image description

Next step run the follow command to install ethers.js and hardhat using npm:

npm install ethers hardhat @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers
Enter fullscreen mode Exit fullscreen mode

Then we got this message in the Terminal:

Image description

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
we can now find artifacts contracts , hardhat.config.js, scripts and test in the current directory if previous steps are successful.

Image description

contracts - A folder holding an example Solidity smart contract
hardhat.config.js - 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

open hardhat.config.js and update the module.exports to look like this:

module.exports = {
  solidity: "0.8.4",
  paths: {
    artifacts: './src/artifacts',
  },
  networks: {
    hardhat: {
      chainId: 1337
    }
  }
};
Enter fullscreen mode Exit fullscreen mode

Next let us take a look at our smart contract at directory: contracts/Greeter.sol

//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;
    }
}
Enter fullscreen mode Exit fullscreen mode

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

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

Image description

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

Image description

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:

npx hardhat node
Enter fullscreen mode Exit fullscreen mode

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

Deploy Smart Contract

Next let's start another terminal window, and deploy our contract to the running test network by running the following command:

npx hardhat run scripts/deploy.js --network localhost
Enter fullscreen mode Exit fullscreen mode

If deploy successfully, we should get message like this:

Image description
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

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/

Top comments (0)