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.
- React App
- DockerHub Account
- Akash Wallet Setup with some AKT Token
Check the article below on reading how to set up Akash wallet and other variables.
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.dehazel.. is the address to the deployment.
Note: We have fixed some issues and changed the URL to 12eensunnhd31d2fb7fdnlg5ek.provider.dehazel..
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 and posted under Dehazelabs blog by me