Deploying React.js Apps to Kubernetes
The fastest way to containerize and deploy React applications using Kubernetes and DevSpace.

Why Kubernetes?
Let's first see why it even makes sense to use Kubernetes for deploying your React applications.Kubernetes is a container orchestrator that allows you to run, manage and scale applications that run in containers, e.g. using Docker. Kubernetes is one of the most popular open-source projects and looking at the Google Trends chart below, you can see how important this technology has become within the past couple of years.
All major cloud providers (gcloud, aws, azure, digital ocean etc.) have created managed Kubernetes platforms, which clearly indicates that Kubernetes is evolving to the de-facto standard for deploying applications in the cloud.
One of the reasons why Kubernetes is becoming so popular might be that it provides a bunch of great features that help you make your applications as scalable and reliable as the software of tech giants such as Google or Amazon. Some notable out-of-the-box Kubernetes features are:
- Horizontal auto-scaling
- Rolling updates with zero-downtime
- Self-healing mechanisms (using health-checks)
- Portability across all major cloud platforms
The last one is particularly important because it means that you can easily switch between different cloud platforms and even private clouds without having to re-engineer and change everything. This kind of flexibility is very valuable and prevents you from a vendor lock-in when choosing a cloud platform.
TL;DR
This tutorial shows you how to create a React app and deploy it to Kubernetes using DevSpace. This is as quick as running the following commands:
npx create-react-app my-react-app && cd my-react-app
devspace init
devspace use namespace my-react-app
devspace deploy
devspace open
The commands above will:
- Create a React app (alternatively, you can take an existing one)
- Containerize your React app (Dockerfile & Helm Chart)
- Deploy your application to Kubernetes
- Stream the logs of your deployment
Pretty easy, huh?
Take a look at the full tutorial for more details on what each of these commands will do for you.
Prerequisites
Install Node
Make sure that you have Node >= 6 && npm >= 5.2 installed.
Install DevSpace
We will use DevSpace, the swiss army knife for Kubernetes. Run this command to install DevSpace:
npm install -g devspace
1. Create a React Application (skip if you already have one)
This step is optional because you can use any of your already existing React apps of course.
If you, however, want to create a new React app, feel free to do so:
npx create-react-app my-react-app
cd my-react-app
To build and run your React application in development mode, just run the following command in your terminal:
npm start
Now, let's see how we can run this React app inside a Docker container and deploy it to Kubernetes.
2. Containerize Your React App
To run applications on Kubernetes, we need a Dockerfile and some Kubernetes manifests. Instead of creating these files manually, we can let DevSpace automatically create them for us with the following command:
devspace init
Create a Dockerfile
DevSpace automatically detects that you do not have a Dockerfile, yet, and provides several options to continue with. Choose the first option Create a Dockerfile for me
by hitting Enter
and DevSpace will create a Dockerfile in your project directory.
? This project does not have a Dockerfile. What do you want to do?
[Use arrows to move, space to select, type to filter]
> Create a Dockerfile for me
Enter path to your Dockerfile
Enter path to your Kubernetes manifests
Enter path to your Helm chart
Use existing image (e.g. from Docker Hub)
If you already have a Dockerfile, DevSpace will detect that and ask you to use that one.
Select Your Programming Language
DevSpace will automatically detect your programming language, so go ahead and confirm that we are using javascript
by hitting Enter
.
? Select the programming language of this project
[Use arrows to move, space to select, type to filter]
csharp
go
java
> javascript
none
php
python
Choose an Image Registry
DevSpace will build a Docker image from your Dockerfile. This image needs to be pushed somewhere. You have the following options:
? Which registry do you want to use for storing your Docker images?
[Use arrows to move, space to select, type to filter]
Use hub.docker.com
> Use dscr.io (free, private Docker registry)
Use other registry
If you to not know what to do, use dscr.io - is fast, free and private. DevSpace will open the login page for you to sign up for dscr.io.
Define The Application Port
React, by default, runs on port 3000. So, type in 3000
and hit Enter
.
? Which port is your application listening on? (Enter to skip) 3000
What just happened?
After the init command terminates, you will find the following new files in your project:
my-react-app/ # Your project directory
|
|--devspace.yaml # DevSpace config file (defines which images to build and how to deploy your project)
|--Dockerfile # Dockerfile (defines how to build the Docker image)
|--.dockerignore # Defines paths to be ignored when building the Docker image
|--.gitignore # Defines paths to be ignored when commiting your code via git
Besides the configuration for DevSpace in devspace.yaml
, there is a Dockerfile
for building a Docker image for our React app before deploying the app to Kubernetes.
Dockerfile for React
The Dockerfile will look like this:
FROM node:8.11.4
RUN mkdir /app
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
CMD ["npm", "start"]
This Dockerfile:
- defines
node
as base image - creates the working directory
/app
- copies the
package.json
into the image and installs the dependencies - copies the rest of our application into the working directory
- defines
npm start
as the start command for the container
Adding the package.json
separately and installing dependencies before adding the rest of the application allows Docker to use layer-caching and saves a lot of time when building the image because the dependencies will only have to be re-installed when the package.json
has changed and not every time we change any other source code file. Not having to install the dependencies every time we re-build and redeploy our application saves a lot of time.
Note that this Dockerfile starts our React app in development mode. For production, it is recommended to use multi-stage Docker builds for creating static assets and then serve them with a web server such as nginx. You can easily replace the auto-generated Dockerfile with a production-ready one. For more details on creating a production-ready Dockerfile for your React app, take a look at this medium article.
Helm Chart For React
To start containers in Kubernetes, we need to define so-called Kubernetes manifests. Instead of using plain Kubernetes manifests, it is recommended to bundle them into a so-called Helm chart. Helm is the package manager for Kubernetes and a Helm chart is a package that can be installed into a Kubernetes cluster using Helm.
By default, DevSpace deploys your application using the so-called component chart which is a standardized but highly configurable Helm chart. To customize this deployment for your React app, you can edit the deployments
section of the devspace.yaml
config file which looks similar to this one:
...
deployments:
- name: my-vuejs-app
helm:
chart:
name: component-chart
version: v0.0.6
repo: https://charts.devspace.cloud
values:
containers:
- image: dscr.io/${DEVSPACE_USERNAME}/devspace
service:
ports:
- port: 3000
...
For more information on how to edit this component deployment, take a look at this page about customizing Kubernetes components.
3. Deploy Your React App
Now that our React app is containerized, we are ready to deploy it to Kubernetes.
Create a Kubernetes Namespace
You need to have access to a Kubernetes namespace to deploy you app. DevSpace works with any Kubernetes cluster, no matter if it runs locally, in a public or a private cloud.
If you don't have access to a Kubernetes environment, you can create a local Kubernetes cluster with various open-source tools, such as minikube or kind. Alternatively, you can also use one of the public cloud offerings, such as GKE, EKS, or AKS, that also provide some free trials. For a more advanced solution, you can connect (or ask an admin to connect) a cluster to loft. This allows engineers to create namespaces and virtual Kubernetes clusters on-demand in the loft UI or with the loft CLI, that can even be integrated into DevSpace via the loft-devspace-plugin. This is probably the most engineering-friendly solution that also works for whole teams which want to securely share a single Kubernetes cluster.
In any case, the next step to deploy your React app to Kubernetes is the following command:
devspace use namespace my-react-app
This command will create a Kubernetes namespace in your cluster with the name "my-react-app". If a namespace with that name already exists, this namespace will be used.
Build & Deploy Your App
Usually, this part of the tutorial would explain how to manually build a Docker image, push it to a registry and mess around with kubectl
commands.
However, DevSpace automates all of this and you will just need to run one single command to deploy your app:
devspace deploy
This command takes a little while when you run it the very first time. If you run it later again, it will be much quicker.
Now it's time to open your project.
devspace open
When DevSpace asks you how to open your application, choose the first option: via localhost
? How do you want to open your application?
[Use arrows to move, space to select, type to filter]
> via localhost (provides private access only on your computer via port-forwarding) # <<<<<<<< CHOOSE THIS ONE!
via domain (makes your application publicly available via ingress)
4. Start Development
If you want to edit your files and make your application reload automatically, simply run:
devspace dev
Wait until your app has started and opens in the browser, then edit a file and see hot reloading in action. Happy coding!
In addition to deploying our React.js application to Kubernetes, the devspace dev
command also starts a powerful development UI which runs on localhost and is available as long as the devspace dev
command is running.
You should see a log statement similar to this one in the output of devspace dev
:
#########################################################
[info] DevSpace UI available at: http://localhost:8090
#########################################################
So go ahead and check out the DevSpace UI in your browser! You can use it to see the container and pod status of your deployments as well as to stream logs and open interactive terminal sessions for every container. It should look like in this screencast:

5. Bonus: Analyze Issues
In case your application does not run as expected and you don't know what is wrong, you can let DevSpace analyze your deployment:
devspace analyze
Let us, for example, mess with the start command for our container by changing the last line within the Dockerfile to:
CMD ["npm", "run", "unknown-command"]
After saving the flawed Dockerfile, let's redeploy our application using:
devspace deploy
Now, we can tell DevSpace to analyze our deployment using:
devspace analyze
And the output of this analysis would reveal the following issue:
```bash
================================================================================
Events (1 potential issue(s))
================================================================================
Warning - Pod default-85ffffc555-m9x6h:
3x Back-off restarting failed container
================================================================================
Pods (1 potential issue(s))
================================================================================
Pod default-85ffffc555-m9x6h:
Status: Error
Created: 34s ago
Container: 0/1 running
Problems:
- Container: container-0
Status: Terminated (reason: Error)
Terminated: 12s ago
Restarts: 2
Last Restart: 30s ago
Last Exit: Error (Code: 1)
Last Execution Log:
npm ERR! missing script: unknown-command
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2019-03-07T13_31_38_469Z-debug.log
Final thoughts
This tutorial gives a quick overview of how to deploy a React app to Kubernetes using DevSpace. React as a frontend application might be quite easy to deploy using platforms such as Netlify etc., but using Kubernetes provides a great level of control and portability and is also suitable for backend applications. DevSpace works with every Kubernetes cluster and every programming language, which lets you unify the way you deploy applications across different projects.
As mentioned above, this tutorial does not provide an exhaustive guide for creating a fully production-ready deployment of a React app (e.g. because it uses a simple Dockerfile to start the React app in dev mode). However, this article can serve as a starting point for everyone that is interested in using Kubernetes.
If you have any questions regarding any of the steps I have shown above or regarding React deployments on Kubernetes in general, feel free to leave a comment. I am happy to help wherever I can.
For further details on DevSpace, take a look at: