New developers on Starknet always run into the same problem..
They want to build a dapp, but there’s a million tools to choose from, where should they start?
To answer this we built Starknet-Scaffold, a detailed open-source, up-to-date toolkit for building decentralized applications (dapps) on Starknet, comprising the most popular and functional tools. It makes forking the Starknet development stack easy through a frontend that adapts to smart contracts, and scripts optimized to make contract building, declaring and deploying a breeze.
Starknet-Scaffold comprises the following development tools:
- Scarb: a build toolchain and package manager for Cairo and Starknet. Used to compile contracts, install dependencies and so many more.
- Starknet Foundry: A blazingly fast toolkit for developing Starknet contracts designed & developed by ex-Protostar team from Software Mansion based on native Cairo test runner and Blockifier, written in Rust.
- Nextjs: A React framework that gives you the best developer experience with all the features you need for production: hybrid static & server rendering, smart bundling, and more.
- Starknetjs: A javascript Library used to interact with Starknet.
- Starknet-React: A collection of React hooks for Starknet, inspired by wagmi, powered by starknet.js.
- Starknetkit: A library built with all kinds of users in mind. Developers, crypto experts, mobile users, and complete newbies will find a way to quickly connect to your dapp. For you? Only one line of code.
In the next few sections, we’ll go over how to set up and get running with Starknet-Scaffold.
Requirements
To get started using Starknet-Scaffold, ensure to have the following tools installed:
Setting Up
Clone/fork 🏗 Starknet-Scaffold
If you need access to the full repository, simply clone it using the command below:
git clone git@github.com:argentlabs/Starknet-Scaffold.git
OR
Install using create-starknet-app (recommended)
You could also install using the create-starknet-app package to retrieve only what you’ll need for development:
npx create-starknet-app <app-name>
Installing UI Dependencies
Having set up Starknet-Scaffold, you’ll need to install the ui dependencies:
npm run install npm run start
Now, you have everything you need to start developing your ideas!
You can see this page at http://localhost:3000/
🔏 You can edit your smart contract in `contracts/src`
📝 You can edit your frontend page.tsx in `frontend/src/app/page.tsx`
Starknet-Scaffold commands
Build contracts
To build your smart contracts, from the base repository run:
npm run build-contracts
Format contracts
Scarb comes with an in-built Cairo formatter. To utilize it run:
npm run format-contracts
Test contracts
To run your tests:
npm run test-contracts
Generate an SRC-5 interface ID for your contracts
To generate an interface ID, run:
npm run generate-interface PATH_TO_INTERFACE
Prepare Account for deployment
To prepare your account for deployment, run:
npm run prepare-account --url=RPC_URL --name=ACCOUNT_NAME
generates a profile which is added to scarb.toml and can be passed to other commands.
Deploy Account
To deploy an account:
npm run deploy-account --profile=MY_PROFILE --name=ACCOUNT_NAME --maxfee=MAX_FEE
where the profile is gotten from scarb.toml, name is the prepared account and maxfee is the specified max fee.
Delete Account
To delete an account:
npm run delete-account --url=RPC_URL --name=ACCOUNT_NAME --network= alpha-mainnet | alpha-goerli
Declare Contract
To declare a contract:
npm run declare-contract --profile=MY_PROFILE --contract=CONTRACT_NAME
Deploy Contract
To deploy a contract:
npm run deploy-contract --profile=MY_PROFILE --classhash=CONTRACT_CLASSHASH
Run UI
To run UI, from the base repository:
npm run start
Build UI
To build your frontend, from the base repository run:
npm run build-ui
Conclusion
Starknet-Scaffold is a great template for kicking off starknet dapps. We are looking to create the perfect template that makes developing easier, and we can’t do that alone!
If you are a frontend ninja good with Typescript, Nextjs and Tailwind, we’d need your help with building out great UI components for the scaffold. Check out the Contribution guideline, to get started contributing!
If you have any questions regarding this, reach out to me @0xdarlington, I’d love to help you build on Starknet with Argent.
For more developer resources, follow us across our socials:
Argent Twitter — @argentHq
Argent Engineering Twitter — @argentDeveloper
LinkedIn — @argentHq
Youtube — @argentHQ