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
- 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.
- 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.
- 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.
-
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.json 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"
Clone the repo locally. In a terminal, run:
$ git clone https://github.com/IBM/deploy-react-kubernetes
- 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.
In a terminal, run:
$ docker build -t $docker_username/deploy-react-kubernetes .
Your image should be listed by running:
$ docker images
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
-
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
-
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
Build image in the IBM Container Registry:
$ ibmcloud cr build -t registry.<ibm_cloud_region>.bluemix.net/<your_namespace>/deploy-react-kubernetes .
$ 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
Note: Follow the prerequisites in 'Run the application on Kubernetes section' before executing command below.
kubectl create -f deployment.yaml
- 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
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.