Make your React app hosting ready!!!
Host your React PWA, SSR, dockerized web app in AWS using terraform
Make your react app more awesome 😎😎😎
After spending hours developing and writing a hell lot of code 🥱, if we don't make it hosting friendly, there will be many performance issues when the end product reaches your clients or users. 😦
React app generally made using CRA template is not hostable. One must make sure the below points:
- Making your react app a progressive web app so that it's mobile-friendly and look like a native app, which most of us want to see
- Should be Service side rendered for enhancing performance and also for SEO reasons. You will get to know more as you keep reading. 😗
- Dockerize your react application before hosting
- Host it on any of the cloud providers. I am using AWS to automate the cloud infrastructure as code using Terraform.
By the way, this article basically is made to put all things in one place. After reading many articles, watching many videos, and finally, put the whole content and the working code explained most simply and finely possible way, in one place 😱. I assure you won't regret spending your time on this. 😌
Do consider applauding my articles and following me for more updates. 😉
Progressive Web App
Read my article to convert the react app to a PWA in just 5 minutes.
In addition to that, learn how to enable web push notifications using firebase for the react app and any web application in the simplest way possible.
Enable Web Push Notifications using Firebase
Read my article to enable web push notifications using firebase cloud messaging explained in the easiest way possible.
React Server-Side Rendering
Server-side rendering is essential when it comes to search engine optimization and performance.
Read my article to implement SSR in react.
There are some more criteria to make the react app search engine optimized, which I will be explaining in my next article. Follow me if you don't want to miss it.
Dockerize your React app
Read my article to dockerize your react app in just 5 minutes.
Compose is a tool for defining and running multi-container Docker applications. With Compose, you use a YAML file to configure your application’s services. Then, with a single command, you create and start all the services from your configuration. … Run docker-compose up and Compose starts and runs your entire app.
We have used docker-compose also since we are using node and nginx images. What are you waiting for? Read the article to dive into docker and practical implementation in react.
Deploy in AWS using Terraform:
The final step…😗😗😗
After dockerizing, implementing SSR, converting to a PWA, we are all set to deploy it 🤩
Read my article to deploy your dockerized application in AWS using terraform in just 5minutes.
In my next articles, I will go deep into terraform and aws, and explain how to use aws ecs (which is Amazon Kubernetes) and ecr. Don't forget to follow me if you don't want to miss them.
Looks like my work is done here. If you have any doubts feel free to comment or reach me here 😃
Do consider applauding my article and following me for more such awesome content 🤩🤩
