Deploy Cosmos/Starport Dapp to DigitalOcean

The base VUE application that comes in Cosmos’ Starport can be run locally via npm run serve. However what would be a fast way to test it in production or an staging environment? It’s important to understand this process before considering automating it with Terraform, build and release pipelines.

Warning: This is meant to provide an understanding of how a Cosmos Dapp could run in a cloud provider. There are additional things are are not covered on this guide such as security, ssl certificates configuration, etc.

This is a continuation of the guide from yesterday that covered how to manually deploy your blockchain to multiple nodes. You can see that guide here.

At first you might think running it on the same node where the blockchain was created on the previous but I believe that would not be a good practice. Specially if a small DigitalOcean droplet is used while testing. It will run out of memory quite quickly.

A good solution would be creating a separate repository for the Vue Dapp application, creating a Git action to build a production release and then deploying the production release to a web server of choice. However, In this example I will share how to quickly get it up and running on a DigitalOcean droplet with a light weight PM2 http instance. We will then configure a domain name for it.

Step 1

Create a new DigitalOcean droplet. You can use any cloud provider. I will call this DigitalOcean droplet appServer with ip 134.122.28.115 . Select one with at least two GB of memory to prevent running into issues with npm. Add your SSH key for easy passwordless access.

Step 2

Login to appServer

ssh root@134.122.28.115

Step 3

Create a new user called “appuser” to run the application with. (Make sure to save the user’s password).

adduser appuser

Then run

usermod -aG sudo appuser

To be able to login as appuser, copy the ssh public key to the new home directory for appuser:

rsync --archive --chown=appuser:appuser ~/.ssh /home/appuser

Switch to the new user

su - appuser

update apt

sudo apt update

Install npm

sudo apt install npm

Step 4

Clone the repository that contains the Vue app. In this case we will clone the entire starport repository I created on the previous guide which was created during the scaffolding.

git clone https://github.com/daniel-farina/myblockchain.git

Navigate to the vue directory

cd myblockchain/vue

Install npm dependencies

npm install

Step 6

Configure the environment file. Copy the sample .env.spn as .env in your vue directory.

cp .env.spn .env

Edit the urls for the Tendermint API, BlockChain API, Address Prefix, Chain ID, Chain Name.

For example the VUE_APP_API_COSMOS would be your Blockchain API on port 1317. VUE_APP_API_TENDERMINT is lives on port 26657

VUE_APP_API_COSMOS=http://159.223.108.208:1317
VUE_APP_WS_TENDERMINT=ws://159.223.108.208:26657/websocket
VUE_APP_API_TENDERMINT=http://159.223.108.208:26657/
VUE_APP_ADDRESS_PREFIX=cosmos
VUE_APP_CHAIN_ID=spn
VUE_APP_CHAIN_NAME="Starport Network"

Build production.

npm run build

Step 5

Start a simple web server with PM2

Install PM2

npm install pm2@latest -g

Start the pm2 web server on the dist folder on port 80

cd dist
sudo pm2 serve --spa --name app --port 80

See the free monitor pm2 comes with

sudo pm2 monit

You can manage the process with pm2 delete|restart|stop app.

Learn more about this neat PM2 option here: https://pm2.keymetrics.io/docs/usage/expose/

Step 6

Access your Dapp on the web browser. The Dapp would be accessible on the ip address of your DigitalOcean server. For example http://134.122.28.115

Step 7

Setup your Dapp the run behind a domain name. This assumes you are familiar with Cloudflare.

Go to your Cloudflare Account and add a domain name. Select the free option. Create an A record and point it to your IP.

You should now be able to open the website with your domain name.

Step 8

This is optional. Setup your Tendermint API, BlockChain API to run behind a domain name. Currently the APIs are accessible via the IP address. In order make them accessible via a domain name just add an A record on your domain name pointing them to the Blockchain API.

Edit your .env. In this example I will call them rpc.alpha & rest.alpha so you will end up with a configuration like this:

VUE_APP_API_COSMOS=http://rest-alpha.fugaz.network:1317
VUE_APP_WS_TENDERMINT=ws://rpc-alpha.fugaz.network:26657/websocket
VUE_APP_API_TENDERMINT=http://rpc-alpha.fugaz.network:26657/
VUE_APP_ADDRESS_PREFIX=cosmos
VUE_APP_CHAIN_ID=spn
VUE_APP_CHAIN_NAME="Starport Network"

In order for the changes to take effect in production rebuild it and restart the pm2 process.

Note that app is the name of the PM2 process and it must be ran with sudo.

npm run build
sudo pm2 restart app

The application should be accessible via your domain name.

In this example it would be: http://fugaz.network/ if you open the console you will see it’s calling the domain name instead if the IP.

Please make sure to visit the Starport website to learn how to get started developing a Cosmos Blockchain & Dapp.

TODO: SSL