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 Solana template to get a React app and Anchor program wired together out of the box. You’ll deploy your Anchor program with the Solana CLI and Anchor CLI, then regenerate the client and let the React app consume the generated IDL and TypeScript client to talk to your program on devnet.

Why This Matters

If you’re trying to ship a production-grade Solana app, you need more than just a smart contract in Rust or a standalone React UI. You need a clean pipeline from: write Anchor program → deploy to a Solana cluster → generate a typesafe client → connect to wallets and call instructions from your React app. The react-vite-anchor template does this wiring for you, so you can focus on your business logic instead of hand-rolling boilerplate and debugging mis-matched IDs or IDLs.

Key Benefits:

Faster bootstrap: React + Vite + Tailwind + Anchor program + client generation are wired together with a single template.
Typesafe program calls: The IDL and Codama-generated client keep your React code aligned with your on-chain Anchor program.
Production-minded workflow: You use the same primitives (Solana CLI, devnet, RPC endpoints, wallet connections) you’ll rely on in a real deployment.

Core Concepts & Key Points

Concept	Definition	Why it's important
Anchor program	A Solana program written with the Anchor framework, which provides macros, IDL generation, and tooling.	Simplifies building, testing, and upgrading Solana programs with a clear, declarative API.
react-vite-anchor template	A starter kit that combines React, Vite, Tailwind CSS, `@solana/react-hooks`, and an example Anchor vault program.	Gives you a working end-to-end stack (program + client + UI) with best-practice wiring already in place.
Client generation (Codama)	Tooling that reads your Anchor IDL and generates a typed client (TypeScript) for the React app.	Keeps your front end in sync with on-chain contract changes without manual glue code.

How It Works (Step-by-Step)

At a high level, you will:

Scaffold the React + Anchor project from the react-vite-anchor template.
Configure the Solana CLI for devnet, create/fund a wallet, and deploy the Anchor program.
Regenerate the client and run the React app, which connects to your program using @solana/react-hooks and the generated client.

1. Scaffold the react-vite-anchor project

Use the official Solana Kit template. This pulls in React, Vite, Tailwind, @solana/react-hooks, and an example Anchor vault program.

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

cd react-vite-anchor   # or the folder name you chose
npm install            # Builds program and generates client automatically

Key facts about the template structure:

anchor/ — Anchor workspace.
- programs/vault/ — Example vault program in Rust.
codama.json — Codama config for generating the TypeScript client.
src/ — React app using @solana/kit and @solana/react-hooks for wallet connections and program calls.

2. Configure Solana CLI for devnet

Set your CLI to point at devnet, which is the right place to deploy and test without touching real funds.

solana config set --url devnet

Confirm your configuration:

solana config get

You should see something like:

RPC URL: https://api.devnet.solana.com
WebSocket URL: wss://api.devnet.solana.com/ (computed)
Keypair Path: /path/to/your/id.json
Commitment: confirmed

3. Create and fund a wallet

If you don’t have a local Solana keypair yet:

solana-keygen new

This will generate a keypair and store it at the default path, then it becomes your default CLI wallet.

Airdrop some SOL on devnet:

solana airdrop 2
solana balance

You need this SOL to pay deployment and transaction fees (still sub-cent, but non-zero).

4. Build and deploy the Anchor program

From the project root, move into the Anchor workspace:

cd anchor

Sync the program ID (this updates your local config so the on-chain program ID and the source code match):

anchor keys sync

Build the program:

anchor build

Deploy to devnet:

anchor deploy

This step:

Uploads the compiled program to devnet.
Outputs the deployed program ID (make sure this matches what your client and IDL expect).

If you change the program ID, re-run:

anchor keys sync
anchor build

so the program code and client stay in sync.

Then go back to the project root:

cd ..

5. Regenerate the client and restart the app

Whenever you deploy (or change) the Anchor program, regenerate the client:

npm run setup   # Rebuilds program and regenerates client
npm run dev

npm run setup typically:

Rebuilds the Anchor program.
Uses codama.json + IDL to generate a TypeScript client under your React app (usually in a generated or clients folder).
Ensures your UI is calling the correct program with the correct accounts and instruction layout.

Once npm run dev is running, open:

http://localhost:5173

Connect your wallet in the browser (e.g., Phantom, Solflare) and interact with the example vault program on devnet.

Under the hood, this flow uses:

@solana/react-hooks and/or @solana/kit to:
- Discover wallets,
- Manage connections to devnet RPC,
- Provide a Connection and wallet object in React.
The Codama-generated client to:
- Construct transactions,
- Attach the correct accounts,
- Call Anchor instructions without hand-crafting raw TransactionInstruction objects.

6. Wiring your own Anchor program to React

To replace the example vault program with your own logic:

Modify the program:

In anchor/programs/vault/src/lib.rs (or your program folder), replace the example instructions with your own Anchor code.
Update the program ID:

If you create a new Anchor program or reinitialize it, ensure the declare_id!() macro in Rust matches the deployed program ID. Then run:
```
cd anchor
anchor keys sync
anchor build
anchor deploy
cd ..
```
Regenerate the client:
```
npm run setup
```

Use the generated client in React:

In your React code (e.g., src/App.tsx or a hook):

import { useConnection, useWallet } from '@solana/react-hooks';
import { createVaultClient } from './generated/vaultClient'; // example path

export function useVault() {
  const { connection } = useConnection();
  const { publicKey, sendTransaction } = useWallet();

  const client = createVaultClient({ connection });

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

    const tx = await client.deposit({
      accounts: { user: publicKey },
      args: { amount: amountLamports },
    });

    const sig = await sendTransaction(tx, connection);
    await connection.confirmTransaction(sig, 'confirmed');
    return sig;
  }

  return { deposit };
}

The exact names (createVaultClient, deposit) depend on your IDL and generated client, but the pattern is the same: the React app calls program instructions through the generated client, using the wallet and connection from @solana/react-hooks.

Common Mistakes to Avoid

Forgetting to regenerate the client after program changes:
If you change the Anchor program (new instruction, modified accounts) and skip npm run setup, your React app will call an outdated client and fail with confusing errors. Always rebuild + regenerate when the IDL changes.
Mismatched program IDs between Rust, IDL, and React:
If declare_id!() in Rust, the deployed program ID, and the ID your client uses don’t match, transactions will fail or hit the wrong program. Use anchor keys sync and verify the program ID after anchor deploy.
Pointing the app at the wrong cluster:
If your Solana CLI is on devnet but your React app’s connection is hard-coded to mainnet (or vice versa), you’ll “see nothing” on the UI. Ensure both CLI and React providers target the same cluster URL.

Real-World Example

Imagine you’re building a USDC-based treasury vault for a small fintech. You want:

A Solana program that:
- Manages a vault account per business.
- Lets admins deposit/withdraw USDC.
- Emits events with memos for reconciliation.
A React dashboard that:
- Connects via wallet.
- Shows vault balances.
- Lets ops teams trigger payouts.

Using react-vite-anchor, you:

Start from the vault example and modify it to hold a specific SPL token (USDC) instead of native SOL.
Deploy the modified program to devnet via anchor build and anchor deploy.
Run npm run setup to regenerate the client from your updated IDL.
In React, swap “Vault” labels for your business-specific flows and wire the generated client into your dashboard components.

You end up with an end-to-end devnet environment where:

Funds are secured in ~400ms on Solana.
Fees stay around ~$0.001 per transaction.
Your UI is strongly typed against the on-chain program, so operational changes (like new instructions) don’t silently break the frontend.

Pro Tip: Treat npm run setup as part of your normal development cycle whenever you touch the Anchor program. For CI, add a job that runs anchor build, anchor test, and client generation so mismatched IDLs never make it into your main branch.

Summary

Deploying an Anchor program on Solana and connecting it to a React app doesn’t have to mean weeks of wiring and glue code. The react-vite-anchor template gives you:

A working Anchor vault program.
A React + Vite + Tailwind UI.
Wallet connection via @solana/react-hooks.
Automatic client generation using Codama and the Anchor IDL.

Your workflow is straightforward: configure the Solana CLI for devnet, create and fund a wallet, build and deploy the Anchor program, regenerate the client, and run the React app. From there, you iterate on the Anchor code and UI in lockstep, using the generated client to keep everything aligned.

Next Step

Get Started