Marketplace has launched, further enabling blockchain developers! Learn more

Introduction to Scaffold-ETH 🏗

September 09, 2022

Overview

Developing applications involves juggling several moving pieces like front-ends, back-ends, and databases. But developing a decentralized application on a blockchain adds a few more elements like smart contracts and nodes that allow you to connect to the blockchain. 

Managing these pieces can become arduous if you are just starting as a developer wanting to develop a decentralized blockchain application. Scaffold-ETH gives you a jump start with its application pack. In this guide, we will learn how to set up and use Scaffold-ETH. 

Prerequisites
  • Node.js.
  • Yarn.
  • Git.
  • An Ethereum node.
  • Terminal/cms (CLI).

What is Scaffold-ETH

Scaffold-ETH is a framework to understand the workings of dApps, and it comes with a set of tools to make the Ethereum dApp building process faster and easier. The combination of tools used in Scaffold-ETH allows you to have a frontend for your smart contracts. The stack of tools for development are as follows:
  • Solidity - The programming language to write smart contracts.
  • Hardhat - A smart contract local environment tool to deploy and test smart contracts.
  • React - JS framework to build the frontend.
  • Ethers.js - Awesome Web3 JS library to interface with the blockchain.
  • Ant - Which is used for UI but can be changed as per preference like Atomize, React bootstrap, etc.

Setting up Scaffold-ETH environment

First of all, before getting started with Scaffold-ETH, your machine needs to have Yarn, Node.js, and Git installed.

Now, go to a directory where you would like to clone the Scaffold-ETH repository and follow these instructions.

Step one here is to clone the repository and install all the necessary packages; type the following in your terminal/cmd:

setting up scaffold eth environment

Copy
git clone https://github.com/scaffold-eth/scaffold-eth.git
cd scaffold-eth
yarn install

This will clone the repo, make the `scaffold-eth` your working directory, and install yarn packages.

Working with Scaffold-eth

Scaffold-ETH comes with a demo contract and a front-end. Let us try to run that and understand what it does under the hood.

Type the following in your terminal/cmd window:

working with scaffold eth

Copy
yarn chain

What this will do is start the Hardhat network, which is a local Ethereum network for development. Once the process is completed, you will see a message similar to this.


Now, let us try to deploy the contract, you can find a demo available at /packages/hardhat/contracts/YourContract.sol. Open a new terminal/cmd window, go to the scaffold-eth directory and type the following:

working with scaffold eth

Copy
yarn deploy

Here, we are telling Hardhat to deploy the smart contract to the Hardhat local network, which we started in the last step. The deployment script can be found under /packages/hardhat/deploy/ 00_deploy_your_contract.js

You will see a message similar to this when the contract deploys.


Now that we have deployed the contract, it's time to fire up the application. To do so, open a third terminal window and type the following:

working with scaffold eth

Copy
yarn start

This will launch the React app, which uses the local network and deployed contract. Once the server starts, the app runs on https://localhost:3000.

And it should look something like this.


We can now walk through the demo contract YourContract.sol which is working behind this frontend app.

working with scaffold eth

Copy
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?
  }

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

Line 1: Declaring Solidity version.

Line 2: Specifying SPDX license type, which is an addition after Solidity ^0.6.8. 
Whenever the source code of a smart contract is made available to the public, these licenses can help resolve/avoid copyright issues. If you do not wish to specify any license type, you can use a special license UNLICENSED or simply skip the whole comment (it won’t result in an error, just a warning).

Line 4: Importing the Hardhat console contract (there is no contract; this is just to demo on how to import local contracts).

Line 7-11: Starting the contract YourContract and storing a string in the purpose variable.

Line 13-15: Example of contract constructor, which gets activated as soon as the contract is deployed.

Line 17-22: A function to take a new string as input and store it in newPurpose variable, then giving the value of newPurpose variable to the purpose variable, finally printing the string stored in the purpose variable.

Lets see this in action. On the homepage, you must see a message/string which we hard-coded in our contract.

We will change that by typing a new message in the setPurpose box and submit the transaction by clicking on send. This will store the new string in the newPurpose variable, which will be transferred to the purpose variable, ultimately displaying the new message on the page.

For example, here, we have set a new message as '>>>>>And keep building'


You can also connect this app with wallets like MetaMask by clicking the connect button on the top right. This shows an excellent example of connecting web apps with web3 wallets. Now, see how quickly we can set up QuickNode in the Scaffold-ETH setup.

Setting up QuickNode with Scaffold-eth

We will set up a QuickNode Rinkeby node; for that, first, get a free trial Rinkeby node from QuickNode. Head to the hardhat.config.js file, which you will find under the /packages/hardhat directory. Then find the Rinkeby network, add the QuickNode HTTP URL and a new variable 'url' and comment out the other 'url' variable. It will look similar to the image below.

  
You can also refer to this guide on How to create and deploy a smart contract with Hardhat, to learn more about Hardhat and how to set up QuickNode with Hardhat.

Conclusion

Congratulations, and thank you for making it here; I appreciate you! In this guide, you learned about Scaffold-ETH, how to install Scaffold-ETH and how to set it up. Special thanks to Austin Griffith for creating such a fantastic tool that enables us to kick start our dApp development journey. To find out about the ins and outs of Scaffold-ETH check out their official documentation.

Subscribe to our newsletter for more articles and guides on Ethereum. If you have any feedback, feel free to reach out to us via Twitter. You can always chat with us on our Discord community server, featuring some of the coolest developers you’ll ever meet :)

Related articles 35

How to do a non-custodial transaction with QuickNode
Originally Published On: Jun 19, 2021
Updated On: Sep 9, 2022

Private keys are one of the most... A non-custodial wallet is a... Custodian of Private... At We could use pretty much any... We could use any of the many... Let us create a token transfer... Congratulations on making a...

Continue reading
How to Set Up a Near Project from Scratch
Originally Published On: Jan 27, 2022
Updated On: Sep 9, 2022

In this tutorial we will look at... In this section, we will... In this section, we will look at... In this section, we will look at... When writing smart contracts on... In the last section, we looked... In the last section, we looked... In the last section, we looked... We have finally come to the end...

Continue reading
Estimating gas price using pending transactions in Python
Originally Published On: Feb 20, 2021
Updated On: Sep 9, 2022

To send a transaction on the... Gas is the unit to measure the... Why do we want to estimate gas?... Our first step here would be to... For our purposes today, we could... The first thing we’re going to... Now you know how to estimate gas...

Continue reading
Como crear y lanzar un ERC-721 (NFT)
Originally Published On: Dec 27, 2021
Updated On: Sep 9, 2022

Coleccionables digitales que son... Fungible significa que es lo... ERC es la abreviación para... Ahora que conocemos qué es y... Antes de escribir nuestro... Felicidades por crear tu propio...

Continue reading
How to Access Bitcoin Mempool
Originally Published On: Aug 16, 2021
Updated On: Sep 21, 2022

Bitcoin is the father of... The transactions which are sent... For our purpose today, we need a... We will use Bitcoin RPC methods... Congratulations on mastering the...

Continue reading
How to Mint an NFT on Polygon with Ethers.js
Originally Published On: Mar 28, 2022
Updated On: Sep 9, 2022

This guide demonstrates how to... Ethers.js is a complete Ethereum... As a reminder, the act of... We will deploy our contract on... Time to write the code! Start by... Note, you will need some... That’s it! You have minted an...

Continue reading
How to access Ethereum Mempool
Originally Published On: Oct 15, 2020
Updated On: Sep 15, 2022

On Ethereum, when a transaction... In blockchain terminology, a... For the purpose of this guide,... First, query the Let’s examine how to subscribe... This short guide showed you how...

Continue reading
The Web3 Developer Stack
Originally Published On: Jul 3, 2021
Updated On: Sep 15, 2022

A developer stack is a bag of... If we can imagine web3 as a car... The Chainlink price feed... Head over to the We’ll need a Kovan node to... We’ll now write a short... Congratulations :D You’ve taken...

Continue reading
How to Mint NFTs on the Stacks Blockchain
Originally Published On: Aug 19, 2022
Updated On: Sep 9, 2022

Stacks is an emerging blockchain... The Stacks ecosystem has adopted... Open up a terminal window and... Implementing the SIP-009... This section will demonstrate... The moment you've been waiting... Awesome Work! You’ve learned how...

Continue reading
How to connect to Ethereum using PHP
Originally Published On: Jun 11, 2021
Updated On: Sep 9, 2022

PHP is a very popular choice... Before installing the web3.php,... We could use pretty much any... Now, make a PHP script file... Congratulations on connecting to...

Continue reading
How to use Subspace with QuickNode
Originally Published On: Sep 8, 2020
Updated On: Sep 9, 2022

In this guide, we'll understand... To install Subspace, we'll need... For our purposes today, we could... Now let's create a short script,... Run the file using the node...

Continue reading
How to Connect Your Dapp With MetaMask Using Ethers.js
Originally Published On: Dec 13, 2021
Updated On: Sep 9, 2022

In our dApp, we will have a... A dApp is an application that... We will need to install the... Ethers.js is a lightweight... With this application, we will... Next, we will create a function... After connecting to MetaMask, we... To handle the wallet address of... This section will show us how to... In this tutorial, we...

Continue reading
How to Lazy Mint an NFT on Rarible with Rarepress
Originally Published On: Feb 23, 2022
Updated On: Sep 9, 2022

NFTs are great for creators to... To mint an NFT, you write data... Lazy Minting is a process in... We will write some JavaScript... Rarepress interacts with the... Now that we have everything in... Congratulations on listing your...

Continue reading
How to get the balance of an ERC-20 token
Originally Published On: Jun 14, 2021
Updated On: Sep 21, 2022

When a new token is made on the... You could use any Ethereum... Now that you've done the legwork... Getting the ERC20-Token Balance... In the top of your... ABI is short for You will most likely interact... You can use a similar process... We now have a connection to an... Having made it to the end, you...

Continue reading