First Program & dApp
This guided path takes a new teammate from anchor init to a devnet-deployed Anchor 0.32.1 program plus a minimal @solana/kit 7.0.0 client that reads and writes on-chain state. Expect one to two days on Agave 4.1.1 devnet with Solana CLI 3.0.10.
Recipe
Quick-reference recipe card - copy-paste ready.
avm use 0.32.1
anchor init hello_counter
cd hello_counter
anchor build && anchor test
anchor deploy --provider.cluster devnet
# then scaffold Next.js client with @solana/kit@7.0.0When to reach for this:
- Capstone of week-1 onboarding.
- Proving toolchain before joining shared monorepo.
- Teaching full-stack flow in workshops.
- Template for future internal starter kits.
Working Example
1. Program (Anchor)
use anchor_lang::prelude::*;
declare_id!("<GENERATED_PROGRAM_ID>");
#[program]
pub mod hello_counter {
use super::*;
pub fn initialize(ctx: Context<Initialize>) -> Result<()> {
ctx.accounts.counter.count = 0;
Ok(())
}
pub fn increment(ctx: Context<Increment>) -> Result<()> {
ctx.accounts.counter.count = ctx.accounts.counter.count.checked_add(1).unwrap();
Ok(())
}
}
#[account]
pub struct Counter {
pub count: u64,
}
#[derive(Accounts)]
pub struct Initialize<'info> {
#[account(init, payer = user, space = 8 + 8)]
pub counter: Account<'info, Counter>,
#[account(mut)]
pub user: Signer<'info>,
pub system_program: Program<'info, System>,
}
#[derive(Accounts)]
pub struct Increment<'info> {
#[account(mut)]
pub counter: Account<'info, Counter>,
}anchor build
anchor test # uses LiteSVM or validator per Anchor.toml
anchor deploy --provider.cluster devnet
solana program show <PROGRAM_ID>2. Client (kit)
import { createSolanaRpc, address } from "@solana/kit";
const rpc = createSolanaRpc("https://api.devnet.solana.com");
const counter = address("<COUNTER_ACCOUNT_PUBKEY>");
const info = await rpc.getAccountInfo(counter, { encoding: "base64" }).send();
console.log("account data length:", info.value?.data.length);
// Wire Codama-generated increment ix in the next onboarding stepWhat this demonstrates:
- Anchor program with init + mutate instructions.
- Rent-exempt account with discriminator +
u64payload. - Devnet deploy with CLI-verified program id.
- Client reads account existence before codegen wiring.
Deep Dive
Guided Milestones
| Step | Output | Verification |
|---|---|---|
| Init repo | Anchor.toml, programs/ | anchor build |
| Tests | Rust TS or LiteSVM tests | anchor test green |
| IDL | target/idl/*.json | Committed or generated in CI |
| Deploy | Devnet program id | solana program show |
| Client read | UI/console shows account | RPC getAccountInfo |
| Client write | Increment tx lands | Explorer signature success |
Architecture Sketch
Browser (wallet) --sign--> kit tx --> devnet RPC --> Agave 4.1.1
^
|
Anchor program (.so)
Rust / TypeScript Notes
# Generate kit client from IDL (team Codama config)
npx codama run --config codama.json
# Map env vars
NEXT_PUBLIC_PROGRAM_ID=...
NEXT_PUBLIC_RPC_URL=https://api.devnet.solana.comGotchas
- Deploying before tests pass - wastes devnet SOL and time. Fix:
anchor testgate in script. - Program id mismatch -
declare_id!vs deployed key. Fix:anchor keys syncafteranchor deploy. - Client cluster drift - UI on mainnet RPC, program on devnet. Fix: env-driven RPC URL.
- Wallet not signing fee payer - simulation errors. Fix: connect wallet before send pipeline.
- Skipping IDL in repo - client codegen stale. Fix: commit IDL or deterministic CI codegen.
Alternatives
| Alternative | Use When | Don't Use When |
|---|---|---|
create-solana-dapp template | Faster UI scaffold | Learning Anchor internals |
| Python AnchorPy client | Backend-only demo | Browser wallet UX |
| Local validator only | Airplane mode | Need explorer share links |
| Surfpool fork | Mainnet state dependency | First hello-world |
FAQs
Next.js or Vite?
Either - kit works in both; team template picks default.
Wallet adapter?
Add after raw kit read works - reduces Day-1 variables.
How much SOL?
< 2 devnet SOL for deploy + account rent with airdrops.
Upgradeable deploy?
Default upgradeable is fine on devnet; document upgrade authority holder.
TS tests?
Optional anchor test TS suite or Bankrun after Rust tests pass.
Public demo?
Share devnet explorer links - never mainnet keys in README.
Monorepo merge?
Port program into shared workspace after capstone review.
Security scope?
Not production-safe - focus on workflow fluency, not economics.
CI?
Add GitHub Action running anchor build + LiteSVM tests on PR.
Completion criteria?
Buddy watches live increment from UI and verifies count on-chain.
Related
- Onboarding Devs Checklist - where this fits
- Environment Setup Checklist - prerequisites
- create-solana-dapp - full template
- @solana/kit Basics - client SDK
Stack versions: This page was written for Agave 4.1.1, Solana CLI 3.0.10, Anchor 0.32.1, anchor-lang 0.32.1, Rust 1.91.1, @solana/kit 7.0.0, Surfpool 0.12.0, and LiteSVM 0.6.x.