Article

Deploy React applications to OpenShift

A guide on getting started with React apps on Red Hat OpenShift

April 11, 2023
CI/CD JavaScript Kubernetes OpenShift
yashwanth-maheshwaram
Yashwanth Maheshwaram
Senior Principal Product Manager - Developer Experience & Strategy
Deploy a sample app in the sandbox

React is an open-source JavaScript library for building user interfaces. It allows developers to create reusable UI components and efficiently update the view in response to changes in data. Red Hat OpenShift enables developers to build, deploy, run, and manage a wide variety of applications, including frontend and the ones made with React. React applications use the Node.js runtime to run the application.

This article will help you get started with ReactJS apps on OpenShift. You will learn how to:

  1. Deploy a basic React application from the ground up in the easiest way possible without having to deal with Kubernetes and a lot of other complications that come with it.
  2. Manage product and development environments for a React application.
  3. Add continuous deployment (CD) to your React application to automatically deploy updates to your repository.

Prerequisites

Node.js is required for your machine to be able to build and run React applications on your local machine. Install Node.js  via one of the following options: 

Create a sample React application

Create React App is a comfortable environment for learning React, and it is the best way to start building a new single-page application in React. It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production.

You’ll need to have Node 14.0.0+ and npm 5.6+ on your machine. If you want to use a readily available example application, skip this step and move to the Deploy section.

To create a project, run:

npx create-react-app my-app
cd my-app
npm start

Publish your code to Git

Create a repository on GitHub or any other Git platform. If you want to use a readily available example application, copy the URL and move on to the next step: https://github.com/yashwanthm/react-openshift-example

The repository has a minor recommended change to the usual create-react-app approach to be able to run a production application.

You will need to run npm run start.development.local instead of npm start on your local machine. The rest remains the same.

Deploy your React application to the OpenShift sandbox

The Developer Sandbox for Red Hat OpenShift is a free-to-use OpenShift instance for you to experiment with OpenShift for your use cases. It's an excellent way to try running React applications on OpenShift. 

Follow these steps to start your sandbox instance and deploy your app:

  1. Create a Sandbox account using https://developers.redhat.com/developer-sandbox 
  2. Once you have the account, click on Start using your sandbox.
  3. Give it a few seconds and your sandbox instance will load up.
  4. On the left side menu, click on +Add.
  5. Select Import from Git.
  6. Specify your Git repo URL: https://github.com/yashwanthm/react-openshift-example 
  7. You will now be moved to the Topology view, and the app will start to deploy. Give it about a minute to finish deployment. While it’s deploying, you will be able to view the logs.
  8. Once it’s done deploying, you can click on the OpenURL button to see the UI of your React application running on OpenShift.

Congratulations! You now have a vanilla React application that runs on OpenShift without having to work with complex configurations that are needed. Read on for details on how to make a change and see the change go live for your application.

Fork and deploy your own repo

Now that you tried using the example repository, follow these steps to deploy your own repo:

  1. Fork https://github.com/yashwanthm/react-openshift-example or create your own repo.
  2. Copy the URL.
  3. Log in to the Developer Sandbox.
  4. Import from Git and use your repository to create an application.
  5. Access your application.
  6. Add CD.
  7. Make changes to the source App.js, commit, and push.
  8. See your changes get deployed automatically.

Add continuous deployment

Continuous deployment is a strategy in software development where code changes to an application are released automatically into the production environment. It speeds up time to market by eliminating the lag between coding and customer value. OpenShift enables developers to configure this using a few simple UI-based steps.

Now, let’s begin adding CD to the application we just created:

  1. Click on Actions.
  2. Select Edit <application name>.
  3. Check the Add pipeline checkbox. You can see the pipeline visualization if you’d like to understand the steps.
  4. Click Save.

Note: OpenShift Sandbox will suspend your application when it is idled but will bring back the pod up when there’s a hit to the URL, it takes a few seconds for the application to load. However, this will not be the case on your production OpenShift instance. 

Conclusion

OpenShift provides a simplified developer experience for running the applications on the cloud. Explore other popular activities for the sandbox:

Comments