Starknet-Scaffold: A powerful toolkit for building Starknet Dapps

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:

1. Scarb: a build toolchain and package manager for Cairo and Starknet. Used to compile contracts, install dependencies and so many more.
2. 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.
3. 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.
4. Starknetjs: A javascript Library used to interact with Starknet.
5. Starknet-React: A collection of React hooks for Starknet, inspired by wagmi, powered by starknet.js.
6. 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:

• Node (v18 LTS)
• Rust
• Git
• Scarb
• Starknet Foundry

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

‍