How do I deploy an Anchor program on Solana and connect it to a React app (react-vite-anchor)?

Quick Answer: Use the react-vite-anchor template to scaffold a React app and Anchor vault program, deploy the Anchor program to a Solana cluster (typically devnet) with the Solana CLI and Anchor, then point your React app at that deployed program ID. The template wires up @solana/react-hooks, wallet connection, and a generated client so your frontend can safely invoke your Anchor instructions.

Why This Matters

If you’re building payments, DeFi, or real-world asset flows on Solana, you need an end-to-end path from on-chain logic to a production-ready UI. The react-vite-anchor template compresses that bootstrapping work: it gives you an Anchor program, a React + Vite frontend, Tailwind styling, wallet connectivity, and a generated client that speaks the same IDL as your program. Instead of fighting boilerplate, you can focus on the business logic and the transaction patterns that actually move assets.

Key Benefits:

Fast path from idea to working dApp: Scaffold a Solana app with an Anchor program and React frontend in minutes, not days.
Correct-by-default integration: Program deployment, program IDs, and client generation are wired together, reducing “it compiles, but the frontend can’t find the program” failures.
Production-grade primitives: Start with the same building blocks you’ll use later in production—Anchor, @solana/kit, @solana/react-hooks, wallet adapters, and Solana CLI tooling.

Core Concepts & Key Points

Concept	Definition	Why it's important
Anchor program	A Solana on-chain program written in Rust using the Anchor framework, with IDL-based clients.	Gives you structured accounts, type-safe instructions, and auto-generated clients for your React app.
react-vite-anchor template	A starter kit combining React + Vite, Tailwind CSS, `@solana/react-hooks`, and an example Anchor vault program.	Provides a working vault dApp that demonstrates full-stack Solana patterns from wallet connect to program invocation.
Program ID & client generation	The unique public key of your deployed program, paired with generated TypeScript client code from the IDL.	The React app must use the correct program ID and generated client to send transactions to the right on-chain program.

How It Works (Step-by-Step)

At a high level, you:

Scaffold the template and run the React app.
Configure your Solana environment (cluster, keypair, funding).
Build and deploy the Anchor program, then regenerate the client.
Connect your React UI to the deployed program, and start sending transactions via wallet-connected users.

Below is the concrete path using react-vite-anchor.

1. Scaffold the React + Anchor project

Use the official template to create a new project:

npx -y create-solana-dapp@latest \
  -t solana-foundation/templates/kit/react-vite-anchor

Then install dependencies and start the dev server:

npm install        # Builds program and generates client automatically
npm run dev

Open the app:

Visit http://localhost:5173
Connect a wallet (e.g., Phantom) that’s pointed at the same cluster as your program (devnet by default)
Interact with the included vault program on devnet

Under the hood, the repo structure looks roughly like:

.
├── src/                      # React + Vite frontend
├── anchor/                   # Anchor workspace
│   └── programs/vault/       # Vault program (Rust)
└── codama.json               # Codama client generation config

2. Configure Solana CLI for devnet

You need a Solana CLI configuration that matches the cluster you’ll deploy to. The template assumes devnet for learning and testing.

Set your default RPC endpoint:

solana config set --url devnet

Verify:

solana config get
# RPC URL: https://api.devnet.solana.com (or equivalent devnet RPC)
# Keypair Path: ...
# Commitment: confirmed

Operational note: Public devnet RPC is fine for tutorials. For anything with real usage or load, treat RPC as production infra: run your own or use a dedicated provider and point both CLI and app configs at it.

3. Create and fund a wallet for deployment

If you don’t have a CLI keypair yet:

solana-keygen new

Fund it with devnet SOL:

solana airdrop 2

Confirm balance:

solana balance

You’ll use this keypair to pay for program deployment and transactions.

4. Build and deploy the Anchor program

From the project root, move into the Anchor workspace:

cd anchor

Sync and build:

anchor build

This compiles the vault program under programs/vault/ and outputs the program’s keypair and IDL.

If you’ve generated a new program ID or changed configuration, sync keys into the source:

anchor keys sync
# Updates program ID in source files
anchor build      # Rebuild with the new ID

Deploy the program to devnet:

anchor deploy

Anchor will output the program ID (a Pubkey)—this is the address your React app must use to talk to the program.

When you’re done deploying, go back to the project root:

cd ..

5. Regenerate the client and restart the React app

The template uses Codama to generate a TypeScript client from the Anchor IDL. After deploying or changing the program:

npm run setup   # Rebuilds program and regenerates client
npm run dev     # Restart dev server if needed

npm run setup is the glue step that keeps the Rust program, IDL, and TypeScript client in sync. If you forget it, the React app may still be using an old program layout or ID.

6. Connect the React app to your deployed Anchor program

The react-vite-anchor template already wires up:

Wallet connection via @solana/react-hooks with auto-discovery.
A generated client that knows your vault program’s instructions and accounts.
React components that call the client inside hook-driven flows.

Typical frontend patterns look like:

A connection hook that exposes a Connection and cluster endpoint (e.g., useConnection() from @solana/react-hooks).
A wallet hook that gives you the current wallet, publicKey, and sendTransaction.
A program/client helper that instantiates the generated Anchor client using the IDL and your program ID.

Conceptually, an interaction might look like:

const { connection } = useConnection();
const { publicKey, sendTransaction } = useWallet();
const vaultClient = useVaultClient(); // generated from Codama + IDL

async function deposit(amountLamports: bigint) {
  if (!publicKey) throw new Error("Wallet not connected");

  const tx = await vaultClient.deposit({
    payer: publicKey,
    amount: amountLamports,
  });

  const sig = await sendTransaction(tx, connection);
  // Optionally confirm and show status
}

The template ships with these patterns already implemented; your main job is to customize logic and UI, not rewire the Solana plumbing.

7. Verify end-to-end behavior

With the React dev server running and the program deployed:

Open http://localhost:5173.
Ensure your wallet is set to devnet.
Connect your wallet in the UI.
Use the UI to interact with the vault (e.g., deposit/withdraw flow in the template).
Inspect the transactions in a block explorer (e.g., SolanaFM or Solscan) to confirm:
- The correct program ID is being invoked.
- Accounts and instruction data align with your program’s expectations.

If something feels slow or unstable, start by:

Checking your RPC endpoint and rate limits.
Confirming the wallet cluster matches your deployed program’s cluster.
Ensuring the program ID in the client matches the ID Anchor printed on deploy.

Common Mistakes to Avoid

Using the wrong cluster or RPC endpoint:
Connecting your wallet to mainnet while your program runs on devnet (or vice versa) will make the app “fail silently” from the user’s perspective. Always align:
- Solana CLI --url
- Wallet cluster setting
- React app’s connection endpoint
Forgetting to regenerate the client after program changes:
Changing accounts or instruction layouts in your Anchor program without running npm run setup leaves your TypeScript client out-of-date. Regenerate the client after:
- Changing program code that affects the IDL.
- Deploying a new program ID.
- Updating Anchor configs that alter accounts/instructions.

Real-World Example

Imagine you’re building a simple treasury vault to hold USDC on Solana for a global payout product. You want a React dashboard that operations teams can use to:

View the vault’s balance.
Approve deposits into the vault.
Trigger payouts through pre-defined instructions.

Using react-vite-anchor:

You customize the included vault program in anchor/programs/vault/ to enforce your treasury rules (multi-sig, limits, memos for reconciliation).
You deploy the program to a private or devnet-like environment first, following the anchor build → anchor deploy flow.
You run npm run setup so the React app’s client now knows about your new instructions (e.g., approvePayout, lockFunds).
In your React UI, you wire new buttons and forms to call these client methods using wallet-connected accounts—operations teams can now test flows with real transaction signatures and ~400ms settlement characteristics.

When you’re ready for production, you replicate the same pattern on mainnet with dedicated RPC, monitoring, and key management, while the core deploy-and-connect workflow remains identical.

Pro Tip: Treat the react-vite-anchor template as a reference implementation for how to structure Solana dApps, not just a starter. Even if you later move to Next.js or a different UI stack, preserve the same separation of concerns—Anchor workspace, client generation step, wallet hooks, and a thin React layer on top of a typed Solana client.

Summary

Deploying an Anchor program on Solana and connecting it to a React app is straightforward when you follow the react-vite-anchor path:

Scaffold the project with create-solana-dapp.
Configure your Solana CLI for devnet and fund a deployer wallet.
Build and deploy the included Anchor vault program.
Regenerate the TypeScript client with npm run setup.
Use @solana/react-hooks and the generated client to invoke your program from a React + Vite UI.

You get a full-stack example that already respects Solana’s constraints—program IDs, IDL, RPC endpoints, and wallet flows—so you can focus on your business logic and payment workflows instead of boilerplate.

Next Step

Get Started