A guide to deploying a Static React App on Akash Network Cloud | Tekraze

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 react-scripts@3.4.1 -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 some issues and changed the URL to https://12eensunnhd31d2fb7fdnlg5ek.provider.dehazelabs.com/

Demo image

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.

Originally published at [Tekraze.com](https://tekraze.com/deploy-a-static-react-app-on-akash-network-cloud/) and posted under [Dehazelabs blog](https://blog.dehazelabs.com/) by me