How to Create a full-stack application connected to a Solana RPC API
The blockchain is still a mysterious territory for many of its users, but in the end, it’s just a huge database with free information that we should be taking advantage of. In this tutorial we’ll walk you through on how to connect to a RPC endpoint and start using Solana live data on your application. We’ll be using the Shakudo platform to speed up our development process, so we can do all development, integration and deployment in just one place.
Overview:
1. Introduction
2. Build your environment
- Create a free Shakudo account
- Start your development environment
- SSH Connect your VS Code to the platform (optional)
- Install the necessary dependencies
3. Develop your application
- Connecting to the RPC endpoint
- How to call different methods
- Commit your changes to Github
4. Deploying your application
- Create .yaml and .bs files
- Host a new service
Build your environment
Create a free Shakudo account
Let’s start by creating a free Shakudo account. This will give you access to all the tools you’ll need for the end-to-end development of your application.
Start your development environment
Now, assuming that you’re connected to the Sandbox, the next step is to create a new Session for your development environment to be built on. A basic image is enough for the purposes of this tutorial, so can go to: Sessions > Start a new Session > Session type: Basic > Start. The image build can take around 3 minutes depending on the availability of the node.
When your session is ready, you can click on the Open your Session button to be redirected to our online IDE. There you’ll be able to find multiple tools from our development kit that you can use on the Virtual Machine you just created. But if you prefer to code your projects using VS Code, you can quickly SSH connect following these instructions:
SSH Connect your VS Code to the platform (optional)
Once your environment is ready, Click the < > button to copy the SSH command needed for the next steps.
Paste the SSH command into the terminal of your VS Code
1.6 Go to View > Command Pallet > Search for: Remote Explorer: Focus on SSH Targets View > Add New > Paste the SSH command > Click on Connect to Host in a new window.
Now you're ready to start building your application through VS Code. Remember to create your project on the ‘gitrepo’ folder so it can be easily committed and deployed later on the tutorial.
Install the necessary dependencies
To start your Solana node environment, start by installing the binary ships with the Solana CLI Tool Suite. You can do this by following the tutorial available on the Solana documentation page.
If you’re building a Javascript application, use the the solana-web3.js library to interact with the Solana node. You can read more about the setup and documentation of this library by going through their githup repository.
Develop your application
Connecting to the RPC API
To generate a Shakudo Solana RPC API key fit for you or your team, you can contact us on Discord and we’ll quickly provide you with a suitable one for your application needs. After you receive your RPC API key, connect your virtual machine to it by running the following command on the terminal:
*Remember to change the url to the one provided by the service
How to call different methods
Now that your endpoint is connected to your development server, we’ll show you how to call the methods inside your Javascript application.You can go through the Solana documentation on this and see more details on all methods available. For this example, we’ll use the method “getLargestAccounts”.
This method returns the 20 largest accounts at the present time on the Solana network.
Parameters:
- <object> - (optional) Configuration object containing the following optional fields:
- (optional) Commitment
- (optional) filter: <string> - filter results by account type; currently supported: circulating|nonCirculating
The result will be a RpcResponse in JSON containing information about the object address and lamports. Given that 0.000000001 SOL is equal to 1 Lamport.
You can request this method by running the curl command:
You can also use the following route for the backend of your application:
Commit your changes to Github
In order to save file changes on the server, you’ll need to push them to Github through the terminal. Remember adding the folder node_modules to .gitignore.
Deploying your application
When you’re ready to deploy to production, you can go to the Service tab on the Shakudo Platform.
Create .yaml and .sh files
These files are used for connecting with each other to your production environment. On the .yaml file, paste:
Run.sh is a bash file that you’re using the .yaml file to run. Here we add the terminal command necessary to run your application. Add here all the packages you might need.
The next step is to edit the package.json file. Go to package.json and edit the following:
On line 4: “root”: “homepage”: “https://sandbox.hyperplane.dev/my-rpcapp-folder/”. Change ‘my-rpcapp-folder’ for the prefix of your preference.
On line 16: “scripts”: “start”: "HOST=0.0.0.0 PORT=8787 react-scripts start”
Host a new service
Now that you’ve set up your whole environment, the worst part is over and it’s time to deploy your application! For this, go to Services on the homepage of the Shakudo Sandbox.
When creating a new Service, you’ll see the following page:
Once you see this, take the following steps:
- Give your website a name and untoggle the “Virtual Service Path Rewrite” button.
- On Service URL Prefix, match it with the same one you used for your homepage URL on the package.json file.
- Copy the path of your .yaml file and paste it to the Pipeline YAML Path* field. The folder ‘gitrepo/’ should not be included.
- Click the Create button.
- Refresh the page and you’ll be able to access your service endpoint and check the logs for errors on the View Menu.
That’s it. You’ve successfully created and deployed a full-stack application connected to a Solana blockchain API. Your website is online and you can easily build, test and deploy it just by clicking a few buttons. Thank you for following this tutorial and now the power is yours, with access to a huge source of streaming data you can take value of, get creative and start building!