Deploy a React Single Page Application to OpenShift with GitHub

This short article will help guide you on how to deploy an SPA (Single Page Application) created in React onto the OpenShift platform using GitHub. Luckily, this is a simple process and makes app creation and deployment a breeze! There are a few tricky spots that I ran into and so I decided that I might be able to make the process easier for other folks doing this for the first time.

To keep things simple, I will just be deploying the standard create-react-app template. This article is assuming that you have node/npm installed as well as an account for or access to the OpenShift container platform. I will be using the browser UI for the OpenShift side of things in this article.

First thing’s first, use create-react-app to initialize a new project:

$ npx create-react-app open-shift-test

Next, create a new GitHub repository. Skip the optional initialization options:

After creating your repository, copy the commands for ‘existing directory’

Navigate into your newly created React app folder and run the commands

$ cd open-shift-test
$ git remote add origin https://github.com/avlisesac/react-open-shift-example.git
$ git branch -M main
$ git push -u origin main

In your code editor (I’m using Atom), create a new file named .env and in it, set the port number to 8080. This is one of the parts that was tripping me up while doing this for the first time. OpenShift defaults to expecting the port number of the app to be 8080, but the React application defaults to 3000.

Add, commit, and push the changes to your GitHub repository.

$ git add .
$ git commit -m “adding port config”
$ git push

Now over to OpenShift. If needed, create a new Project to house your Application.

In your destination Project, click “+Add” to create a new Application and choose “From Git”.

Paste in your repository URL and select Node.js as the builder image.

Leave all the other options as their default (ensuring that “Create a route to the application” is selected by default) and click Create.

When the build is finished, click the link to the application from the Topology map.

That’s it, you’re done!

I hope you found this helpful. From here, you can go on to set up Webhooks in GitHub so that you can trigger a build in OpenShift whenever you push updates to GitHub. Also super helpful!