Scaffold-Eth: All You Need To Know To Get Started :Part 1
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
inpackages/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 theyarn 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 thetargetNetwork
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