Skip to content
This repository was archived by the owner on Sep 16, 2021. It is now read-only.
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 17 additions & 17 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@

# 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?
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!
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.

Expand All @@ -24,7 +24,7 @@ When the reader has completed this Code Pattern, they will understand how to:

![Flow](https://media.github.ibm.com/user/1650/files/b0c988dc-31aa-11e8-867b-9558d5610cd7)

1. The user accesses the application through the web interface. The user enters a movie title into the input.
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.

Expand All @@ -44,8 +44,8 @@ When the reader has completed this Code Pattern, they will understand how to:
# Steps

## Prerequisites
1. You must get an API key from [OMDb API](http://www.omdbapi.com/) 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](http://www.omdbapi.com/) by Brian Fitz is licensed under [CC BY-NC 4.0](https://creativecommons.org/licenses/by-nc/4.0/)
1. You must get an API key from [OMDb API](https://www.omdbapi.com/) 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](https://www.omdbapi.com/) by Brian Fitz is licensed under [CC BY-NC 4.0](https://creativecommons.org/licenses/by-nc/4.0/)

2. Create an environment variable for your docker username
```
Expand All @@ -66,7 +66,7 @@ $ git clone https://github.com/IBM/deploy-react-kubernetes

### 2. Run the application
1. Install [Node.js](https://nodejs.org/en/)
2. Run the following commands in a terminal:
2. Run the following commands in a terminal:

```
$ npm install
Expand All @@ -84,7 +84,7 @@ Verify app is running and working correctly.

## Prerequisites:
1. [Create Docker account](https://cloud.docker.com/)

2. [Install Docker CLI](https://docs.docker.com/install/)

3. [Retrieve and save your Docker user id](https://cloud.docker.com/)
Expand Down Expand Up @@ -118,13 +118,13 @@ You can now access the application at http://localhost:3000
2. [Deploy the application](#2-deploy-the-application)

## Prerequisites
1. [Create an account with IBM Cloud](https://console.bluemix.net/registration/)
1. [Create an account with IBM Cloud](https://cloud.ibm.com/registration/)

2. [Install IBM Cloud CLI](https://console.bluemix.net/docs/cli/reference/bluemix_cli/get_started.html#getting-started)
2. [Install IBM Cloud CLI](https://cloud.ibm.com/docs/cli/reference/bluemix_cli/get_started.html#getting-started)

3. Log into your IBM Cloud account
```
ibmcloud login
ibmcloud login
```

If you have a federated ID, use ibmcloud login --sso to log in to the IBM Cloud CLI.
Expand Down Expand Up @@ -161,18 +161,18 @@ $ ibmcloud cr namespace-add YOUR_NAMESPACE

### 1. Build image

Build image in the IBM Container Registry:
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:
To check how many pods are running on Kubernetes run the command:
```
kubectl get pods
```
Expand All @@ -199,7 +199,7 @@ 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.
Note: Follow the prerequisites in 'Run the application on Kubernetes section' before executing command below.

```
kubectl create -f deployment.yaml
Expand All @@ -219,10 +219,10 @@ kubectl create -f deployment.yaml

# Learn more

* **Container Orchestration Code Patterns**: Enjoyed this Code Pattern? Check out our other [Container Orchestration Code Patterns](https://developer.ibm.com/code/technologies/container-orchestration/).
* **Container Orchestration Code Patterns**: Enjoyed this Code Pattern? Check out our other [Container Orchestration Code Patterns](https://developer.ibm.com/solutions/container-orchestration-and-deployment/).
* **Kubernetes on IBM Cloud**: Deliver your apps with the combined power of [Kubernetes and Docker on IBM Cloud](https://www.ibm.com/cloud/container-service)

# 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)](https://developercertificate.org/) and the [Apache Software License, Version 2](http://www.apache.org/licenses/LICENSE-2.0.txt).
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)](https://developercertificate.org/) and the [Apache Software License, Version 2](https://www.apache.org/licenses/LICENSE-2.0.txt).

[Apache Software License (ASL) FAQ](http://www.apache.org/foundation/license-faq.html#WhatDoesItMEAN)
[Apache Software License (ASL) FAQ](https://www.apache.org/foundation/license-faq.html#WhatDoesItMEAN)