Introduction

React is a popular JavaScript library for building interactive JavaScript-based applications. And once your React application is fully functional, your next step should be to think about how to deploy it in a production environment like Kubernetes.

That's where this guide comes in. It walks you through the process of deploying and running a React Web application on a Kubernetes cluster. It uses Bitnami's Apache Helm chart, which is based on Bitnami's Apache container.

Assumptions and prerequisites

This guide makes the following assumptions:

You have a React application suitable for deployment on Apache. If you don't, you can use this example project from the React website.
You have a Docker environment.
You have an account with a container registry. This guide assumes that you are using Docker Hub.
You have a Kubernetes cluster running with Helm v3.x installed.
You have the kubectl command line (kubectl CLI) installed.

Step 1: Build and test a custom Docker image

The first step is to create a custom Docker image with your application code. Bitnami's Apache image is a good starting point for this.

Begin by obtaining the code for your application. If you're using the example React application listed above, clone the corresponding Git repository on your development system, as shown below:
```
git clone https://github.com/pankajladhar/GFontsSpace.git
```
Change into the application source directory, download dependencies and build the project:
```
cd GFontsSpace
yarn install
yarn build
```
Create a Dockerfile that starts with Bitnami's Apache container and adds the built application to the Apache server's document root (by default, this is configured as the /app directory) as follows:
```
FROM bitnami/apache:latest
COPY build /app
```
Build the Docker image, replacing the USERNAME placeholder in the command below with your Docker Hub username:
```
docker build -t USERNAME/react-app .
```
Run the Docker image to confirm that your application is successfully deployed on Apache:
```
docker run -p 8080:8080 USERNAME/react-app
```

Browse to the application URL at http://IP-ADDRESS:8080/ (where IP-ADDRESS is the IP address of your Docker host) to confirm that it works.

Step 2: Publish the Docker image

Once the Docker image is built with your application code, upload it to a public registry. This tutorial uses Docker Hub, but you can select others, such as:

To upload the image to Docker Hub, follow the steps below:

Log in to Docker Hub:
```
docker login
```
Push the image to your Docker Hub account. Replace the USERNAME placeholder with your Docker username:
```
docker push USERNAME/react-app
```

Confirm that you see the image in your Docker Hub repositories dashboard before proceeding to the next step.

Step 3: Deploy the application on Kubernetes

If you wish to access the React application externally through a domain name, you must first install the NGINX Ingress controller.

The next step is to deploy the application on your Kubernetes cluster. Bitnami's Apache Helm chart makes it very easy to do this, because it has built-in support for custom Docker images. To deploy the example React application using the current Helm chart, follow these steps:

Make sure that you can to connect to your Kubernetes cluster by executing the command below:
```
kubectl cluster-info
```

Update your Helm repository list:

helm repo add bitnami https://charts.bitnami.com/bitnami
helm repo update

Deploy the application by executing the following (replace the USERNAME placeholder with your Docker username):
```
helm install apache bitnami/apache \
    --set image.repository=USERNAME/react-app \
    --set image.tag=latest \
    --set image.pullPolicy=Always
```
If you wish to access the application externally through a domain name and you have installed the NGINX Ingress controller, use this command instead and replace the DOMAIN placeholder with your domain name:
```
helm install apache bitnami/apache \
    --set image.repository=USERNAME/react-app \
    --set image.tag=latest \
    --set image.pullPolicy=Always \
    --set ingress.enabled=true \
    --set ingress.hosts[0].name=DOMAIN
```
This will create a pod within the cluster for the Apache service.
Tip
If you use a different repository or have multiple tagged versions of the custom container, you can also specify a different container repository or tag. See the complete list of supported parameters for the chart.

Once the chart has been installed, you will see some information about the deployment. Run the helm status command to see deployment status:

helm status apache

The external IP address of the Apache service can be obtained from the output of the previous command, as shown below:

Test the application by browsing to the service IP address, such as http://IP-ADDRESS/ or, if you used the NGINX Ingress controller, to the specified domain name. If you used the example application, here is a screenshot of what you should see:

You've now successfully deployed your React application on Kubernetes.

Useful links

To learn more about the topics discussed in this guide, use the links below:

In this tutorial

Introduction
Assumptions and prerequisites
Step 1: Build and test a custom Docker image
Step 2: Publish the Docker image
Step 3: Deploy the application on Kubernetes
Useful links

Deploy a React Application on Kubernetes with Bitnami's Apache Helm Chart