Introduction

Scaffold-eth is a template for Ethereum dApp, and a combination of the best dApps. Scaffold-eth can help developers build app with efficiency and less bugs. It is a great resource for beginner developers of web3.0 dApp.

Scaffold-eth has the following components:

  • hardhat: run local Ethereum network to deploy and test smart contract
  • React: build front end with preset UI components and functional hooks
  • Ant: build customized UI and use Bootstrap or other libraries for front end
  • Surge: deploy and publish projects
  • Tenderly / The Graph / Etherscan / Infura / Blocknative...
  • Supports for L2 / Sidechains

Swift deployment

Environment

Scafford Eth is based on Node.js, so you need to install node.js and yarn.

Deploy Scaffold-eth scaffold

  1. Fetch scaffold source code
git clone https://github.com/austintgriffith/scaffold-eth.git
  1. Open up 3 terminals
TIPS: Many Terminal app supports split screen feature.
image-20210924203810255
  1. run 👷‍ Hardhat chain in the first terminal:
cd scaffold-eth
yarn install
yarn chain
  1. deploy the smart contract at /scaffold-eth/packages/hardhat/contracts/ in the second terminal:
cd scaffold-eth
yarn deploy
  1. run front end app in the third terminal:
cd scaffold-eth
yarn start

The sample contract under main branch stores and read the values. You can find the contract at /scaffold-eth/packages/hardhat/contracts/ and modify it then redeploy.

TIPS：
If you are interested in other contracts, you can checkout other branch to deploy different Dapp services.
switchable branches with different contracts
for example nft contract branch https://github.com/scaffold-eth/scaffold-eth/tree/simple-nft-example

play with the application

Back to the previous process. Now we have our contract deployed and front end and local chain network running.

Below is the code of the deployed contract.

pragma solidity >=0.8.0 <0.9.0;
//SPDX-License-Identifier: MIT

import "hardhat/console.sol";
//import "@openzeppelin/contracts/access/Ownable.sol"; //https://github.com/OpenZeppelin/openzeppelin-contracts/blob/master/contracts/access/Ownable.sol

contract YourContract {

  //event SetPurpose(address sender, string purpose);

  string public purpose = "Building Unstoppable Apps!!!";

  constructor() {
    // what should we do on deploy?
  }

  // Storing purpose varible
  function setPurpose(string memory newPurpose) public {
      purpose = newPurpose;
      console.log(msg.sender,"set purpose to",purpose);
      //emit SetPurpose(msg.sender, purpose);
  }
}

The contract sets a public string variable purpose. The default value for purpose is "Building..." It also provides a setPurpose method to modify the purpose variable.

Now we open up our front end page in the browser http://localhost:3000.

  1. Send test tokens for accounts
  1. Call contract method
    As calling the method requires gas fee, we have to first send tokens to accounts.


Now the value of purpose is successfully changed, the balance in our account is not the integer 1 since we spent gas fee when calling the function.

Conclusion

We built our Dapp with the scaffold scaffold-eth. Using hardhat, we can deploy local test network, switch networks and deploy your contracts in any networks.
Here is the Quickstart for scaffold-eth.

About authors

Author: Core member of Nonce Geek Studio

Contact the author:

WeChat: thf056
QQ: 1290017556
Email: [email protected]

You can follow me at github.

Github: https://github.com/99kies

Translator：