Deploying React.js Apps to Kubernetes

March 7, 2019

Lukas Gentele

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

No Kubernetes cluster required!

Usually, tutorials about running things on Kubernetes start with "How to create a Kubernetes cluster on XYZ cloud." This is probably the only article on this topic which does not require you to set up a Kubernetes cluster.

If you already have a cluster, even better! This tutorial works for any Kubernetes cluster.

But we'll get to this in a second. Let's first see why it even makes sense to use Kubernetes for deploying your React applications.

Why Kubernetes?

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 create space my-react-app
devspace deploy
devspace open

The commands above will:

1. Create a React app (alternatively, you can take an existing one)
2. Containerize your React app (Dockerfile & Helm Chart)
3. Deploy your application to Kubernetes
4. 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

At this point, I could tell you to create a Kubernetes cluster on Google Cloud or AWS, but do we really need to create an entire Kubernetes cluster just for deploying our small "Hello World" React app?

If you don't have a Kubernetes cluster yet, it is much easier to create a ready-to-go Kubernetes namespace using DevSpace:

devspace create space my-react-app

This command will create a Kubernetes namespace on DevSpace Cloud.

Alternative: Using your own Kubernetes cluster

DevSpace would not be called swiss army knife for Kubernetes if it didn't work with any Kubernetes cluster. So, if you already have a Kubernetes cluster and want to use this one instead, you can also use a namespace within your own cluster using the following command:

devspace use namespace my-react-app

DevSpace will create the namespace during the deployment process if it is not existing.

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)

If you are using DevSpace Cloud (i.e. you used devspace create space before), you can also use the option via domain to make your application publicly available on an auto-generated domain. For details on how to connect your domain, see adding domains to spaces documentation.

---

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:

DevSpace: Kubernetes Development UI - 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:

• The DevSpace project on GitHub
• DevSpace Documentation