Skip to main content
Redhat Developers  Logo
  • Products

    Featured

    • Red Hat Enterprise Linux
      Red Hat Enterprise Linux Icon
    • Red Hat OpenShift AI
      Red Hat OpenShift AI
    • Red Hat Enterprise Linux AI
      Linux icon inside of a brain
    • Image mode for Red Hat Enterprise Linux
      RHEL image mode
    • Red Hat OpenShift
      Openshift icon
    • Red Hat Ansible Automation Platform
      Ansible icon
    • Red Hat Developer Hub
      Developer Hub
    • View All Red Hat Products
    • Linux

      • Red Hat Enterprise Linux
      • Image mode for Red Hat Enterprise Linux
      • Red Hat Universal Base Images (UBI)
    • Java runtimes & frameworks

      • JBoss Enterprise Application Platform
      • Red Hat build of OpenJDK
    • Kubernetes

      • Red Hat OpenShift
      • Microsoft Azure Red Hat OpenShift
      • Red Hat OpenShift Virtualization
      • Red Hat OpenShift Lightspeed
    • Integration & App Connectivity

      • Red Hat Build of Apache Camel
      • Red Hat Service Interconnect
      • Red Hat Connectivity Link
    • AI/ML

      • Red Hat OpenShift AI
      • Red Hat Enterprise Linux AI
    • Automation

      • Red Hat Ansible Automation Platform
      • Red Hat Ansible Lightspeed
    • Developer tools

      • Red Hat Trusted Software Supply Chain
      • Podman Desktop
      • Red Hat OpenShift Dev Spaces
    • Developer Sandbox

      Developer Sandbox
      Try Red Hat products and technologies without setup or configuration fees for 30 days with this shared Openshift and Kubernetes cluster.
    • Try at no cost
  • Technologies

    Featured

    • AI/ML
      AI/ML Icon
    • Linux
      Linux Icon
    • Kubernetes
      Cloud icon
    • Automation
      Automation Icon showing arrows moving in a circle around a gear
    • View All Technologies
    • Programming Languages & Frameworks

      • Java
      • Python
      • JavaScript
    • System Design & Architecture

      • Red Hat architecture and design patterns
      • Microservices
      • Event-Driven Architecture
      • Databases
    • Developer Productivity

      • Developer productivity
      • Developer Tools
      • GitOps
    • Secure Development & Architectures

      • Security
      • Secure coding
    • Platform Engineering

      • DevOps
      • DevSecOps
      • Ansible automation for applications and services
    • Automated Data Processing

      • AI/ML
      • Data Science
      • Apache Kafka on Kubernetes
      • View All Technologies
    • Start exploring in the Developer Sandbox for free

      sandbox graphic
      Try Red Hat's products and technologies without setup or configuration.
    • Try at no cost
  • Learn

    Featured

    • Kubernetes & Cloud Native
      Openshift icon
    • Linux
      Rhel icon
    • Automation
      Ansible cloud icon
    • Java
      Java icon
    • AI/ML
      AI/ML Icon
    • View All Learning Resources

    E-Books

    • GitOps Cookbook
    • Podman in Action
    • Kubernetes Operators
    • The Path to GitOps
    • View All E-books

    Cheat Sheets

    • Linux Commands
    • Bash Commands
    • Git
    • systemd Commands
    • View All Cheat Sheets

    Documentation

    • API Catalog
    • Product Documentation
    • Legacy Documentation
    • Red Hat Learning

      Learning image
      Boost your technical skills to expert-level with the help of interactive lessons offered by various Red Hat Learning programs.
    • Explore Red Hat Learning
  • Developer Sandbox

    Developer Sandbox

    • Access Red Hat’s products and technologies without setup or configuration, and start developing quicker than ever before with our new, no-cost sandbox environments.
    • Explore Developer Sandbox

    Featured Developer Sandbox activities

    • Get started with your Developer Sandbox
    • OpenShift virtualization and application modernization using the Developer Sandbox
    • Explore all Developer Sandbox activities

    Ready to start developing apps?

    • Try at no cost
  • Blog
  • Events
  • Videos

Deploy React applications to OpenShift

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

April 11, 2023
Yashwanth Maheshwaram
Related topics:
CI/CDKubernetes
Related products:
Developer SandboxRed Hat OpenShift

Share:

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: 

  • If you are using Red Hat Enterprise Linux (RHEL): https://access.redhat.com/products/nodejs
  • If you're using any other operating system: https://nodejs.org/en/

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:

  • Deploy a Java application on Kubernetes in minutes
  • Migrate and deploy Cloud Foundry applications to Kubernetes
  • Run the Canary Deployment pattern on Kubernetes
Last updated: September 19, 2023

Related Posts

  • Making environment variables accessible in front-end containers

  • Develop with Node.js in a container on Red Hat Enterprise Linux

  • Get started with reactive programming with creative Coderland tutorials

  • Building rootless containers for JavaScript front ends

Recent Posts

  • How to run AI models in cloud development environments

  • How Trilio secures OpenShift virtual machines and containers

  • How to implement observability with Node.js and Llama Stack

  • How to encrypt RHEL images for Azure confidential VMs

  • How to manage RHEL virtual machines with Podman Desktop

What’s up next?

Gitops Cookbook e-book tile card

Get useful recipes and examples for successful hands-on application development and deployment with GitOps in this free O'Reilly e-book.

Get the e-book
Red Hat Developers logo LinkedIn YouTube Twitter Facebook

Products

  • Red Hat Enterprise Linux
  • Red Hat OpenShift
  • Red Hat Ansible Automation Platform

Build

  • Developer Sandbox
  • Developer Tools
  • Interactive Tutorials
  • API Catalog

Quicklinks

  • Learning Resources
  • E-books
  • Cheat Sheets
  • Blog
  • Events
  • Newsletter

Communicate

  • About us
  • Contact sales
  • Find a partner
  • Report a website issue
  • Site Status Dashboard
  • Report a security problem

RED HAT DEVELOPER

Build here. Go anywhere.

We serve the builders. The problem solvers who create careers with code.

Join us if you’re a developer, software engineer, web designer, front-end designer, UX designer, computer scientist, architect, tester, product manager, project manager or team lead.

Sign me up

Red Hat legal and privacy links

  • About Red Hat
  • Jobs
  • Events
  • Locations
  • Contact Red Hat
  • Red Hat Blog
  • Inclusion at Red Hat
  • Cool Stuff Store
  • Red Hat Summit

Red Hat legal and privacy links

  • Privacy statement
  • Terms of use
  • All policies and guidelines
  • Digital accessibility

Report a website issue