Docs
Quickstart

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:

⚠️

Are you using Windows? Please use WSL (opens in a new tab) 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

# 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 (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! 🎉

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 (opens in a new tab).

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