Environment Setup

In this section, you'll scaffold a new Solana dApp using create-solana-dapp and configure it for our token-gated file system.

Scaffold the Project

Run the Scaffold Command

npx create-solana-dapp@latest token-gated

When prompted, select:

Framework: Next.js
SDK: @solana/kit (the new Solana SDK)

Navigate to the Project

cd token-gated

Explore the Generated Structure

The scaffold creates a project structure like this:

Anchor.toml

Cargo.toml

layout.tsx

page.tsx

globals.css

package.json

next.config.ts

tsconfig.json

Clean Up Default Program

The scaffold includes a default vault program that we don't need. Let's remove it and prepare for our custom programs.

Delete the Vault Program

rm -rf anchor/programs/vault

Remove the Vault Frontend Component

The scaffold also includes a frontend component for the vault. Remove the vault-related files from the Next.js app:

rm -rf web/components/vault

You should also remove the VaultFeature import and usage from your main page (web/app/page.tsx) if present.

Update Anchor.toml

Replace the contents of anchor/Anchor.toml:

[toolchain]
anchor_version = "0.31.1"

[features]
resolution = true
skip-lint = false

[programs.testnet]
access_control = "YOUR_ACCESS_CONTROL_PROGRAM_ID"
ace_hook = "YOUR_ACE_HOOK_PROGRAM_ID"

[registry]
url = "https://api.apr.dev"

[provider]
cluster = "testnet"
wallet = "~/.config/solana/id.json"

[scripts]
test = "cargo test"

We'll update the program IDs after deployment. For now, you can use placeholder values or the pre-deployed addresses from the next section.

Install Dependencies

Install the required packages for Shelby storage, threshold encryption, and Solana integration:

npm install @shelby-protocol/sdk @shelby-protocol/solana-kit @shelby-protocol/react @aptos-labs/ace-sdk @coral-xyz/anchor @tanstack/react-query

Configure Environment Variables

Create a .env file in the project root with your Shelby API key:

# .env
NEXT_PUBLIC_SHELBYNET_API_KEY=AG-your-api-key-here

We'll add more environment variables (program IDs, RPC URLs, etc.) as we progress through the tutorial.

Add .env to your .gitignore to prevent committing secrets: bash echo ".env" >> .gitignore

Project Structure

After setup, your project structure should look like this:

Anchor.toml

Cargo.toml

layout.tsx

page.tsx

globals.css

.env

package.json

Verify Setup

Run the development server to ensure everything is configured correctly:

npm run dev

Visit http://localhost:3000. You should see the default scaffold page.

Next Steps

Now that your environment is set up, let's write the Solana programs

Environment Setup

On this page