Skip to main content

​
Prerequisites

Before you begin, ensure you have the following installed on your system:
  • Rust (stable) - Required for building the Solana program
  • Solana CLI (v1.18+) - Command-line tools for Solana development
  • Anchor CLI (v0.31.1) - Framework for Solana program development
  • Node.js (v18+) - JavaScript runtime for the frontend
  • Phantom Wallet browser extension - For transaction signing (set to devnet)
Make sure your Phantom wallet is configured to use devnet before testing the application.

​
Installation

1

Clone the repository

Clone the NullGraph repository to your local machine:
git clone <repository-url>
cd nullgraph
2

Install root dependencies

Install the root-level dependencies for the Anchor workspace:
npm install
This installs Anchor testing utilities and TypeScript dependencies.
3

Install frontend dependencies

Navigate to the frontend directory and install React dependencies:
cd app && npm install && cd ..
This installs React 19, Vite 7.3, Tailwind CSS v4, Solana wallet adapters, and all frontend dependencies.
4

Configure Solana CLI

Set your Solana CLI to point to devnet:
solana config set --url devnet
Verify your configuration:
solana config get
5

Generate a keypair (if needed)

If you don’t have a Solana keypair for devnet development, generate one:
solana-keygen new --outfile ~/.config/solana/nullgraph.json
Keep your keypair secure. Never commit keypair files to version control.
6

Airdrop devnet SOL

Request devnet SOL for deployment and testing:
solana airdrop 2
Check your balance:
solana balance

​
Building the Program

Build the Anchor program to compile the Rust code: 
anchor build
This command:
  • Compiles the Solana program in programs/nullgraph/src/lib.rs
  • Generates the IDL (Interface Definition Language) file in target/idl/nullgraph.json
  • Generates TypeScript types in target/types/nullgraph.ts
  • Creates the compiled program binary in target/deploy/
The program ID is declared in Anchor.toml under [programs.devnet]: 2u3DXQq9A6UgMryeVSWCNdYLy3Fjh391R5hcfWYkCgZK

​
Running the Frontend

1

Navigate to the app directory

cd app
2

Start the development server

npm run dev
The frontend will be available at http://localhost:5173
3

Connect your wallet

Open http://localhost:5173 in your browser and click the wallet button in the navigation bar to connect your Phantom wallet.

​
Environment Variables

The frontend accepts optional environment variables for configuration:
VariableDefaultDescription
VITE_RPC_URLhttps://api.devnet.solana.comSolana JSON-RPC endpoint
To customize, create a .env file in the app/ directory: 
# app/.env
VITE_RPC_URL=https://api.devnet.solana.com
Both variables are optional. The defaults point to the devnet deployment.

​
Rebuilding IDL After Program Changes

Whenever you modify the Anchor program (programs/nullgraph/src/lib.rs), you must rebuild and update the frontend IDL: 
anchor build
cp target/idl/nullgraph.json app/src/lib/nullgraph.json
cp target/types/nullgraph.ts app/src/lib/nullgraph_types.ts
This ensures the frontend’s Anchor client stays in sync with the on-chain program interface.

​
Project Structure

nullgraph/
├── Anchor.toml                          # Anchor config (cluster, program ID, wallet)
├── Cargo.toml                           # Rust workspace manifest
├── programs/
│   └── nullgraph/
│       ├── Cargo.toml
│       └── src/
│           └── lib.rs                   # All accounts, instructions, events, errors (~593 lines)
├── tests/
│   └── nullgraph.ts                     # Anchor integration tests
├── scripts/
│   └── init-protocol.ts                 # One-time protocol initialization script
└── app/
    ├── package.json
    ├── vite.config.ts
    └── src/
        ├── main.tsx                     # React DOM entry
        ├── App.tsx                      # Provider stack + routes
        ├── lib/
        │   ├── nullgraph.json           # Compiled IDL
        │   └── nullgraph_types.ts       # Generated TypeScript types
        ├── hooks/                       # React hooks for data fetching and transactions
        ├── components/                  # UI components
        └── pages/                       # Route pages

​
Next Steps

Now that your local environment is set up:
  1. Learn how to run the test suite
  2. Deploy your program to devnet
  3. Explore the program architecture

Build docs developers (and LLMs) love

Get started for freeTalk to us