Deploying React App (with environment variables) on Red Hat OpenShift with OpenShift CLI (Command Line Interface)

In an earlier blog we deployed a React application with an environment variable using the OpenShift UI (user interface). This time around we are going to deploy the same application using the OpenShift cli.

About the application

The application uses the giphy API to load “trending” gifs and allow a user to search for gifs. The source code for the react giphy app can be found here.

Fork this project to your own GitHub account. If you want to run the application locally to see how it works, just follow the build steps.

Click the Fork button and select your GitHub profile

Note: If you decide to use your own React application, OpenShift requires the application to run on port 8080, running npx create-react-app the application will use port 3000. A quick fix to ensure the application runs on port 8080 is to update the package.json file start script to "start" : "PORT=8080 react-scripts start .

Let’s dive into the OpenShift cli (command line interface) and deploy our app

First off we need to ensure the OpenShift cli is installed, to check this run oc version . This command should return your cli version. If the oc command is not found you can install it by following these steps install oc command.

Now that we have the oc cli and have access to a cluster we need to login to our OpenShift cluster oc login -u <username> -p <password> <cluster api endpoint>

Just like in the UI we need to create a new project, we complete this by running the oc new-project command where we will pass the project name and a display name oc new-project giphy-app --display-name="giphy-app"

To get a list of you projects you can run oc get projects . If you want to delete a project run oc delete project <project-name>

We are now going to create our application by using the source code from GitHub while also adding the environment variable and a name for our application.

oc new-app https://github.com/<your-github-username>/giphy-typescript \
-e REACT_APP_GIPHY_API_KEY=<your-giphy-api-key> \
--name=giphy-typescript-app

Wait now, we did not specify a base image to use, as in the UI we would select the Node.js builder image, so how is this going to work? When we build from source, the new-app command attempts to determine the source code language. In this instance it sees a package.json file and therefore suspects that this is a node application. Once the language has been detected new-app searches the OpenShift Enterprise server for an associated image and if it is not found it will then search Docker Hub registry to find the appropriate image.

If we wish to override the image the builder will use, we can specify an image by using the image name and separate the image name and source code URL by a tilde ~

oc new-app openshift/nodejs:latest~https://github.com/<your-github-username>/giphy-typescript \
-e REACT_APP_GIPHY_API_KEY=<your-giphy-api-key> \
--name=giphy-typescript-app

The above command is broken down by new-app <image-name>:<image-tag>~<git-url> -e <environment-variable-name>=<environment-variable-value> --name=<app-name>environment variable.

The app has now been created and will go through the build process. We can view the status of the pod by running oc get pods (use the -w option to watch the pod update live oc get pods -w ). To exit watching the pods press CTRL + c or CMD + c pending on your OS.

Once the Status of the build pod has progresses from “Init” to “Running”

You can now check the build logs to follow the progress of the build. You can view the build logs by running oc logs -f bc/giphy-typescript-app .

If viewing the logs, the build will be complete once you see “Push successful”. To exit the logs press CTRL + c or CMD + c pending on your OS.

We know our app has deployed successfully by view the build logs and seeing “Push successful” or by checking the status of the build pod is “Completed” and the application container is “Running” as seen below giphy-typescript-app-86dcf5f685-28vpv 1/1 Running

So how do we go about getting the URL of the application in order to view that it is working as expected?

We need to expose the service by running oc expose svc/giphy-typescript-app , now that application is exposed to the outside world we can run oc get routes and we should see the HOST/PORT in the output as something like giphy-typescript-app.apps.na46k.prod.nextcle.com

We can put http://giphy-typescript-app.apps.na46k.prod.nextcle.com into the browser and our app should be running.

That should be it, either our giphy app or your own app should now be up and running. Well done, you have successfully deployed your first React application onto Red Hat OpenShift Container Platform using the oc cli.