October 10, 2021

Introduction to Scaffold-ETH 🏗

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:

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:

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:

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:

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.

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 :)
Ready to try QuickNode? Start your 7-day free trial

Related articles 35

Jul 3, 2021 The Web3 Developer Stack

A developer stack is a bag of technologies a developer possesses. For example, MEAN (MongoDB, Express.js, AngularJS/Angular, and Node.js) and MERN (MongoDB, Express.js, React, and Node.js) are common web developer stacks. Similarly, today we will learn more about the web3...

Continue reading
Sep 22, 2021 How to do a non-custodial transaction with QuickNode

Private keys are one of the most sensitive pieces of data when it comes to cryptography and the blockchain. However, there has always been debate/confusion about choosing between custodial wallets (where the wallet provider has custody of the user’s private key) and...

Continue reading
Jun 7, 2021 How to integrate IPFS with Ethereum

It can be costly to store massive files on a blockchain mainnet, and this is where decentralized file storing systems like IPFS can come in handy. Sometimes, NFTs use IPFS as well. In this guide, we’ll cover how we can integrate IPFS with...

Continue reading
Jun 8, 2021 How to generate a new Ethereum address in PHP

PHP is very popular in developing the backend of websites or web applications. PHP has a huge crowd of developers trusting it as their go-to language. In this guide, we will see how we can generate a new Ethereum address in...

Continue reading
Jun 8, 2021 Estimating gas price using pending transactions in Python

To send a transaction on the Ethereum network, you need to pay fees for including the transaction in a block as well as the computation necessary in the transaction; this fee is called gas. The transactions are accepted into the block based on the amount of gas they are...

Continue reading
Sep 23, 2021 How to Mint An NFT On Solana

Hello reader! Welcome to another Solana guide. Solana is an up-and-coming blockchain that seeks to solve the scalability issues that Ethereum has been handling. In this guide, you will walk through step-by-step how to create an NFT on Solana....

Continue reading
Jun 8, 2021 How to connect to Ethereum network with ethers.js

When someone thinks of developing a dApp the first tool that comes to their mind is web3.js which is pretty common because of its popularity in the community and wide use cases, dApp development has been consistently growing and there are a lot of developers who want to...

Continue reading
Jun 8, 2021 How to connect to the Ethereum network using Ruby

Ruby has a huge fanbase. Ruby was developed by its creator with an intention to create a language people can have fun using. Ruby has been largely accepted by the developers all around the world since it’s launch, in fact, the biggest tech communities in many cities are...

Continue reading
Jun 8, 2021 How to re-send a transaction with higher gas price using ethers.js

Sometimes, you submit a transaction on Ethereum without enough gas due to network congestion or too many pending transactions offering a higher gas price than you have offered on your transaction. If you have a high priority transaction but low gas, you could end up...

Continue reading
Jun 17, 2021 How to get the balance of an ERC-20 token

When a new token is made on the Ethereum network, it usually follows a specification. The most popular of which is the ERC20 specification. To meet this ERC20 standard, one's token must have a multitude of...

Continue reading
Jun 8, 2021 How to connect to Ethereum network with Web3.js

Libraries and frameworks make the development process a lot easier and faster. When it comes to Ethereum development, Web3.js is the go to library. That's because Web3.js is the official library, from the

Continue reading
Jun 8, 2021 How to generate a new Ethereum address in Ruby

With high usage in web applications and straightforward syntax, Ruby is used by a vast number of people. This guide will cover creating an Ethereum address in Ruby using ruby-eth...

Continue reading
Aug 15, 2021 How to Send a Transaction On Solana Using JavaScript

Hello reader! Today is an exhilarating day because we are going on an expedition to the Solana Blockchain. Solana is an up-and-coming blockchain seeking to improve upon the current ecosystem's solutions to the complex problem of providing a secure, scalable, decentralized...

Continue reading
Nov 4, 2021 How to Build a One-Click Sign in Using MetaMask with PHP's Laravel

Social logins: we have all seen them, we have all used them. "Login with Facebook". "Login with Github".If you have been around the Web3 community you may have come across a more recent player in the game: "Login with MetaMask". For instance, this is...

Continue reading
Jun 8, 2021 How to Fork Ethereum Blockchain with Ganache.

Forking and running a local simulated Ethereum environment is essential if you want to work with DeFi or do Ethereum development in general. In this guide, we’ll cover how to fork Ethereum Blockchain with

Continue reading
Jun 8, 2021 How to fetch Ethereum event logs in Ruby

Ethereum log records are very useful to understand and keep track of smart contract events. In this guide, we are going to learn how to fetch ethereum event logs in Ruby using ethereum.rb ruby...

Continue reading
Jun 9, 2021 How to generate a new Ethereum address in Go

Golang is very popular among backend developers for building infrastructures and microservices. Go is a procedural programming language. Developed in 2007 by Robert Griesemer, Rob Pike, and Ken Thompson at Google, then launched in 2009 as...

Continue reading
Jun 9, 2021 How to generate a new Ethereum address in Python

Python is one of the most versatile programming languages out there with an abundance of use cases; We can build many applications with Python from client-side to back end. In this guide, we will cover creating an Ethereum address in Python using the

Continue reading
Jun 9, 2021 How to generate a new Ethereum address in JavaScript

When it comes to programming, there’s hardly anyone who has not used or heard about JavaScript. JavaScript was initially created for client-side scripting but has become a full-featured Object-Oriented...

Continue reading
Jun 9, 2021 How to connect to Ethereum network using Go

Go helps you make faster scalable backends and this guide will show you how to connect your backend to Ethereum (and make it even faster, more reliable, and globally accessible, all thanks to QuickNode’s global infrastructure). What is...

Continue reading
Jun 9, 2021 How to connect to Ethereum network using Java / Web3j

We can say that Java is one of the most versatile languages out there, and it continues to be relevant in today's time. Java is so popular because of its massive user base and use cases. In this guide/tutorial, we'll learn how to connect to the Ethereum Blockchain network...

Continue reading
Sep 24, 2021 How to Mint an NFT on Solana Using Candy Machine

Hello reader! We have had a lot of requests for another Solana NFT guide where we show you how to Mint a 1-of-1 token, or NFT on Solana. In the previous guide we did not quite get to...

Continue reading
Jun 9, 2021 How to connect to Ethereum using .NET (Nethereum)

Dotnet or .NET is very popular for the development of desktop applications, most Windows desktop applications are built using .NET, and it also contributes largely to web application’s tech stack. In this guide, let’s see how we can connect to Ethereum using .NET and

Continue reading
Jun 15, 2021 How to connect to Ethereum using PHP

PHP is a very popular choice among developers and has a vast community due to its long presence in web development. In this guide, we’ll cover how to connect to Ethereum with PHP using the web3.php...

Continue reading
Jul 15, 2021 How to Setup Local Development Environment for Solidity

The success story of blockchain started with Bitcoin and was given wings by Ethereum. Ethereum was the first blockchain to introduce programmable software to the immutable ledger; these programs that live on the blockchain are called smart contracts. Solidity is the...

Continue reading
Jun 9, 2021 How to use Subspace with QuickNode

In this guide, we'll understand a bit about reactive development and how to use Subspace with QuickNode.JavaScript is the programming language behind most of the internet apps and websites. JavaScript today has become one of the most used programming languages,...

Continue reading
Jun 9, 2021 How to connect to the Ethereum network using Python using Web3.py

You can build Ethereum applications in different programming languages. In this article, we will connect to the Ethereum network using Python.PrerequisiteEthereum Node (We will use QuickNode’s free...

Continue reading
Nov 4, 2021 How to Connect to Terra with JavaScript using Terra.js

Stablecoins have been bridging the gap between the traditional currencies and blockchains. Stablecoins offer stable price crypto tokens pegged by a reserve asset which is often a fiat current like USD, EUR, GBP. The Terra protocol provides a framework to work with...

Continue reading
Jul 24, 2021 How to deploy a smart contract with Brownie

Python is one of the most versatile programming languages; from researchers running their test models to developers using it in heavy production environments, it has use cases in every possible technical field. In today's guide, we will learn about Brownie, a Python-based...

Continue reading
Jul 13, 2021 How To Fork Ethereum Mainnet with Hardhat

Forking the chain at an older block of the blockchain is helpful if you want to simulate the blockchain’s state at that block; Hardhat has this functionality built in. In this guide, let’s go through the process of forking the Ethereum Mainnet at an older...

Continue reading
Jun 26, 2021 How to create and deploy a smart contract with Hardhat

Ethereum development environments like Truffle and Hardhat make it easier to work with smart contracts and Ethereum nodes. They provide a set of tools to seamlessly write, test, and deploy...

Continue reading
Jul 2, 2021 How to generate a new Bitcoin address in JavaScript

To do any type of transaction on the Bitcoin blockchain, you’ll need a public key or a Bitcoin address. In this guide, we’ll cover how to generate a new Bitcoin address in JavaScript using CyrptoCoinJS.

Continue reading
Aug 13, 2021 How to create your own DAO with Aragon

Blockchain provides us with the power of decentralization. Decentralization means the transfer of power to users/members rather than having a single centralized authority governing everything; it enables various use cases in finance, governance, voting, fundraising, etc....

Continue reading
Aug 15, 2021 How to Create an Address in Solana using JavaScript

Hello reader! Welcome to QuickNode's first Solana guide. Solana is an up-and-coming blockchain that seeks to solve the scalability issues that Ethereum has been handling. You will walk through step-by-step how to create a Solana address using the @solana/web3.js...

Continue reading
Nov 4, 2021 How to Build a Wallet Generator for Solana in React

In this practical guide you will build a basic Wallet application with React and Web3 that will interact with Solana Network.This application will do the following operations:Connect to the...

Continue reading