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.
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
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
and push somewhere like Github/GitLab or keep in local.
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.
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;"]
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.
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.
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.
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: trueprofiles:
compute:
web:
resources:
cpu:
units: 0.1
memory:
size: 128Mi
storage:
size: 256Mi
placement:
westcoast:
attributes:
region: us-west
pricing:
web:
denom: uakt
amount: 1000deployment:
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
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 are having some issues with port of provider, so currently the same app can be accessed at address by specifying port. https://1ulomkuct9a056t8cmqqroddeo.provider.dehazelabs.com:30413/
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.