Quickstart

The fastest way to start building with Protokit is to use the starter kit (opens in a new tab). The starter kit provides a monorepo (opens in a new tab) aimed at kickstarting application chain development using the Protokit framework.

Install dependencies

Before you can start building with Protokit, you need to install the following dependencies:

Clone the starter kit

# Clone the starter kit
git clone https://github.com/proto-kit/starter-kit my-chain
cd my-chain
 
# Ensure you're on the right nodejs version and install dependnecies
nvm use
pnpm install

Run the tests

# run and watch tests for the `chain` package
pnpm run test --filter=chain

Note: There's an optional --watchAll flag, which will re-run the test suite when files change.

Run the sequencer & the UI

# starts sequencer only
pnpm dev --filter chain
 
# starts UI only
pnpm dev --filter web

Open the demo UI in the browser

Open http://localhost:3000 (opens in a new tab) with your browser to see the results. Assuming your setup went well, you'll see an example UI that allows you to interact with your app-chain.

Alternatively you can try http://localhost:8080/graphql (opens in a new tab) to interact with the GraphQL API explorer directly.

Interact with the demo UI

Setup the Auro wallet (opens in a new tab) if you haven't already. Then connect your wallet in the UI, and claim some tokens from the faucet.

Congratulations, you've just ran your first app-chain built using Protokit! 🎉

Folder structure

After completing the quickstart setup, you'll end up with a basic Protokit project. The project itself is a monorepo containing a Next.js/React based web app at apps/web, that connects to an example application chain from packages/chain.

The folder structure looks something like this:

- async-layout.tsx
- async-page.tsx
- balances.tsx
- chain.tsx
- client.tsx
- wallet.tsx

- balances.ts
- runtime.ts
- chain.config.ts
- client.config.ts
- balances.test.ts

Provable code App-chain's runtime