This article will help you get started with ReactJS apps on OpenShift. You will learn how to:
- 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.
- Manage product and development environments for a React application.
- Add continuous deployment (CD) to your React application to automatically deploy updates to your repository.
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
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:
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:
- Create a Sandbox account using https://developers.redhat.com/developer-sandbox
- Once you have the account, click on Start using your sandbox.
- Give it a few seconds and your sandbox instance will load up.
- On the left side menu, click on +Add.
- Select Import from Git.
- Specify your Git repo URL:
- 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.
- 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:
https://github.com/yashwanthm/react-openshift-exampleor create your own repo.
- Copy the URL.
- Log in to the Developer Sandbox.
- Import from Git and use your repository to create an application.
- Access your application.
- Add CD.
- Make changes to the source
App.js, commit, and push.
- 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:
- Click on Actions.
- Select Edit <application name>.
- Check the Add pipeline checkbox. You can see the pipeline visualization if you’d like to understand the steps.
- 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.
OpenShift provides a simplified developer experience for running the applications on the cloud. Explore other popular activities for the sandbox: