Easily Deploy a Static React App on Akash Network Cloud

Let us know how to Deploy a Static React App on Akash Network Cloud Decentralized Platform

We are gonna show, how to deploy a static react app built using React on Akash Network which is a Decentralized Cloud. This will help you deploy other web applications built with the same or different technologies on Akash Decloud Network.

So, what we will need.

1. React App
2. DockerHub Account
3. Akash Wallet Setup with some AKT Token

Check the article below on reading how to set up Akash wallet and other variables.

https://blog.dehazelabs.com/deploy-docker-apps-on-akash-decloud-network-ca40d2386b9a

---

1. Setting up the Static React App

So, I have already built one app in React + TS when I was trying to learn functional react (I am from angular background). The GitHub repo can be found at the below link. You can skip this step if you have your own app.

https://github.com/balvinder294/My-React-Resume/tree/dockerized

Download static react app from this link and change data

if you need to add your own data to this. Do steps

• replace profile-pic.jpg under public folder to replace image for resume
• replace your data in src/data.js file as JSON

and push somewhere like Github/GitLab or keep in local.

2. Dockerizing the static react app

So, now we have the app ready, we need to dockerize it before using it and push the image to the Docker hub so we can use it in our configuration while deploying to the Akash network.

a) Preparing docker file for static react app

This code is already added if you cloned the repo, if not add this to your Dockerfile.

# build environment
FROM node:lts-alpine3.13 as build
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json .
COPY package-lock.json .
RUN npm ci --silent
RUN npm install [email protected] -g --silent
COPY . ./
RUN npm run build
# production environment
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

b) build docker image of the react app

Run the below command using terminal in linux to create and tag the image.

sudo docker build -t balvinder294/react-resume:1.0.0 .

Here, balvinder294 is the username and react-resume the project name and 1.0.0 the version.

Note: You need to have a docker hub account with a repo configured with username and project. Do replace username and project before running commands.

c) Pushing the built docker image of react app

We built the image but we need to host it over the docker hub. So, we need to push the image.

Make sure you are logged in to the docker hub. If not log in with the below command on your terminal.

sudo docker login

then run the command to push the docker image

sudo docker push balvinder294/react-resume:1.0.0

The output of the docker push command will be like

The push refers to repository [docker.io/balvinder294/react-resume]
5086bf0da252: Pushed 
a7c11ed26fd5: Mounted from library/nginx 
6e8309ec6bfd: Mounted from library/nginx 
7ff80c2c03d5: Mounted from library/nginx 
35e4637a9d6c: Mounted from library/nginx 
b5d14f4aebad: Mounted from library/nginx 
b2d5eeeaba3a: Mounted from library/nginx 
1.0.0: digest: sha256:70cf15c59409a8e3aff9826e75ac9607b0728bbca22e91dfc6a3525c3f21685d size: 1778

so, we have pushed the image and now it is ready to be used in deployment. Now we need to move to the Akash configuration.

3. Akash DeCloud Network deployment steps

Please make sure Akash is set up in your system before continuing this. We have already mentioned all steps in the previous article, so we will only tell the configuration for this, keeping other deploy steps the same.

a) Create SDL file for react app we want to deploy

So, we here created our SDL file for deployment which is similar to docker except it includes, hosting configuration and resources we need to rent from Akash for AKT. Edit this file accordingly in your preferred text code editor.

---
version: "2.0"

services:
  web:
    image: balvinder294/react-resume:1.0.0
    expose:
      - port: 80
        as: 80
        to:
          - global: true

profiles:
  compute:
    web:
      resources:
        cpu:
          units: 0.1
        memory:
          size: 128Mi
        storage:
          size: 256Mi
placement:
    westcoast:
      attributes:
        region: us-west
      pricing:
        web: 
          denom: uakt
          amount: 1000

deployment:
  web:
    westcoast:
      profile: web
      count: 1

Note: we have set placement part according to our own provider, please refer to previous article on changing to akash specific providers

B) Now actually deploy react app

Now following deployment steps as same with current deployment file. We can now deploy the static react app.

Just for reference here is how the bid will appear on the query

bids:
- bid:
    bid_id:
      dseq: "2055098"
      gseq: 1
      oseq: 1
      owner: akash16hu2s7g3uf9ln0veqlv2q9pq7uqhnn6crkr9j6
      provider: akash1rt2qk45a75tjxzathkuuz6sq90jthekehnz45z
    created_at: "2055101"
    price:
      amount: "1"
      denom: uakt
    state: open
  escrow_account:
    balance:
      amount: "50000000"
      denom: uakt
    id:
      scope: bid
      xid: akash16hu2s7g3uf9ln0veqlv2q9pq7uqhnn6crkr9j6/2055098/1/1/akash1rt2qk45a75tjxzathkuuz6sq90jthekehnz45z
    owner: akash1rt2qk45a75tjxzathkuuz6sq90jthekehnz45z
    settled_at: "2055101"
    state: open
    transferred:
      amount: "0"
      denom: uakt
pagination:
  next_key: null
  total: "0"

We selected this provider for deployment.

Here is the output of the app deployment on the Akash decloud network.

{
  "services": {
     "web": {
        "name": "web",
        "available": 1,
        "total": 1,
        "uris": [
           "1ulomkuct9a056t8cmqqroddeo.provider.dehazelabs.com"
        ],
  "observed_generation": 1,
  "replicas": 1,
  "updated_replicas": 1,
  "ready_replicas": 1,
  "available_replicas": 1
  }
},
  "forwarded_ports": {}
}

Here 1ulomkuct9a056t8cmqqroddeo.provider.dehazelabs.com is the address to the deployment.

Note: We have fixed and changed the URL to https://12eensunnhd31d2fb7fdnlg5ek.provider.dehazelabs.com/

I will update the article when we fix the port part on our provider.

---

Summary

So, here we discussed how to deploy a static react app on Akash Network Cloud. Do let us know in the comments if you get any issues. We will add more Akash network related posts so you can learn web development and deployment with the Akash network.

As we are having a react app that is static and not having any dynamic data to save, we will not be using any database for now. But in the next examples, we may add.

Please do share as sharing is caring. Feel free to comment your views/queries in the comments below.