4 Steps to Deploy a React app on a Kubernetes Cluster on AWS
Tags: aws, kubernetes, react, deploy
Published: 2022-11-15 21:49:39

React is one of the most popular, most used, and according to [The State of Frontend report](https://tsh.io/state-of-frontend/#over-the-past-year-which-of-the-following-frameworks-have-you-used-and-liked), the most loved frontend framework by developers. In this article we’ll deploy a ReactJS application on a Kubernetes cluster on AWS, using Microtica’s production-ready templates. 

## Why deploy React on Kubernetes?
Here are some of the reasons why it would be a good idea to deploy your React application on Kubernetes: 

- Advanced features, such as canary deployments, blue-green deployments, zero-downtime deployments etc. 
- Auto-scaling makes it possible to handle peaks in traffic 
- Horizontal scaling to minimize downtime
- A/B testing by running two release versions on separate container sets

## Getting started
To deploy React on AWS, you need the following templates:
- [Amazon EKS](https://app.microtica.com/templates/new?template=https://raw.githubusercontent.com/microtica/templates/master/aws-eks/template.yaml)
- [ReactJS](https://app.microtica.com/templates/new?template=https://raw.githubusercontent.com/microtica/templates/master/reactjs/.microtica/template.yaml)
This will setup a production-ready solution in less than 20 minutes.

## One-click Deploy
Click Deploy with Microtica below and follow the template steps to deploy your ReactJS application on your AWS account.

[![One-click deploy on Microtica](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/inuoev8e3czmnxjbcn7v.png)](https://app.microtica.com/templates/new?template=https://raw.githubusercontent.com/microtica/templates/master/reactjs/.microtica/template.yaml&utm_source=medium&utm_medium=one_click_deploy_button&utm_campaign=react)

## Prerequisites
- [Create a Microtica account](https://app.microtica.com/auth/signup?utm_source=devto&utm_medium=blog&utm_campaign=react) by signing up with your email or your Git account.
- You need to have an AWS account to be able to deploy a react app to your AWS account. Here you can [sign up for an AWS account](https://aws.amazon.com/).

## 1. Create Git Repository
Once you signup for Microtica, you’ll be presented with the Onboarding screen, and there you can find the ReactJS template. Clicking the **_Deploy app_** button will lead you to the Templates page - a list of Microtica’s production-ready templates. There you can also find the ReactJS template and select it. 

The first step is connecting a Git account. Microtica supports the major Git providers, like GitHub, Bitbucket, GitLab and CodeCommit. Once you connect your preferred provider, you’ll see the section change into creating a repository where your ReactJS app code will reside. 

Microtica defines a repo name by default for each template, but you can change it. We will create a new repository on your account with the provided name, and every Git push will be deployed automatically in Microtica.

![Create Git Repository in Microtica](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/so6bqfq7547qd0p36twv.png)

This template is bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

If you already have a ReactJS application source code, follow the guide on [How to import your existing application in Microtica](https://docs.microtica.com/import-an-existing-nodejs-application?utm_source=devto&utm_medium=blog&utm_campaign=react).

## 2. Customize the Template
After creating your repository, you need to give your application a name in Microtica, to be able to distinguish it from other apps in the Applications tab.

![Configure template in Microtica](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hb7s4avkd3jcvqaj9x0l.png)


You can customize this template to meet your requirements with environment variables. You can update the configuration later in **_App Settings_**.

## 3. Create an EKS cluster
In step number three, you can choose the Kubernetes cluster where your application will deploy. Deploying on your AWS account means you need to create an AWS managed-Kubernetes (EKS) cluster, and you can start that process by clicking on the **_Create Amazon EKS Cluster_** button. 

![Choose where to Deploy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w96u891dk8a9ptvxzliw.png)


We recommend deploying your production applications on AWS, as it gives you full ownership of your cloud infrastructure and applications.

![Create Amazon EKS Cluster](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3h375taxmp4x8tj1ynr2.png)

Clicking the **_Create Amazon EKS Cluster_** button will open the popup shown in the image above. Here you select the environment in which you want this cluster to be deployed. If you don't have an existing environment, you can create one by selecting the **_Create Environment_** action from the dropdown menu.

After selecting an environment, you need to select an AWS account and region where the EKS cluster will be deployed. If you haven’t connected an AWS account yet, you can do it right here by clicking the **_Connect AWS Account_** button. This will initiate a CloudFormation stack that will give Microtica permissions to provision infrastructure on your AWS account. Once you create the stack, the connection will be established automatically and you'll be able to see the AWS account in the dropdown list of accounts.

Select the account, select a region, and then click on **_Continue_** to move to the deployment of your environment.

## 4. Deploying the ReactJS app to Kubernetes
Once you’ve selected the cluster, you will see a summary of all the previous steps and what will be deployed with this template.

![App Deployment Process in Microtica](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zqvnb7d7n7rkeczx4kc1.png)


Clicking the **_Deploy_** button will trigger a deployment of the environment and start creating the infrastructure (the EKS cluster), deploying it on your AWS account, and then deploying the application on that infrastructure. 

It will take approximately 15-20 mins for the React app to be deployed on a new EKS cluster.

You can follow the detailed real-time deployment logs by clicking the **_View deployment_** button.

![Real-time Deployment in Microtica](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g1ot6mu78thp0rxo7gnd.png)

When the deployment of a new EKS cluster is finished, click the **_View logs_** button to follow the deployment process of the React app.

![Deployment logs in Microtica](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1xtuhzcd8qkh6v23xh51.png)

## 5. Access the application
When the deployment is finished, you will see a View Application button leading you to the app Overview tab.

![Application Access in Microtica](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wlshp25e3p7gi5j2w8ux.png)

Since you deployed on your EKS cluster on AWS, you need to expose your application to the internet, so follow this guide to [enable external access to your apps](https://docs.microtica.com/expose-apps-on-the-internet?utm_source=devto&utm_medium=blog&utm_campaign=react).

For even more information, you can also look at the **_Deployments_** and **_Monitoring_** tabs, where you have the pipeline history, resource consumption metrics, and logs for your instances.

To learn more about how to scale your ReactJS application in Microtica, read the following article about [Scaling Applications in Microtica](https://docs.microtica.com/scaling-applications-in-microtica?utm_source=devto&utm_medium=blog&utm_campaign=react).

## Bonus: Cleanup
To undeploy your application in Microtica, navigate to the app, in **_App Settings → Danger Zone_**, and delete the application. 

To remove all the resources created on your AWS account, navigate to your environment (demo in our example) → **_Environment Settings → Infrastructure_**, and you’ll see the **_Undeploy _**section. 

This will clean up the resources created in AWS, but you will still have the configuration in Microtica in case you want to deploy it in the cloud again.