DocsQuickstart

Quickstart

The fastest way to start building with Protokit is to use the starter kit. The starter kit provides a monorepo 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:

⚠️

Are you using Windows? Please use WSL to run the commands below.

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

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

Depending on your shell, you may need to prefix any extra flags with an additional -- like so: pnpm run test --filter=chain -- --watchAll. This is applicable across all the commands in this guide.

Run the sequencer & the UI

# build dependency chain package
pnpm run build --filter chain
 
# starts sequencer only
pnpm env:inmemory dev --filter chain
 
# starts UI only
pnpm env:inmemory dev --filter web

Open the demo UI in the browser

Open http://localhost:3000 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 to interact with the GraphQL API explorer directly.

Interact with the demo UI

Setup the Auro wallet 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! 🎉

Protokit environments, persistence and sequencer deployment

To learn more about Protokit environments and how to host your app-chain, check out the starter-kit readme.

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