The Complete Guide to Full Stack Solana Development with React, Anchor, Rust, and Phantom

Code examples to go with the blog post available here

Prerequisites

1. Node.js - I recommend installing Node using either nvm or fnm

2. Solana Tool Suite - You can see the installation instructions here. note - I had a very hard time getting everything working on an M1 Mac, mainly solana-test-validator and cargo-build-bpf. I finally figured it out, and posted my solution here. I'm sure at some point this will be fixed and work out of the box.

3. Anchor - Anchor installation was pretty straight-forward for me. You can find the installation instructions here.

4. Solana browser wallet - I recommend Phantom, which is what I have tested this app with.

To build

1. Clone the repo

git clone git@github.com:dabit3/complete-guide-to-full-stack-solana.git

2. Change into the project directory you'd like to run

3. Install the dependencies

npm install

4. Start a local Solana node

solana-test-validator

5. Build the anchor project

anchor build

6. Fetch the project ID for the build:

solana address -k target/deploy/<programname>-keypair.json

6. Update the project ID in the Rust program located at projectname/programs/src/programname.rs with the output from above.

7. Run the tests

anchor test

8. Change into the app directory and install the dependencies:

cd app && npm install

9. Run the client-side app

npm start