Our great sponsors
-
complete-guide-to-full-stack-solana-development
Code examples for the blog post titled The Complete Guide to Full Stack Solana Development with React, Anchor, Rust, and Phantom
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
hardhat
Hardhat is a development environment to compile, deploy, test, and debug your Ethereum software.
The code for this project is located here
Node.js - I recommend installing Node using either nvm or fnm
Node.js - I recommend installing Node using either nvm or fnm
import './App.css'; import { useEffect, useState } from 'react'; import { Connection, PublicKey } from '@solana/web3.js'; import { Program, Provider, web3 } from '@project-serum/anchor'; import idl from './idl.json'; import { getPhantomWallet } from '@solana/wallet-adapter-wallets'; import { useWallet, WalletProvider, ConnectionProvider } from '@solana/wallet-adapter-react'; import { WalletModalProvider, WalletMultiButton } from '@solana/wallet-adapter-react-ui'; const wallets = [ /* view list of available wallets at https://github.com/solana-labs/wallet-adapter#wallets */ getPhantomWallet() ] const { SystemProgram, Keypair } = web3; /* create an account */ const baseAccount = Keypair.generate(); const opts = { preflightCommitment: "processed" } const programID = new PublicKey(idl.metadata.address); function App() { const [value, setValue] = useState(null); const [connected, setConnected] = useState(false); const wallet = useWallet(); useEffect(() => { window.solana.on("connect", () => setConnected(true)); return () => window.solana.disconnect(); }, []) async function getProvider() { /* create the provider and return it to the caller */ /* network set to local network for now */ const network = "http://127.0.0.1:8899"; const connection = new Connection(network, opts.preflightCommitment); const provider = new Provider( connection, wallet, opts.preflightCommitment, ); return provider; } async function createCounter() { const provider = await getProvider() /* create the program interface combining the idl, program ID, and provider */ const program = new Program(idl, programID, provider); try { /* interact with the program via rpc */ await program.rpc.create({ accounts: { baseAccount: baseAccount.publicKey, user: provider.wallet.publicKey, systemProgram: SystemProgram.programId, }, signers: [baseAccount] }); const account = await program.account.baseAccount.fetch(baseAccount.publicKey); console.log('account: ', account); setValue(account.count.toString()); } catch (err) { console.log("Transaction error: ", err); } } async function increment() { const provider = await getProvider(); const program = new Program(idl, programID, provider); await program.rpc.increment({ accounts: { baseAccount: baseAccount.publicKey } }); const account = await program.account.baseAccount.fetch(baseAccount.publicKey); console.log('account: ', account); setValue(account.count.toString()); } if (!connected) { /* If the user's wallet is not connected, display connect wallet button. */ return (
) } else { return (); } } /* wallet configuration as specified here: https://github.com/solana-labs/wallet-adapter#setup */ const AppWithProvider = () => ( ) export default AppWithProvider;{ !value && (Create counter) } { value && Increment counter } { value && value >= Number(0) ? ({value}
) : (Please create the counter.
) }
React - The client-side framework
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.
Related posts
- How to Build an AI FAQ System with Strapi, LangChain & OpenAI
- Javascript Date() - DateOnly Format and off by 1 day when using date-fns
- Meteor v3 uses express under the hood – How to use and deploy it.
- Effective nodejs version management for the busy developer
- 👨🚀 Traversing Time with Intl.RelativeTimeFormat()