Another one

Accelerated Guide to Fullstack Web3 with ASS (Anchor, Solana, and Svelte) 🍑

Accelerated Guide to Fullstack Web3 with ASS (Anchor, Solana, and Svelte)

In this tutorial, you'll learn how to build from scratch a fullstack Web3 dApp with the ASS stack - the hottest Solana tech stack!

You do not need any Rust experience to follow this guide, but it would be helpful to have a general understanding of how dApps work at least from a user’s perspective (all that connect wallet, approve transaction kind of stuff).

You can find the finished project in this repo. If you have any questions, ping me on Twitter @0xMuse.

I’ll skip the further mumbling on why ASS stack is thicc because it is self-evident. Let’s dive straight in!

Preview of our app

We are building an app called “gm Solana” - a guest book app where users can log in with their Solana wallets and drop a “gm” to their frens.

Although the app is simple, you will be able to understand intuitively how Solana apps work, and get a hands-on experience with the most important skills and concepts developing a fullstack Solana dApp - the typical workflow, read and write blockchain data, connect the blockchain with your frontend app, authentication, etc.

Our tech stack

First, let's have a look at what the ASS stack covers:

Anchor - The de facto high-level framework for Solana
Solana - The reason why are you reading this
Svelte - A blazing fast frontend framework (actually it’s a compiler), an alternative to React
🍑 - The peach emoji, which is often associated with the word “ass”

In addition, we’ll also integrate our app with:

Phantom - An awesome Solana browser wallet
@solana/web3.js - The Javascript library bridging client-side and the Solana network
TypeScript - Frankly, I just can’t work with Javascript... Besides, most Solana tutorials available right now are written in JS, and to get everything working with TS sometimes needs some extra effort, so I hope this tutorial proves helpful

I’ll also be using VS Code. If you haven’t done it yet, you need to install the Svelte and Rust extensions to follow along this tutorial.

Step 0. Install and set up Solana

Before we start, you need to install the necessary tools. M1 Macs used to have some issues setting things up for the Solana Tool Suite, but now there is an official binary build for the M1 architecture, so the process has become pretty straightforward.

Install Rust

First, you will need to install the Rust toolchain.

curl https://sh.rustup.rs -sSf | sh
source $HOME/.cargo/env
rustup component add rustfmt

Install Solana Tool Suite

To install Solana, you can simply run the installation script. I’m specifying to install v1.9.4:

sh -c "$(curl -sSfL https://release.solana.com/v1.9.4/install)"

Note that if you are using zsh, you need to update your PATH.

After it is finished, you can verify if the installation is successful with the following command.

solana --version

Now, you can run the test validator (a local testnet) to see if everything works correctly with command solana-test-validator.

Let’s stop the test validator for now and move on!

Install Anchor

Anchor is the recommended framework for Solana programs.

Note that Anchor uses Yarn v1 to manage Javascript dependencies in your project, so make sure you already have it installed on your computer.

Let’s build the Rust code from source, it’s pretty straightforward:

cargo install --git https://github.com/project-serum/anchor --tag v0.20.1 anchor-cli --locked

Then, you can verify if the installation is successful with:

anchor --version

Install Phantom Wallet

The Phantom Wallet is a browser extension that takes care of connecting your Solana wallet and the dApp you are visiting, as well as the Solana blockchain. You can get it from their official website and follow their instruction to set it up.

If you have used MetaMask with EVM compatible networks before, you are then already familiar with how it works.

And that’s it. Let’s have some real fun!

Step 1. Create an Anchor project - gm Solana!

gm-solana

To kick off, use Anchor to initialize a project and open it in VS Code:

anchor init gm-solana
cd gm-solana
code .

What we’ve got here are some config files and a few subdirectories:

app - where our client-side Svelte app will be
migrations - deployment scripts
programs - smart contracts
tests - the name says it all ;)

Set up keys

If you haven’t played with Solana on this machine yet, you will need to run solana-keygen new to generate a new key. The passphrase can be empty.

The new key is saved at ~/.config/solana/id.json.

You can also use the key generated from your Phantom wallet, but I’m just going to use separate ones in this tutorial for clarity.

Configure Solana to use localhost

Next, run the following commands to set the network to localhost, and check the current settings:

solana config set --url localhost
solana config get