Giter Club home page Giter Club logo

complete-guide-to-full-stack-solana-development's Introduction

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

Code examples to go with the blog post available here

Header image

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 [email protected]: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

complete-guide-to-full-stack-solana-development's People

Contributors

dabit3 avatar nilomiranda avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

complete-guide-to-full-stack-solana-development's Issues

Saving state

Hi, thanks so much for this tutorial!

When we refresh we loose the state. I think the community would be really grateful if you explain us how to save the state in account as it is a basic feature.

Thanks!

`data_list` can't grow

This defines a hard 128 size limit on the collection of string to be added,

So this will fail with custom program error: 0xa4 when you try to say update it with some long length string.
ex. Some new data how long can this go before breaking apart?

Maybe this example can be updated with better examples using concept of PDA's.
I'm working on coming up with a better example that solves this using PDA's. Will PR soon.

TypeError: program.rpc.startStuffOff is not a function

Hi,
i'm facing this error can you please help me?

i'm running test using anchor test

anchor.setProvider(anchor.Provider.env());
const program = anchor.workspace.Myepicproject;
const tx = await program.rpc.startStuffOff(); // error is here

Update Anchor.toml wallet address

Thanks for the great content! Minor edit: user must update the wallet keypair file under [provider] in Anchor.toml before running anchor test to their local keypair (it currently reads /Users/ndabit/...).

Error: Invalid hook call

Hi,

When trying to run the frontend from any of the examples. I get greeted with the following error:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

I googled around and apparently it can happen if different version of react are used. In my case I only see one version, eventhough it's regerenced more than once but it's getting 'deduped':

├─┬ @solana/[email protected]
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ └── [email protected]
└─┬ @solana/[email protected]
  └── [email protected] deduped

To reproduce simply npm install in the app folder, then run npm start

Transaction simulation failed: Attempt to load a program that does not exist

Following this tutorial

I have followed all of the steps up to the point of building the counter code, including having a running localhost validator.

I have taken the output of solana address -k target/deploy/mysolanaapp-keypair.json

and input it in lib.rs and anchor.toml as instructed, and get the following after running anchor build and then anchor test:

mysolanaapp
Transaction simulation failed: Attempt to load a program that does not exist

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.