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 CLI automatically create them for us with the following command:

devspace init

Select your programming language

DevSpace CLI will automatically detect your programming language, so go ahead and confirm that we are using javascript by hitting Enter .

? Select programming language of project [Use arrows to move, type to filter]

csharp

go

java

> javascript

none

php

python

Define the application port

React, by default, runs on port 3000 in dev mode. This is also the default port suggested by DevSpace CLI, so go ahead and confirm this with Enter .

? Which port is the app listening on? (Default: 3000)

Log in to DevSpace Cloud

If you do not have kubectl installed, DevSpace CLI will assume that you do not want to use your own Kubernetes cluster and instead connect you to DevSpace Cloud.

To create a free Kubernetes namespace on DevSpace Cloud, you need to log in. To log in to DevSpace Cloud, click on “Login with GitHub”.

DevSpace Cloud is the first hosting service for fully managed Kubernetes namespaces. You can imagine a Space on DevSpace Cloud like a Dyno on Heroku but instead, you get an actual namespace within a Kubernetes cluster.

As mentioned beforehand, I am part of the DevSpace team. We built DevSpace Cloud because we believe that Kubernetes is the future of deploying applications in the cloud but forcing everyone to create and manage fully fledged Kubernetes clusters is not a very efficient approach. DevSpace Cloud helps developers get the benefits of Kubernetes and lets them focus on writing great code instead of having to worry about setting up and maintaining Kubernetes clusters.

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/ # DevSpace directory

| |-config.yaml # DevSpace config

|

|--chart/ # Helm chart

| |-Chart.yaml # Chart definition (e.g. name, version)

| |-values.yaml # Values for the template variables

| |-templates/ # Directory containing the templates

|

|--Dockerfile # Dockerfile

|--.dockerignore # Files to ignore during Docker building

Besides the configuration for DevSpace (in .devspace/config.yaml ), there is a Dockerfile for building a Docker image for our React app and a Helm chart in chart/ to deploy our 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 . .



# Application port

EXPOSE 3000



# Remote debugging port

EXPOSE 9229



CMD ["npm", "start"]

This Dockerfile:

defines node as base image

as base image creates the working directory /app

copies the package.json into the image and installs the dependencies

into the image and installs the dependencies copies the rest of our application into the working directory

exposes the ports 3000 and 9229 (for debugging)

and (for debugging) 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 re-deploy 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 CLI creates a highly configurable Helm chart. To customize the chart, you can edit the content of chart/values.yaml

#### DevSpace Helm Chart ####

# This is a highly configurable Helm chart. For information on how to configure this file,

# take a look at the documentation: http://devspace.cloud/docs/chart/basics/devspace-helm-chart



# Components are independently scalable parts of your application

# Components can contain multiple containers which cannot be scaled independently from each other

components:

- name: default

containers:

- # Image tag will be automatically updated in runtime when running devspace deploy or devspace dev

# The name used here has to match the name in .devspace/config.yaml under images.default.image,

# otherwise devspace is not able to replace it!

image: dscr.io/[USERNAME]/devspace

resources:

limits:

cpu: "400m"

memory: "500Mi"

ephemeralStorage: "1Gi"

# Environment variables

env: []

# Mount persistent volumes in this container

volumeMounts: []

# Expose your component via service

# URLs will be connected if name=external and externalPort=80

service:

name: external

type: ClusterIP

ports:

- externalPort: 80

# This is the container port that should be exposed through this service

containerPort: 3000



# Define persistent volumes here

# Then mount them in containers above

volumes: []



# Defines image pull secrets

# DevSpace CLI will append all pull secrets which are automatically created

# More infos on: https://devspace.cloud/docs/cli/images/pull-secrets

pullSecrets: []

For more information on how to customize the chart, take a look at the chart’s documentation.