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

1. The user accesses the application through the web interface. The user enters a movie title into the input.
2. The React application is rendered to the user on access.
3. 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 Bluemix 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

1. 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

2. Create an environment variable for your docker username - If you are in Windows environment you need to ensure bash is enabled - https://docs.microsoft.com/en-us/windows/wsl/install-win10

$ export docker_username="YOUR_DOCKER_USERNAME"

Run locally

1. Clone the repo
2. 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

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

$ npm install

$ npm run build-css

$ npm run start

Run the application using Docker

1. Build the image
2. Run the image

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

1. 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

2. Run the application on Kubernetes

1. Build image.
2. Deploy the application

Prerequisites

• Create a namespace

$ bx cr namespace-add <your_namespace>

1. Build image

In a terminal, run:

$ bx 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

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

• 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
$ bx 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

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

Apache 2.0