Make your React app hosting ready!!!

Host your React PWA, SSR, dockerized web app in AWS using terraform

Make your react app more awesome 😎😎😎

Image for post
Image for post

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:

  1. 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

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

Image for post
Image for post

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

Image for post
Image for post

Read my article to enable web push notifications using firebase cloud messaging explained in the easiest way possible.

React Server-Side Rendering

Image for post
Image for post

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

Image for post
Image for post

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:

Image for post
Image for post

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 🤩🤩

Web developer | Competitive Programmer — Visit github.com/kvssankar

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store