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

by React

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

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

  2. Install the dependencies

npm install
  1. Start a local Solana node
solana-test-validator
  1. Build the anchor project
anchor build
  1. Fetch the project ID for the build:
solana address -k target/deploy/<programname>-keypair.json

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

  2. Run the tests

anchor test
  1. Change into the app directory and install the dependencies:
cd app && npm install
  1. Run the client-side app
npm start

GitHub

https://github.com/dabit3/complete-guide-to-full-stack-solana-development