In this tutorial, we will learn how to use Docker, minikube, and kubectl to deploy a React application to Kubernetes. Let’s take a closer look at these tools to learn about why they are the best choice for deploying containerized React applications.
Docker is an open source software containerization platform that allows you to package applications into standardized, isolated units called containers. These containers combine the applications source code with the operating system libraries and dependencies required to run that code in any environment.
Docker allows you to build, test, deploy, and scale applications quickly. Its development speed, scalability, and ecosystem richness are some of the many reasons why we will use it to containerize a React application. Please keep in mind that using Docker to containerize is also known as “dockerizing” in the developer community.
Kubernetes is an open source tool that allows you to automate the deployment, scaling, and management of containerized applications. We are going to use it to deploy and manage our dockerized React app.
Next, minikube is a tool that sets up a local Kubernetes cluster on macOS, Linux, and Windows. We are going to use this tool to run Kubernetes locally instead of using a cloud provider.
Finally, kubectl is the Kubernetes command-line tool that allows us to run commands against Kubernetes clusters. We will use this tool to deploy our dockerized React application, and inspect and manage our local Kubernetes cluster resources.
In order to follow this tutorial you will need a machine with the following tools installed:
- Node.js and npm (Node ≥v14.0.0 and npm ≥v5.6)
Along with the tools mentioned above, you will also need a Docker Hub account.
Creating a React application
In this section, we will create the project directory structure to store our application files. After that, we’ll create a React application with Create React App, test the application, and build it for production.
Creating the project directory structure
Create the project directory and navigate into it like so:
mkdir react-docker-kubernetes cd react-docker-kubernetes
Create a directory called
K8s to store your Kubernetes files, and another named
react-docker to store your React application and Docker files:
mkdir K8s mkdir react-docker
Creating a React application and building it for production
Run the following command to create a new React application in the
react-docker directory, then navigate into it and start the application:
npx create-react-app react-docker
You can manually navigate to your application by navigating to the following URL: http://localhost:3000/
The application should look like this:
When you start running the application with
npm start, by default the application will run on
port 3000 if there isn’t an application running there already. You can change this behavior by creating a
.env file and manually setting the port inside it.
Close the process running your React app, then create a
.env and add the following content to it to set the port to 3002:
Let’s build our application for production with the following command:
npm run build
When the command above finishes executing, the files of our production-ready application will be available in a directory named
Dockerizing the React application
In this section, we will create a Docker image of our React application, run and test a container created from the application image, then push it to a Docker Hub account.
Before we can proceed, you need log in to your Docker Hub account.
To do so, run the following command:
You will be asked to enter your Docker Hub account’s username and password, and if you are successful, you will see the following message:
Creating the Docker image
In order to create a Docker image, we have to create two important files:
Dockerfile is a text document that contains all the commands a user could call on the command line to assemble an image. A
.dockerignore file is a text document that contains a list of files and directories that a user wants to ignore while assembling an image.
In the root directory of your project, enter the following code into
FROM nginx:stable-alpine COPY build/ /usr/share/nginx/html
In the code above, we are pulling the base image for our dockerized application, which contains
Nginx running on Alpine Linux.
Nginx is an open-source web server that can also be used as a reverse proxy, load balancer, mail proxy, and
After pulling the base image, you are copying the directory that contains the files of our React application to a directory where
Nginx will be able to access them and serve the application.
Now, add the following code to
npm-debug.log .dockerignore **/.git **/.DS_Store **/node_modules
In the code above, we declared the files and directories that we wish to exclude from our Docker image.
Now that we have created
.dockerignore, we are ready to build the Docker image of our React application.
Run the following command to build the image:
docker build -t your_docker_username/react-docker .
With the command above, we created the image and set its name to
your_docker_username with your Docker Hub account’s username.
Now, run the dockerized application with the following:
docker run -d -p 3000:80 your_docker_username/react-docker
The command above starts a Docker container with your image in detached mode, and maps our machine
port 3000 to the container
port 80 where our Docker container is running.
Open your preferred browser and navigate to
http://localhost:3000/, and you should see your React application page.
After testing the application, make sure you stop all containers with the following command:
docker stop $(docker ps -a -q)
Now that you have successfully tested that the container runs, use the following command to push your image to your Docker Hub account:
docker push your_docker_username/react-docker:latest
When the command above finishes executing, anyone with Docker installed will be able to pull your dockerized React application.
Deploying our React app to Kubernetes
In this section, we will start a local Kubernetes cluster, configure the cluster, then deploy our dockerized application to the cluster and scale it.
More great articles from LogRocket:
- Don't miss a moment with The Replay, a curated newsletter from LogRocket
- Learn how LogRocket's Galileo cuts through the noise to proactively resolve issues in your app
- Use React's useEffect to optimize your application's performance
- Switch between multiple versions of Node
- Discover how to animate your React app with AnimXYZ
- Explore Tauri, a new framework for building binaries
- Compare NestJS vs. Express.js
Starting and configuring a local Kubernetes cluster
To begin, navigate to the
K8s directory like so:
Start your local Kubernetes cluster with minikube:
Then, use kubectl to create a new namespace called
kubectl create namespace react-docker
react-docker as the default context:
kubectl config set-context --current --namespace=react-docker
Deploying the dockerized application to Kubernetes
Create a file called
deployment.yaml and add the following code to it:
kind: Deployment apiVersion: apps/v1 metadata: name: react-docker spec: replicas: 2 selector: matchLabels: app: react-docker template: metadata: labels: app: react-docker spec: containers: - name: react-docker image: your_docker_username/react-docker ports: - containerPort: 80
deployment.yaml file above, we set the name of our app deployment to
react-docker and the number of
Next, we specified the image that we want to use to build your app as
your_docker_username/react-docker. Now, replace
your_docker_username with your actual Docker Hub username.
Lastly, we specified that the container is running on
Deploy the application with the following:
kubectl apply -f deployment.yaml
And monitor the status of the deployment with the following command:
kubectl get deployment -w
After running the command above, you should see an output similar to this:
NAME READY UP-TO-DATE AVAILABLE AGE react-docker 0/2 2 0 18s react-docker 1/2 2 1 23s react-docker 2/2 2 2 29s
To access your app from outside the cluster, you will need to create a service. This service will be a load balancer.
Create a file
load-balancer.yaml file and add the following code to it:
apiVersion: v1 kind: Service metadata: name: load-balancer labels: app: react-docker spec: type: LoadBalancer ports: - port: 80 targetPort: 80 protocol: TCP nodePort: 31000 selector: app: react-docker
Here, we set the name of the service to
We also specified the service type, made the service accessible on
port 80, and set the
nodePort is the port on which we will be able to access the application. Finally, we indicated that this service is for the
Now, we can deploy the service like so:
kubectl apply -f load-balancer.yaml
And we can monitor the status of the service with the following command:
kubectl get services -w
We should get an output similar to the following:
NAME TYPE CLUSTER-IP EXTERNAL-IP PORT(S) AGE load-balancer LoadBalancer 10.101.114.62 <pending> 80:31000/TCP 50s
The application will be accessible on the following URL:
Next, use the following command to get the minikube IP address:
your_minikube_ip with the IP address returned by the
minikube ip command.
Navigate to the URL and you will be able to access the dockerized application running on Kubernetes.
Scaling the application
Now, we can scale up our application by increasing the number of pods to ten with the following command:
kubectl scale deployment react-docker --replicas=10
Monitor the status of the deployment like so:
kubectl get deployment -w
You should see that we now have ten pods running the React application:
NAME READY UP-TO-DATE AVAILABLE AGE react-docker 5/10 10 5 39m react-docker 6/10 10 6 40m react-docker 7/10 10 7 40m react-docker 8/10 10 8 40m react-docker 9/10 10 9 40m react-docker 10/10 10 10 40m
We can also scale down the application by decreasing the number of pods. In the this case, three:
kubectl scale deployment react-docker --replicas=3
We can monitor the status of the deployment exactly as we did before, and you should see that we now have three pods running the application:
NAME READY UP-TO-DATE AVAILABLE AGE react-docker 3/3 3 3 41m
In this tutorial, we learned how to create a React application and build it for production. After building the application, we learned how to dockerize and push it to your Docker Hub account. Finally, we learned how to create and configure a local Kubernetes cluster, deploy the dockerized React application to the cluster, and how to scale the application.
Cut through the noise of traditional React error reporting with LogRocketLogRocket is a React analytics solution that shields you from the hundreds of false-positive errors alerts to just a few truly important items. LogRocket tells you the most impactful bugs and UX issues actually impacting users in your React applications. LogRocket automatically aggregates client side errors, React error boundaries, Redux state, slow component load times, JS exceptions, frontend performance metrics, and user interactions. Then LogRocket uses machine learning to notify you of the most impactful problems affecting the most users and provides the context you need to fix it.
Focus on the React bugs that matter — try LogRocket today.