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