Developing on Solana

This is my Solana Web and Application Development Tutorial.

This is the basic read me, that will introduce you to Solana Development,

the tools required, what is possible, and the different programming languages,

functions, and logics that are used in modern day Solana Development.

This Guide, will be live on the ord library shortly,

and will act as the foundation for the Solana Section of the library.

This will allow users to:

Create their own Solana Web Application, using web3.js,

SWA or Solana Wallet Adapters, and much much more.

So Let's get started. What we are creating are literally Solana Web dApp's.

Connecting your tools to your users' wallets is a crucial step.

Solana provides two helpful tools to get you started: Solana Wallet Adapter and Solana dApp Scaffold.

What You Will Do

• Learn about Solana Wallet Adapter

• Deploy the Solana dApp Scaffold

• Customize your environment

• Create a simple dApp to query a connected wallet

What You Will Need

• Node.js (version 16.15 or higher)

• A Solana wallet (e.g., Phantom)

• Experience with Solana Web3 and Solana SPL Token Library

• Typescript experience and ts-node installed

• Basic knowledge of HTML/CSS

Experience with front-end web development will be helpful but not required. We'll be using Next.js with React, but the Solana community also supports Vue, Angular, and Svelte.

What is the Wallet Adapter?

Have you noticed that many Solana dApps have a similar UI for connecting to wallets? That's the Solana Wallet Adapter ("SWA"). It's easy to use, supports over a dozen Solana wallets out of the box, and is regularly maintained by the Solana community. SWA is a set of Modular TypeScript wallet adapters and components for Solana applications, allowing you to easily connect your dApp to your users' wallet of choice.

Why Use SWA?

• Open source and supported by Solana Labs

• Supports multiple wallets without headaches

• Includes a customizable UI

• Includes Anchor support

• Key functionalities like Connect, Disconnect, Auto-connect

• Supports multiple front-end frameworks

Set Up Your Environment

SWA supports various front-end frameworks, including React, Vue, Angular, and Svelte. You can add these packages to your existing projects using npm. For this example, we'll use the Solana dApp Scaffold, which includes SWA and pre-built components to help you get started quickly.

1. Create a new project directory:

   bashCopy codemkdir my-solana-dapp
   cd my-solana-dapp

2. Clone the dApp Scaffold:

   bashCopy codegit clone https://github.com/solana-labs/dapp-scaffold.git .

   The . clones the scaffold into your project directory without creating a new directory inside it.

3. Install dependencies:

   bashCopy codenpm install
   # or
   yarn install

4. Add the SPL-token Library:

   bashCopy codenpm i @solana/spl-token
   # or
   yarn add @solana/spl-token

5. Verify that everything was copied correctly:

   bashCopy codels

   Your terminal should display the contents of your project directory.

Conclusion

You're now set up to build and deploy Solana dApps for the web using Solana Wallet Adapter and Solana dApp Scaffold. Start by exploring the dApp Scaffold and customize it to suit your needs.