Local Development Setup

Complete guide to setting up your local NullGraph development environment

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:

Variable	Default	Description
VITE_RPC_URL	https://api.devnet.solana.com	Solana 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