A Guide on How to Deploy a React App on Kubernetes

Deploying a React app can be as simple as putting static files behind a content delivery network. If you’re building something bigger, for a growing team or alongside other services, you may want more control over how it runs and rolls out. That’s where Kubernetes comes in. This guide explains why Kubernetes makes sense for some React apps, then deploys one to an Amazon EKS cluster in your AWS account with Microtica.

Why Deploy React Apps on Kubernetes

If you’re planning a React deployment on AWS with long-term scale in mind, Kubernetes offers more than basic hosting.

Auto-scaling Capabilities

Kubernetes handles traffic spikes with horizontal pod autoscaling. Based on CPU, memory or custom metrics, it adjusts the number of pods running your app, so performance stays steady without overprovisioning.

Canary and Blue-Green Deployments

Kubernetes makes zero-downtime release strategies practical:

• Canary deployments roll a new version out to a small share of users first.
• Blue-green deployments switch traffic between two versions, so you can roll back by switching back.

Easy Rollback and Version Control

Every rollout is versioned. If something goes wrong, you return to the previous version instead of rebuilding it.

A/B Testing

You can run two versions side by side in separate pods, route traffic between them with an ingress controller or a service mesh, and compare how they perform.

Common Ways to Deploy a React App

AWS S3 + CloudFront

For client-side rendered apps, the cheapest option is to build static files with npm run build, upload them to S3 and serve them through CloudFront. Microtica’s SPA on CloudFront template does exactly that, and the Strapi and React guide uses it. It’s fast and simple, but it doesn’t give you container-level rollouts.

Docker Containers

Packaging the app in a container with a web server such as Nginx standardizes how it runs. You build the image, push it to a registry and run it on any container host. That prepares the app for scalable deployments.

Kubernetes for Advanced Use Cases

For production systems that need high availability and controlled rollouts, you run the containerized app on Kubernetes, with rolling updates, scaling and monitoring built in. It’s more moving parts, which is the part Microtica takes off your hands.

Step-by-Step: Deploy a React App on Kubernetes with Microtica

You’ll use two templates from the Templates page:

• Amazon EKS creates a Kubernetes cluster in your AWS account.
• ReactJS creates a repository with a working React app and deploys it to that cluster.

Before you start, create a Microtica account, connect GitHub, GitLab or Bitbucket under Integrations, and have an AWS account ready. The cluster needs an environment on AWS with CloudFormation.

1. Add an Amazon EKS cluster

Skip this step if your environment already has a cluster. Otherwise open Templates, find Amazon EKS under Infrastructure and pick the environment. Name the cluster: letters only, up to 20 characters.

The node instance type and the minimum and maximum number of nodes keep their defaults, one t3.medium node, unless you change them. Then review and press Create and deploy.

If the environment has no AWS account yet, Microtica asks you to connect one. Creating an EKS cluster takes around 15 to 20 minutes. Keep in mind that AWS bills EKS clusters by the hour, even when nothing runs on them.

2. Create the React app’s repository

Back in Templates, open ReactJS under Services and pick the same environment. Microtica copies the ReactJS starter into a new repository in your Git account, named reactjs unless you change it.

The starter is a small working React app with a .microtica folder: the pipeline spec, a Dockerfile that builds the app and serves it with Nginx, and the Nginx configuration.

3. Pick the cluster and namespace

Choose the cluster from step 1 and the namespace the app runs in.

4. Name the app

The name takes lowercase letters only and shows across Microtica and in the cluster.

5. Review and deploy

The review lists the new repository, the cluster and namespace, and what happens next: the repository, a pipeline that builds every push to master, and the first build and deploy. Press Create and deploy.

6. Follow the run

Microtica opens the run. BuildApplication builds the container image, and DeployApplication rolls it out to the cluster. It usually takes a few minutes.

7. Give it an address

Services on a Kubernetes cluster aren’t exposed on a public address automatically. Open the app under Apps, go to its Settings and assign a domain. From then on, every push to master builds and deploys a new version.

Already have a React app?

Add it from Apps with Add, then A service from your repository, Your repository and Kubernetes. If the repository doesn’t have Microtica’s pipeline files yet, the review tells you it will commit them to the .microtica folder on your branch. Your app needs a Dockerfile there that builds it and serves the result, like the starter’s.

Troubleshooting Common Issues

Routing Issues with React Router

Problem: 404 errors when you refresh a page or open a nested route.

Cause: The web server looks for a file at that path instead of serving index.html.

Solution: Send every non-file request to index.html. In the starter, that’s the Nginx configuration in .microtica/nginx.conf:

location / {
    try_files $uri /index.html;
}

CORS Issues from Frontend to Backend APIs

Problem: The browser blocks API requests.

Solution: Return the right Access-Control-Allow-Origin headers from the backend, or serve the frontend and the API from the same domain. Proxy API calls during local development.

Failed Deployments

Common causes: a Dockerfile that doesn’t build, a cluster without enough room for the new pods, or missing environment variables.

Solution: Open the run and read the failed step’s log. Build errors show up in BuildApplication, rollout errors in DeployApplication. You can also ask Mica to investigate the failure. If steps don’t run as expected, check your CI/CD pipeline spec in .microtica/microtica.yaml.

Best Practices After Deployment

• Set up autoscaling. Raise the replica limits once you know your traffic, so Kubernetes can add pods under load.
• Monitor the app. Watch pod health, restarts and resource use, and catch problems before your users do.
• Keep releases small. Every push to master deploys, so short-lived branches and pull requests keep each release easy to review and roll back.
• Compress static assets. Minified bundles and gzip or Brotli compression cut load times.
• Add a CDN. Caching assets closer to your users reduces latency and load on the cluster.

Conclusion

Deploying a React app on Kubernetes takes more than hosting files, but it buys you controlled rollouts, scaling and room to grow. With Microtica, the cluster and the app each come from a template, run in your own AWS account, and every push to your repository ships the next version.