Building Full Stack dapps with React, Solana, Anchor, and Phantom wallet.

In The Complete Guide to Full Stack Ethereum Development I did a deep dive into how to build a full stack dapp on Ethereum, which can also be applied to other EVM compatible chains like Polygon, Avalanche, and Ethereum Layer 2's.

In this guide, I want to dive into Solana to show you how to build a full stack dapp. I also want to introduce the the ecosystem and the developer tooling to you to hopefully help you get up and running building your own ideas and applications going forward.

Solana developer overview
As someone who just started learning Solidity and its ecosystem about 6 months ago, I kind of assumed it couldn't be that much harder to get up and running with. I was wrong.

Parts of the developer tooling are really nice and polished (the Solana CLI and Anchor), while the rest of the ecosystem, and even the documentation for Anchor (which to be fair, is very new), leaves a decent amount to be desired.

That being said, once you get the hang of everything it quickly becomes much easier to understand how to start implementing your own ideas and begin experimenting.

One of the keys to finding answers is to be vigilant about searching across all of Google, Github, and especially the various Discord servers for Anchor (project Serum) and Solana. The developers in those channels have been extremely helpful, especially Armani Ferrante who created the Anchor framework

Project overview
The tooling we'll be using today includes:

Solana Tool Suite - This includes a really polished and well documented CLI for interacting with the Solana network.

Anchor Framework - Anchor is actually a life saver for me, and I'm almost certain I would not have been able to get over the hump of building anything without it. It is the Hardhat of Solana development and more, and I love it. It also offers a DSL on top of Rust so that you do not need a deep understanding of the language to get started, though I am still trying to learn Rust as it will probably be useful to build anything non-trivial, even with the DSL. A good free place to learn Rust is The Rust Book.

solana/web3.js - A Solana version of web3.js that seems to work pretty well, but the documentation was almost unusable for me

React - The client-side framework

I will leave off all of the in depth details around how Solana itself works, as other people can cover this better than me. Instead I'll try to just focus on building something and sharing the details that you need to be know to accomplish this, along with things I think are of utmost importance.

If you want to learn more about Solana and how it works, here are a few good pieces:

Solana Docs Introduction

ok so what the fuck is the deal with solana anyway

Solana Summer

In this guide we'll focus mainly on project setup, testing, and front end client integration for building out a couple of types of applications, mainly focused on CRUD operations (without the delete of course), which I found to be somewhat undocumented (integration with client applications).

We'll also learn how to airdrop tokens to our own development accounts using the Solana CLI, and deploy our apps to both a local network as well as a live test network.

We won't be focusing on NFTs in this guide, but maybe I will focus on doing that in a future guide. For now, if you're interested in building an NFT marketplace on Solana, I recommend checking out Metaplex.

Prerequisites
This tutorial covers how to build a full stack app on Solana, but does not go into how to install all of the individual dependencies.

Instead, I will list the dependencies and link to the documentation for how to install them, as each project will be able to explain and document these things better than I ever could, as well as keep them up to date.

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

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.

Anchor (including the Mocha installation) - Anchor installation was pretty straight-forward for me. You can find the installation instructions here.

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

Getting Started
Before we get started building, let's take a look at the Solana CLI.

Solana CLI
The main things we'll be doing with the Solana CLI will be configuring our network (between localhost and a developer testnet) as well as airdropping tokens into our wallets, pretty much everything else we'll be doing with the Anchor CLI.

For instance, we can check the current network (and other) configuration with this command:
solana config get

output

Config File: /Users/user/.config/solana/cli/config.yml
RPC URL: https://api.devnet.solana.com
WebSocket URL: wss://api.devnet.solana.com/ (computed)
Keypair Path: /Users/user/.config/solana/id.json
Commitment: confirmed
If you do not have a Keypair path, set one up by following the instructions here

We can change the network like so:

set to localhost

solana config set --url localhost

set to devnet

solana config set --url devnet
This is important as you will need to be aware of which network you are using as you're building, testing, and deploying your programs. You also need to be sure your wallet is using the same network that your local environment is using when testing, something I'll cover.

We'll be starting by developing on a localhost network, then switching to the devnet network.

We can also use the CLI to see our current local wallet address:

solana address

And then get the full details about an account:

solana account

or

solana balance