Deploy a React application on Kubernetes

Do you have a front end application that contains large amounts of duplication, handles complex states, and manages large amounts of data?

React and Redux is the perfect Javascript library if your application is similar to the one described above. React provides a component based structure for everything included in an application and allows abstraction if needed to limit duplication. With Redux, it handles all of the state and can easily manage data in an application.

Once an application has been developed, it needs to be deployed for the rest of the world to see. There are many choices when looking for the right solution to manage and deploy your application. It can often be overwhelming when you're trying to pick the right solution.

If you're looking for a deployment tool that can provide automation, scalability and management of a deployed application, Kubernetes is the tool for you!

An application must be packaged into a container to deploy on Kubernetes. Docker is an open source tool that is used to package the application into a container. The container is then deployed on Kubernetes for public access. Once the application is deployed, Kubernetes handles the management, scalability and automation of the deployed application.

In this Code Pattern, we will deploy a React application using Kubernetes.

This repository uses the React Javascript library alongside Redux to build out the front end of the application. The OMDb API is used to get movie information based on user input. Redux handles the data between the application and the API, as well as the state between components. Docker is used to package the application and Kubernetes is used to deploy the container.

When the reader has completed this Code Pattern, they will understand how to:

Containerize a React application using Docker
Deploy and manage an application using Kubernetes

Flow

The user accesses the application through the web interface. The user enters a movie title into the input.
The React application is rendered to the user on access.
The application calls the OMDb API and receives a JSON object of the response to show the user.

Included components

IBM Cloud Container Service: IBM Cloud Container Service manages highly available apps inside Docker containers and Kubernetes clusters on the IBM Cloud.
Kubernetes Cluster: Create and manage your own cloud infrastructure and use Kubernetes as your container orchestration engine.

Featured technologies

Node.js: An open-source JavaScript run-time environment for executing server-side JavaScript code.
Cloud: Accessing computer and information technology resources through the Internet.
Container Orchestration: Automating the deployment, scaling and management of containerized applications.

Watch the video

Demo on Youtube

Steps

Prerequisites

You must get an API key from OMDb API in order to get a response from the API. You will insert your API key in /src/actions/index.js on line 42 OMDb API by Brian Fitz is licensed under CC BY-NC 4.0
Create an environment variable for your docker username

$ export docker_username="YOUR_DOCKER_USERNAME"

Run locally

Clone the repo
Run the application

1. Clone the repo

Clone the repo locally. In a terminal, run:

$ git clone https://github.com/IBM/deploy-react-kubernetes

2. Run the application

Install Node.js
Run the following commands in a terminal:

$ npm install

$ npm run build-css

$ npm run start

Verify app is running and working correctly.

Run the application using Docker

Build the image
Run the image

Prerequisites:

Create Docker account
Install Docker CLI
Retrieve and save your Docker user id

1. Build the image

In a terminal, run:

$ docker build -t $docker_username/deploy-react-kubernetes .

Your image should be listed by running:

$ docker images

2. Run the image

In a terminal, run:

$ docker run -p 3000:3000 -d $docker_username/deploy-react-kubernetes

You can now access the application at http://localhost:3000

Run the application on Kubernetes

Build image.
Deploy the application

Prerequisites

Create an account with IBM Cloud
Install IBM Cloud CLI
Log into your IBM Cloud account

ibmcloud login

If you have a federated ID, use ibmcloud login --sso to log in to the IBM Cloud CLI.

Install the Container Registry plug-in.

ibmcloud plugin install container-registry -r Bluemix

Install the Container Service plug-in.

ibmcloud plugin install IBM-Containers -r Bluemix

Install kubectl
Create cluster

ibmcloud cs cluster-create --name YOUR_CLUSTER_NAME

Configure Kubernetes cluster

$ ibmcloud cs cluster-config YOUR_CLUSTER_NAME

Copy and paste response in CLI

Choose a name for your first namespace, and create that namespace. Use this namespace for the rest of the Quick Start.

$ ibmcloud cr namespace-add YOUR_NAMESPACE

1. Build image

Build image in the IBM Container Registry:

$ ibmcloud cr build -t registry.<ibm_cloud_region>.bluemix.net/<your_namespace>/deploy-react-kubernetes .

2. Deploy the application

$ kubectl run deploy-react-kubernetes-deployment --image=registry.<ibm_cloud_region>.bluemix.net/<your_namespace>/deploy-react-kubernetes

To check how many pods are running on Kubernetes run the command:

kubectl get pods

Expose the app to the web by setting the port. Run the command:

$ kubectl expose deployment/deploy-react-kubernetes-deployment —-port=3000 —-type=NodePort

To access your application. You would need the public IP address of your cluster and NodePort of the service.

# For clusters provisioned with IBM Cloud
$ ibmcloud cs workers YOUR_CLUSTER_NAME

# For details on a specific Kubernetes service
$ kubectl describe service deploy-react-kubernetes-service

You can now access the application at http://IP_ADDRESS:NODE_PORT

Run the application on Kubernetes with a yaml file

Note: Follow the prerequisites in 'Run the application on Kubernetes section' before executing command below.

kubectl create -f deployment.yaml

Sample output

Links

Demo on Youtube
Blog post
React
Redux
Docker
Kubernetes

Learn more

Container Orchestration Code Patterns: Enjoyed this Code Pattern? Check out our other Container Orchestration Code Patterns.
Kubernetes on IBM Cloud: Deliver your apps with the combined power of Kubernetes and Docker on IBM Cloud

License

This code pattern is licensed under the Apache Software License, Version 2. Separate third party code objects invoked within this code pattern are licensed by their respective providers pursuant to their own separate licenses. Contributions are subject to the Developer Certificate of Origin, Version 1.1 (DCO) and the Apache Software License, Version 2.

Apache Software License (ASL) FAQ

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!