π Scaffold-Eth Typescript
Features
This is the typescript repo of scaffold-eth. Use scaffold-eth-typescript with:
- A react frontend running with
nextjs
orvite
. - Solidity toolkit of
hardhat
orfoundry
- It has the a command line system that allows you to choose a react frontend or solidity toolkit
Quick Start
Fork or clone the repo
- You can use the use the template link: scaffold-eth-typescript template
- You can clone the repo with git
git clone https://github.com/scaffold-eth/scaffold-eth-typescript.git
Starting the App
Running the app
-
install your dependencies,
open a new command prompt
yarn install
-
Create a default
scaffold.config.json
configuration fileyarn create-config
-
start a local hardhat node (chain)
yarn chain
-
Run the app,
open a new command prompt terminal
# in a new terminal # compile your contracts yarn compile # deploy your hardhat contracts yarn deploy # start the react app (vite) yarn start
-
Open http://localhost:3000 to see your front end
Configuration
Scaffold uses scaffold.config.json
as a configuration file located in /packages/common/scaffold.config.json
. You can create the config file by running the command yarn create-config
.
Command line help
use `-h` with any command for help. e.g. yarn set-react -h
Configure react and solidity toolkit
You can change the configuration file to pick different frontends and solidity toolkits.
yarn set-react `nextjs` or `vite`
yarn set-solidity `hardhat` or `foundry`
Target network
Set your targetNetwork
in the config. This is the network the solidity toolkit is deploying against.
Set your availableNetworks
in the config. This is the networks the frontend is available in.
You can configure it from the config file or from command line.
yarn set-network -h
yarn set-network 'localhost' 'localhost, mainnet'
More commands
You can see all the other commands by using yarn scaffold
Solidity Tookits Details
Hardhat
Everything will be installed with yarn install
.
You can use hardhat with right context using
yarn hardhat
Foundry
Make sure you install foundry
-
Make sure you install foundry first. Use
curl -L https://foundry.paradigm.xyz | bash
to install foundryupYou can see more details here. https://book.getfoundry.sh/getting-started/installation
-
Run
yarn install:foundry
to install or update foundry in the right folder. It will also run forge install automatically with the right context.
You can use foundry commands with the right context
yarn forge
yarn anvil
yarn cast
Directories
The directories that you'll use are:
packages/solidity-ts/
And one of either:
packages/vite-app-ts/
packages/next-app-ts/
More Info
Other commands
# rebuild all contracts, incase of inconsistent state
yarn contracts:clean
yarn contracts:build
# run hardhat commands for the workspace, or see all tasks
yarn hardhat 'xxx'
# run forge, anvil or
yarn forge
yarn anvil
yarn cast
Other folders
# for subgraph checkout README.md in following directories
packages/subgraph/
packages/services/
Guides
Everything you need to build on Ethereum! π Quickly experiment with Solidity using a frontend that adapts to your smart contract:
- π Edit your smart contract
YourContract.sol
inpackages/solidity-ts/contracts
- π Edit your frontend
MainPage.tsx
inpackages/vite-app-ts/src
- πΌ Edit your deployment scripts in
packages/solidity-ts/deploy/hardhat-deploy
- π± Open http://localhost:3000 to see the app
- π·π½ββοΈ run
yarn hardhat
to get a list of all the tasks. Runyarn hardhat taskname
to run the task.
Documentation
Check out eth-hooks docs for example of how to use hooks
Video Tutorials
Tutorial using the CLI
Eth-hooks v4 & scaffold-eth-typescript overview
ππ¨ Speedrun Ethereum
Register as a builder here and start on some of the challenges and build a portfolio.
π Make sure to click on the typescript tab!
Extra!
π¬ Support Chat
Join the telegram support chat π¬ to ask questions and find others building with π scaffold-eth!
π Buidl
Check out
- Typescript challenges
- Typescript examples
- Vanilla JS active branches
- Join/fund the π° BuidlGuidl!
ππ½ Support us!
Please check out our Gitcoin grant too!