so-solana

A project I built by following along with the Buildspace Solana project instructions. Thanks Buildspace!

Prerequisites

Unless you're running this project on Gitpod, the requirements to run this project are to have the Node.js version installed that corresponds to the version in ~/.nvmrc in the root of this project. Using nvm is recommended for installing Node.js. Refer to the nvm installation instructions to get nvm set up.

Once nvm is installed, you can set up the project. If you opt to not use nvm, ensure that the Node.js version specified in ~/.nvmrc is installed.

Setup the project

Run the bin/setup.sh script to install everything.

There are known issues with the Windows installation using WSL (reminder that you need WSL installed) and with M1 Macs, so a friendly Google is your best friend. If you have figured out how to install it properly in those environments, please create an issue and open a PR linked to that issue.

Remember that you can use Gitpod if you are having issues with those environments.

Contributing

If you are interested in contributing to the project, first read our contributing guidelines. Take a look at our existing issues, or if you come across an issue, create an issue. For feature requests, start a discussion first.

Getting Started (Local Development)

1. Install the dependencies

   npm install
   # or
   yarn

2. Start the project

   npm run dev
   # or
   yarn dev

Open http://localhost:3000 with your browser to see the result.

Getting Started (Gitpod)

The project can be run in Gitpod. Navigate to https://gitpod.io/#https://github.com/nickytonline/so-solana. If you wish to load it in Gitpod as an external contributor, you will need to fork the project first, then open the fork in Gitpod, e.g. https://gitpod.io/#https://github.com/some_user_that_forked_the_repository/so-solana.

1. Gitpod will take a minute or two to load.
2. If this is the first time loading the project in Gitpod, it will take longer as all the npm packages are installing.
3. The project wil start automatically in developer mode and the app will load in the Gitpod preview window.

For move information on Gitpod, check out the Gitpod documentation.

Running tests

The project uses jest. For more information on jest, see the official documentation.

To run tests:

npm test
# or
yarn test

To run tests in watch mode:

npm test:watch
# or
yarn test:watch

Building out components

When building out components in the project, shared components can go in the components folder. Components can then be imported using the @components alias, e.g. import { ExampleHeader } from '@components/Header';.

Storybook

The project uses Storybook for building our components. For more on Storybook, see the official documentation.

Running Storybook

npm run storybook
# or
yarn storybook

Building Storybook Static Site

npm run build-storybook
# or
yarn build-storybook

Under the hood

Solana

A fast blockchain for DeFi, NFTs, Web3 and more. Check out the official Solana documentation.

Generate a keypair

Run the following commands to generate a keypair for Solana which will confirm the address and output the Solana configuration

solana-keygen new -s
solana address
solana config get

Airdrop yourself some SOL on the devnet

If you're working on the devnet, it's handy to airdrop yourself some SOL. You can do the same thing for localhost if you need to.

solana config set --url devnet
solana airdrop 5
solana balance

For any questions in regards to the commands above, refer to the official Solana documentation.

Anchor for Solana

A runtime for Solana

to build and deploy a Solana program, run bin/deploy-program.sh. Under the hood it runs anchor build, anchor deploy and a few other things.

Need to run tests? Do the following:

1. cd myepicproject
2. anchor test

Next.js

This is a Next.js project bootstrapped with create-next-app.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Theme UI

For more on theme UI, check out their official documentation.

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.