Photo by Allef Vinicius on Unsplash

Hi! Nice to see you all again! Today, we are going to start a new series. In this new series, we will talk about how to make a fullstack Solana Web app. In this first passage, we would show you how to host a website using ExpressJS and how to connect your web app to Phantom Wallet. In latter passage, we would talk about how to connect Solana Pay and other Solana features to your web app.

So, let’s get started!

1. Setup your Own VPS

So, the first thing you need is a cloud server or VPS server. If you do not have one, dont’ worry. You may click this referral link to setup one in Digital Ocean. You would get USD100 credit to be spent in 60 days.

So, assume you setup one on your own. You should have your access details to login to your server as root. So, now, let’s login with these information:

$ ssh root@your-vps-ip

2. Add User

As your website might be public facing, you have to be very careful to follow strict security measures. Otherwise, your website might get hacked.

In Linux, it is very important that you should not run any program under root. So, now let’s add another user called solana:

$ adduser solana

Now, add to sudo group

$ usermod -aG sudo solana

So, now you can switch to solana user to continue your works:

$ su - solana

3. Adding a Remote Sublime Access to VPS

Sometimes, you may find it so hard to edit script using Nano or Vim on VPS. So, in this article, I also show you how I use Sublime remote access to edit script on VPS. So, first, download rmate on VPS.

$ sudo curl -o /usr/local/bin/rmate https://raw.githubusercontent.com/aurora/rmate/master/rmate
$ sudo chmod +x /usr/local/bin/rmate
$ sudo mv /usr/local/bin/rmate /usr/local/bin/sublime

Now, on your local machine, download sublime3 from their website. Then, go to Tool > command Palatte and then type “Package Control: Install Package”, and then type “RemoteSubl”. Then, install it.

Then, you logout and ssh to your VPS again using below command:

$ ssh -R 52698:localhost:52698 [your_user_name]@[your_servers_ip_address]

Then, whenever you use below command to open a file, your sublime3 can access to it as well:

$ sublime [filename]

4. Installation and Setup

First, what you need is update the system, install nginx server. Niginx is an reverse proxy commonly used in web applications.

$ sudo apt-get update -y && sudo apt-get upgrade -y && sudo apt install nginx -y

Check if your nginx is properly installed:

$ systemctl status nginx

Now setup your firewall:

$ sudo ufw allow proto tcp from any to any port 22
$ sudo ufw allow proto tcp from any to any port 80
$ sudo ufw allow proto tcp from any to any port 3000
$ sudo ufw enable
$ sudo ufw allow 'Nginx HTTP'

For the backend server, we would use Express JS in this article. So, we need to install Node JS as well.

First, install nvm, the nodeJS package manager:

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

Now, add nvm command to your linux:

$ source ~/.bashrc

Check if your nvm properly installed:

$ nvm — version

Then, use following command to check latest version of nodejs

$ nvm ls-remote

In this article, we will be using nodejs v16.15.0. To download this version, you may use following command:

$ nvm install 16.15.0
$ curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
$ sudo apt-get install -y nodejs

Now, you should be able to install all above in your Ubuntu Box. Now, install yarn:

$ sudo npm install -g yarn

Finally, you can install express JS:

$ npm install -g express

5. Initiate your Project

Now, create a new project:

$ mkdir solanaApp
$ cd solanaApp
$ npm init -y
$ npm install express

Now, let’s try out a simple hello world program. In the folder, create a file called “node.js”. Then, input below code:

const express = require('express')
const app = express()
const port = 3000app.get('/', (req, res) => res.send('Hello World!'))app.listen(port, () => console.log(`Server listening at http://localhost:${port>

Now, save it and run below code to start the website:

$ node app.js
Server listening at http://localhost:3000

Now, open another console and type below code:

$ curl localhost:3000
Hello World!

If you see “Hello World!” in response, congratulations! You completed the first step!

6. Configuring Nginx

Now, access below file:

$ sudo nano /etc/nginx/sites-available/default

scroll down to server_name and change it like below:

server_name localhost;location / {
proxy_pass http://127.0.0.1:3000/;
}

Now, check if the Nginx config file is ok:

$ sudo nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

If it responded like above, that means it is fine.

Now, try restart Nginx

$ sudo systemctl restart nginx

And start the server again:

$ cd ~/solanaApp
$ node app.js

Now, type your VPS IP in your browser. You should see hello world showing on your window.

7. Make a Button Connect to Phantom Wallet

Now, let’s make a connect button to allow user to connect to Phantom Wallet. First, let’s amend the code in app.js to below:

const express = require('express')
const app = express()
const port = 3000
const path = require ('path')app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname, '/index.html'));
});app.listen(port, () => console.log(`Server listening at http://localhost:${port}`))

So, now, instead of returning “Hello World” , your expressJS app would return what inside index.html instead.

Now, let’s make a connect button that allows user to connect the webapp with their Phantom Wallet:

<button onclick="connectWallet()">Connect</button><script> 
async function connectWallet(){
   try {
      const resp = await window.solana.connect();
      pubKey = resp.publicKey.toString();
      console.log("Connected to the server? "+window.solana.isConnected+" and your public key is "+pubKey);   }catch (err) {
   }
}
</script>

When it finish, fire up your server again by using commandnode app.js . Then, access your VPS IP from your browser. You may find a button there to allow user to connect to their wallet. After clicking on the connect button, your Phantom Wallet on Browser extension would pomped up. Then, enter your password, you would fine below text in console:

Connected to the server? true and your public key is <public key of your Phantom Wallet>

Conclusion

Congratulations! You now have made your website a function to connect to Phantom Wallet. So, in next articles, we would talk more about how to make payment functions etc. If you are interested, stay tuned to this series. Cheers!