Journey To One

Scaffold-Eth: All You Need To Know To Get Started :Part 1

Aaron Rebelo's photo
Aaron Rebelo
·

4 min read

Scaffold-eth provides an off-the-shelf stack for rapid prototyping on Ethereum, giving developers access to state-of-the-art tools to quickly learn and ship an Ethereum-based dApp

The Stack consists of:

  • Solidity: for writing smart contracts

  • Hardhat: for running local networks, deploying and testing smart contracts.

  • React: For building a front end

  • Ethers.js: for interacting with deployed smart contracts.

  • Ant: The UI

Getting Started

  • Installation

    The following cmd is to get started working with Scaffold-Eth:

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

Open the scaffold-eth folder and you will find a folder named packages which contains a few subfolders. The most important ones that you should focus on when just starting to work with Scaffold-eth are Hardhat (which is where you will write your Solidity smart contracts, deploy and test them) and React-app (which is where you will build the front end for your smart contracts).

Running the Started Project.

There are 3 steps to get you started with the starter pack.

  • Start a local network with Hardhat
    scaffold uses Hardhat, which comes built-in with Hardhat Network, a local Ethereum network designed for development.
cd scaffold-eth
yarn chain
  • Deploy your contracts to the local network
    Now that we have our local network running, we can deploy smart contracts to it. Run the following command in a new terminal window. Deploy script runs the deploy_your_smart_contract file in deploy, under hardhat.
cd scaffold-eth
yarn deploy

  • Run the React App to interact with the contracts deployed to your local network.
    Now that we have a local network running and our smart contract deployed to it, it's time to see it working.

    Scaffold-eth comes with React and offers a lot of helper components and hooks to make it very easy to connect to a network and start interacting with your smart contracts right away.

    In order to see and interact with the smart contract we just deployed to the Hardhat Network, run the following command in yet another new terminal window.

cd scaffold-eth
yarn start

Once the development server starts and your app is done compiling it should be running at https://localhost:3000

Just a few quick lookups.

  • your smart contract you'll be working with is located in packages/hardhat/contracts

  • Edit your frontEnd from the file App.jsx in packages/react-app/src

  • Edit and add your deployment scripts in packages/hardhat/deploy

  • small changes done to your contract or UI will be auto-updated on your application.

  • You can yarn deploy any time and get a fresh new contract in the frontend

Deploying your contract.

How do you deploy your contract on a testnet/ mainnet ?

  • you can change your default network on the hardhat.config.js file in packages/hardhat/hardhat.config.js

  • yarn deploy deploys your contract. the scripts in /packages/hardhat/deploy is executed.

  • Deployment metadata is stored in the /deployments folder, and automatically copied to /packages/react-app/src/contracts/hardhat_contracts.json via the --export-all flag in the yarn deploy command

Shipping your app

before you deploy your final product, there are a few things you need to keep in mind.

  • Deploy your contract to the intended network.

  • verify your contract on etherscan

  • and turn debug mode off to stop printing logs, In line 48 of app.jsx const DEBUG = false;

  • Review app.jsx and remove any extra code you are not using. Scaffold-eth comes with many examples of how to subscribe to blocks, fetch gas prices, eth prices, etc. which you might not use but are still making RPC calls to your node.

  • Review line 45 of app.jsx and change the targetNetwork accordingly. this makes sure the React app is pointing to the selected network.

  • Make sure you are using your own nodes and not the ones in Scaffold-eth as they are public and there's no guarantee they will be taken down or rate limited. Review lines 58 and 59 of app.jsx.

  • Review the constants.js file and swap the services' API keys with yours. You need to create an account on Infura, Etherscan and Blocknative if you want to use their services.

if it's a static web page, you can use surge to deploy it. or you can stick to vercel.

#First, build the app
yarn build

#Then, deploy to Surge
yarn surge
scaffold-eth