As ReactJS continues to grow in popularity and influence, it will become more important for frontend developers and teams to learn new and efficient ways to deploy their React applications. In this blog, I hope to share some simple and repeatable steps that can be used to not only show a new way to deploy a ReactJS application but also help build skills in Red Hat OpenShift.
In my blog where I described some simple steps on how to deploy a Node Server to Red Hat OpenShift, I used a very basic Node application to simplify the steps to deployment. Similarly, in this blog, we will be creating a VERY SIMPLE ReactJS application that we can quickly build and deploy.
Similarly, as in my previous blog, the main purpose of this blog is to serve as a place for devs to quickly turn to when they want to quickly and easily deploy a ReactJS application to Red Hat OpenShift(RHOS). Also, to give developers access to a free RHOS environment to work and experiment in.
NOTE: So in order to make this step-by-step really simple, we will be creating a very simple and vanilla ReactJS application that you can quickly make. In order to do so, you will need to make sure you have Node installed on your machine. If you do not have Node, you can install it from this site which includes npm (Node Package Manager): NodeJS Homepage
So let's get started...
Step 1: Create a Simple ReactJS Application
So our first step will be to create a very simple ReactJS application on our local machine. NOTE: The process we will use for deploying to RHOS will also work for much more complex ReactJS applications.
So the first thing we will do is open up a terminal window and then navigate to the folder that we would like to create our project within. In my case I will be creating my project on my Desktop. So using the change directory command my command will look something like this.
cd <directory-path>/Desktop
This is what my command will look like:
Once we've navigated to the folder in my terminal, we will run this command:
npx create-react-app our-simple-react-js-app
This command will initialize the process of creating the necessary files for creating a ReactJS based application/project. It will be a scripted process that will build our ReactJS application and give us all the starter files we need to get it up and running. When it has completed successfully you should see something like this in your terminal:
If you are familiar with React, then you probably already know that once you have completed this process, you now have a working ReactJS application. But before we test that our application is working, we need to make some minor project changes in order to prepare our application for RHOS.
First, navigate into the folder that was just created for us. My command looks like this:
cd <directory-path>/Desktop/our-simple-react-js-app
Before we go any further, let's make the updates we need so our application can be properly deployed to Red Hat OpenShift.
The only thing we really have to do is set our React application to deploy to the 8080 port on our local machine by default. This is important because when we deploy our application to RHOS, RHOS will be expecting our application to be deployed at this port. When first deploying React applications to RHOS, this can really trip you up if you are unaware.
So in order to make this possible, we will be using an environment variable file to set the port where our ReactJS application will be deployed. Commonly, in web applications, developers will use an "Environmental Variables" file in order to not directly embed their environmental and configuration variables into their code. This allows for better security and can make development of complex applications a bit easier.
So what we are going to do is create a file with the name ".env". Use this command:
touch .env
NOTE: By default this file will appear as a hidden file on your system, so if you do not see it in your application folder, you will need to change the view settings on your machine. For MacOS machines you can use the command, cmd+shift+period.
Once the file is created, let's open our ".env" file and insert this line of code:
PORT=8080
With that simple change, our ReactJS application should now be deployed to the 8080 port by default. So let's go ahead and test that our application is working correctly.
So let's run our application using this command:
npm start
We will likely be automatically navigated to our application, but if not, navigate to http://localhost:8080/ to see your application up and running:
Once we have confirmed that it's working, navigate to the terminal window and stop our application by using the hotkey command "ctrl+c". Note: You can also entirely close the terminal window but you will need to navigate back to our server folder using the 'cd' command.
Now that we have confirmed that our ReactJS application is working correctly, it's time for us to add some code that will allow our ReactJS application to be easily deployed in RHOS.
Step 2: Creating a Dockerfile
So if you are not very familiar with Red Hat OpenShift, RHOS is a containerization platform and in order to make out application easy to deploy RHOS, so we need to set it up our application to be containerized. NOTE: If you are interested in learning more about Red Hat OpenShift check out my Red Hat OpenShift 1001 blog post
In order to do this, we will be using a Dockerfile to specify the commands to containerize our application using Docker. If you are not familiar with the containerization process, check out my blog for the basics on containerization and my blog for how to containerize a ReactJS application.
In our terminal window lets run the touch command and make a Dockerfile:
touch Dockerfile
Once our Dockerfile is created, let's open it and insert the code below:
#Build Steps
FROM node:alpine3.10 as build-step
RUN mkdir /app
WORKDIR /app
COPY package.json /app
RUN npm install
COPY . /app
RUN npm run build
#Run Steps
FROM nginx:1.19.8-alpine
COPY --from=build-step /app/build /usr/share/nginx/html
This code is simply the directives that we will give to RHOS to correctly build our containerized ReactJS application. Since I explain in detail what these commands are doing in one of my previous blogs, I will not go into detail on what each of line of code does in this Dockerfile.
For the sake of time, we will not be containerizing this application locally and testing it but if you are interested in what that process entails, please check out my blog on containerizing ReactJS apps.
Now that we have our code containerized and ready to be deployed, we have one more step to prepare everything...
Step 3: Publish Code to Code Repository
So in this step we need to push our code to a code repository such as Github, Gitlab, Bitbucket or any other code repo tool that uses a Git-based source code. I recommend setting your repository to be public as it makes the next steps a bit easier. You can set it as private but you will need to do a few extra steps (that we will not cover here) in order to connect it to RHOS.
For ease of following these steps, I have provided a link to my personal repo with the above code hosted for you. Here is the link to the repo:
Simple ReactJS Application Git Repo
Now that we have our code accessible via the web, we will be connecting our repo to our RHOS project to quickly build our server using the Source-to-Image method and directly using the Dockerfile we just created. I'll describe these steps more in detail in the coming steps.
Step 4: Create an Instance of Red Hat OpenShift
Note: If you already have access to an Instance of Red Hat OpenShift, you can just skip straight to Step 5.
So one tricky thing about working with Red Hat OpenShift is that it can sometimes be tough to get hands-on with the tools since in general RHOS has a cost associated to it to deploy it on the web.
But luckily IBM has some resources that allows anybody to get some hands-on time with Red Hat OpenShift for 🔥Free🔥!
One of those resources is IBM Open Labs Red Hat OpenShift on IBM Cloud.
The only thing you will need to access the resources is a FREE IBM Cloud account. If you do not have an account, you can sign-up for your account here: IBM Cloud Account Sign-up
Once we have an IBM Cloud account, using Open Labs, we are able to get a provisioning of RHOS environment for 4 hours at No Charge. All you need to do is navigate to website link and Launch the Lab and you have access to Red Hat OpenShift for limited period of time.
Just to make these steps consistent, I will go through the steps using IBM Open Labs. If you have access to your own RHOS instance, you can skip to the portion of these steps and head to Step 5.
So let's first navigate to IBM Cloud Labs: Red Hat OpenShift On IBM Cloud Website.
Scroll down slightly until we see the "Hands On Labs" sections and select the "Launch Labs" button anywhere in this section:
Once we select Launch Labs, we will be prompted to sign-in to IBM Open Labs using our IBM Cloud Account. NOTE: If you do not have an IBM Cloud account, feel free to register on this page or via this sign-up link:
Once we've signed-in, we will be brought back to Open Labs page. Wait a few moments. We will likely see a message saying "Please wait..provisioning the lab" and then followed by a pop-up titled "Launch Lab":
In the "Launch Lab" pop-up, select "No" to the "Do you have an Opportunity Id" and then select the "Launch Lab" Button.
Once we select "Launch Lab" we will see a few messages saying that the Lab is provisioning and that the lab is being setup. This normally take about 30 seconds to about a minute.
Once it's finished loading, we should be presented with this page:
NOTE: Once we launch the lab, your 4 hour time limit for using the RHOS instance has begun. We can always re-launch the lab later but be aware that this instance will be de-provisioned after that time allotted expires.
Once on this page, select the "Exercise 1" option on the left sidebar, then select "Red Hat OpenShift on IBM Cloud Basics":
Once on the next page, select the link under the "Access the OpenShift web console" on the first step of the Exercise:
This will navigate us to our IBM Cloud account and our Free Red Hat OpenShift Instance that has been provisioned for us. Note: It may take a few seconds for the page to fully load as it pulls in our info.
Once on the page we should likely see that we are in a "DTE" Account and that your Red Hat Instance name is something starting with "dte". Eg. "dte-abc12-ks8xyz":
Once on the page, let's launch our OpenShift instance using the RHOS web console. In the top-right corner page of the page select the button titled "OpenShift web console":
Once we select the "OpenShift web console" we should be presented with a page like this:
We now have an instance of Red Hat OpenShift running and can get ready to deploy our simple Node application.
REMINDER: Once you launch the lab, your 4 hour time limit for using the RHOS instance has begun. You can always re-launch the lab later but be aware that this instance will be de-provisioned after that time.
Step 5: Creating a RHOS Project
So before we deploy our React application, we need to create a project that our React app will be associated to. It's a very simple process and only should take a minute or two.
First thing we will do is change our RHOS dashboard view to the "Developer Perspective" view. In the top left corner select the option drop-down in the left panel titled "Administrator". Once the drop-down opens, select "Developer":
Once we select "Developer" we will be switched to the Develop view and will likely be presented with a pop-up that looks something like the image below. We can select "skip tour" for now but feel free to select "Get Started" to get an overview of the Developer Perspective.
Now let's create our project. On this page, select the drop-down that likely says "Project: all projects" near the top left and select the "Create Project" option:
Once we select that option we will be presented with a "Create Project" pop-up. Enter any name we desire for the Name. I will be putting "simple-react-js-app". All other fields are optional. Note: Name must be all lower-case.
Once we have entered the info, select the "Create" Button:
The project is now created and we should be presented with the "Topology" page where it will say "No Resources Found". Well soon it will find ALL the resources 😅. In our next step, we will deploying our React app aka our first resource.
Step 6: Deploying our Simple React App
We are finally there! It's time to deploy our React App. Only a few more steps and and our app will be live!
Now that we have our RHOS Instance and our project made, we will now be using OpenShifts's Source-to-Image method to simply and quickly deploy our application.
In short, this functionality takes our code from our Git Repo, builds a container image and deploys it into our Red Hat OpenShift Environment. It literally does most of the hard work for us.
In order to build and deploy our application, we are going to use one of two options; "From Git" or "From Dockerfile".
Option 1 : From Git (Source-to-Image)
So using our first option, all we are going to do is initiate the Source-to-Image (S2I) process and watch our application get deployed and view the results. Essentially, Red Hat OpenShift will automatically identify what type of code base is being used and then use the appropriate containerization process to create a container image. We only have to do a few small things.
On our Topology page, let's select the "From Git" option:
Once selected we should see this page:
Once on this page, we will enter the link to our Git Repo in the "Git Repo URL" text box. I will be using the link to my React Repo. Feel Free to use that link as well:
As we can see from above, my git repo was validated once I entered it. Also, you may have noticed, the RHOS automatically identified that we are using a Node JS builder image for our application:
That's the nice thing about S2I, it can save you a lot of time by automatically identifying the language we are using to build your application.
As you scroll down, we will see Builder Image Version drop-down. In our case, the default version selected should be fine.
All that's left is to give our application a unique application name and component name. I will be using "our-simple-react-app" and "our-simple-react-frontend" respectively:
If we scroll further, we will see the "Resources" and "Advanced Options" Section. Under "Resources" ensure the "Deployment" option is selected. Under "Advanced Options" ensure the "Create a route to the application URL" option is checked. As it notes near the option, this ensures that a public url is created for our newly created application:
Once all those options are confirmed, click the "Create" button at the bottom of the page:
Once we select the "Create" button we will be navigated back to "Topology" page where we will see that our application now exists.
Option 2: From Docker File
The second option is to build our application using the Dockerfile we created earlier using "From Dockerfile". This is preferred for applications where we have specific containerization process we would like our application to follow when creating a container image. The steps are very similar to the S2I process, so let's try it out.
Back on our Topology Page (can be accessed using the "+ Add" button) select the "From Dockerfile" option:
Once selected we should see this page:
Once on this page, we will enter the link to our Git Repo in the "Git Repo URL" text box. I will be using the link to my React Repo. Feel Free to use that link as well:
In order for the RHOS to build our application using our custom Dockerfile we must make sure it knows the location of our Dockerfile. In our case, our Dockerfile is located in our main folder so we are good to go. Just ensure that in the box titled "Dockerfile path" that the value is "Dockerfile:
All that's left is to give our application a unique application name and component name. I will be using "our-simple-react-js-app" and "our-simple-react-frontend" respectively:
If we scroll further, we will see the "Resources" and "Advanced Options" Section. Under "Resources" ensure the "Deployment" option is selected. Under "Advanced Options" ensure the "Create a route to the application URL" option is checked. As it notes near the option, this ensures that a public url is created for our newly created application:
Once all those options are confirmed, click the "Create" button at the bottom of the page:
Once we select the "Create" button we will be navigated back to "Topology" page where we will see that our application now exists.
Over the next few minutes, we will see our application go through the process of being built. The small icon to bottom left of our resource/application will change as shown below. This should take a few minutes but once the "green check" appears that means our application was deployed successfully:
Just a note, if we select the center of our application on the Topology view, it will open a details panel that will show us more information about it. Things about our build, services, routes, and monitoring information:
Now that our application is up and running, we can either select the "New window" icon on our resource in the topology view to open our server OR scroll down in our details panel under the "Resources" tab and select our URL under the "Routes" section.
Selecting either will open our application URL and we should see something like this:
Sometimes, you may see a page like the image below even when you see a "green check" mark on your build after a successful deploy:
There are a few reasons this might happen. The two main ones are that:
1) The application is still in the process of starting though it has finished building and needs a bit more time to be ready (maybe a ~1-2 minutes). Feel free to check the logs of your application deployment by selecting the "View logs" button in the application details panel in the "Resources" tab under the "Pods" section to make sure everything seems fine.
2) The hosting port we selected in our server application does not match what RHOS is expecting. By default, RHOS exposes our application at the 8080 host port and if we identify a different port in our application code, it can cause deployment issues. To fix this, just ensure that the port selected to be hosted at in our code is 8080. Once you make that change, push the new code to your same repo and select the "Start Build" button from the application details panel under the "Resources" tab. This will automatically rebuild the application from your repo using the updated code.
WE DID IT!!
We successfully deployed a React JS app to Red Hat OpenShift.
Just like the NodeJs application, after a few easy steps our application is now up and running in our own personal Red Hat OpenShift Environment. As I've said before, I very much encourage you to try deploying even more complex ReactJS applications and seeing what you learn along the way.
And though you are limited to 4 hours on a single RHOS session using IBM Open Labs, keep experimenting and consider follow the lab instructions presented on the site to learn even more.
And remember..
Learning is a journey and you never know how far it will take you.
Thanks again for checking out this blog and I look forward to coding with you all in the future,
Never Stop Learning My Friends,
Bradston Henry
==== FOLLOW ME ON SOCIAL MEDIA ====
Twitter: Bradston Dev
Dev.to: @bradstondev
Youtube: Bradston YT
LinkedIn : Bradston Henry
Top comments (0)