Modern web applications on OpenShift: Part 1 — Web apps in two commands
In this multi-part series, we will take a look at how to deploy modern web applications, like React and Angular apps, to Red Hat OpenShift using a new source-to-image (S2I) builder image.
- Part 1: How to deploy modern web apps using the fewest steps
- Part 2: How to combine this new S2I image with a current HTTP server image, like NGINX, using an OpenShift chained build for a more production-ready deployment
- Part 3: How to run your app’s development server on OpenShift while syncing with your local file system
Some initial setup
If you want to follow along, there are some prerequisites. You’ll need a running instance of OpenShift. I’ll be using minishift which allows you to run OpenShift on your Windows, Mac, or Linux desktop in a VM. To get minishift, download Red Hat Container Development Kit (CDK). Follow these instructions to install and getting minishift running. For more information see the CDK documentation, and the documentation on OKD.io.
Once minishift is running, you need to make sure you are logged in and have a project set up, which you can do using code like this:
$ oc login $ oc new-project web-apps
I also assume you have Node.js 8+ and npm 5.2+ installed.
If all you want to see are the two commands, skip to the “Summary” section.
Everything you need to grow your career.
With your free Red Hat Developer program membership, unlock our library of cheat sheets and ebooks on next-generation application development.SIGN UP
What is a modern web application?
Before we begin, we should probably define what exactly a modern web application is and how it differs from what I like to call a “pure” Node.js application.
But the static content that is generated (compiled) doesn’t necessarily need a node process to serve it. Yes, you could use something like the serve module, which is nice for development since you can see your site quickly, but for production deployments, it is usually recommend to use something like NGINX or Apache HTTP Server.
A “pure” node application, on the other hand, will use a Node.js process to run and can be something like an Express.js application (that is, a REST API server), and there isn’t usually a build step (I know, I know: Typescript is a thing now). Development dependencies are usually not installed since we only want the dependencies that the app uses to run.
To see an example of deploying a “pure” node app to OpenShift quickly using our Node.js S2I image, check out my post on deploying an Express.js application to OpenShift.
Deploying a web app to OpenShift
Now that we understand the difference between a modern web application and a Node.js application, let’s see how we go about getting our web app on OpenShift.
For this post, we will deploy both a React and a modern Angular application. We can create both projects pretty quickly using their respective CLI tools,
@angular/cli. This will count as one of the two commands I referred to in the title.
Let’s start with the React application. If you have
create-react-app installed globally, great. But if not, then you can run the command using
npx like this:
$ npx create-react-app react-web-app
Note: npx is a tool that comes with npm 5.2+ to run one-off commands. Check out more here.
This command will create a new React app, and you should see something like this:
Assuming you are in the newly created project directory, you can now run the second command to deploy the app to OpenShift:
$ npx nodeshift --strictSSL=false --dockerImage=nodeshift/ubi8-s2i-web-app --imageTag=10.x --build.env YARN_ENABLED=true --expose
Your OpenShift web console will look something like this:
And here’s what the web console looks like when you run the application:
Before we get into the Angular example, let’s see what that last command was doing.
First, we see
npx nodeshift. We are using npx to run the nodeshift module. As I’ve mentioned in previous posts, nodeshift is a module for easily deploying node apps to OpenShift.
Next, let’s see what options are being passed to nodeshift. The first is
--strictSSL=false. Since we are using minishift, which is using a self-signed certificate, we need to tell nodeshift (really, we are telling the request library, which is used under the covers), about this so a security error isn’t thrown.
--dockerImage=nodeshift/ubi8-s2i-web-app --imageTag=10.x. This tells nodeshift we want to use the new Web App Builder image and we want to use its 10.x tag.
Next, we want to tell the S2I image that we want to use yarn:
--build.env YARN_ENABLED=true. And finally, the
--expose flag tells nodeshift to create an OpenShift route for us, so we can get a publicly available link to our application.
Since this is a “get on OpenShift quickly” post, the S2I image uses the serve module to serve the generated static files. In a later post, we will see how to use this S2I image with NGINX.
Now let’s create an Angular application. First, we need to create our new application using the Angular CLI. Again, if you don’t have it installed globally, you can run it with npx:
$ npx @angular/cli new angular-web-app
This will create a new Angular project, and as with the React example, we can run another command to deploy:
$ npx nodeshift --strictSSL=false --dockerImage=nodeshift/ubi8-s2i-web-app --imageTag=10.x --build.env OUTPUT_DIR=dist/angular-web-app --expose
Again, similar to the React application, your OpenShift web console will look something like this:
And here’s what the web console looks like when you run the application:
Let’s take a look at that command again. Even though it looks very similar to the command we used for the React app, there is are some very important differences.
The differences are with the
--build.env OUTPUT_DIR=dist/angular-web-app. There are two things different here.
First, we removed the
YARN_ENABLED variable, since we aren’t using yarn for the Angular project.
The second is the addition of the
OUTPUT_DIR=dist/angular-web-app variable. So, by default, the S2I image will look for your compiled code in the
build directory. React uses
build by default; that is why we didn’t set it for that example. However, Angular uses something different for its compiled output. It uses
dist/<PROJECT_NAME>, which in our case is
For those who skipped to this section to see the two commands to run, here they are:
$ npx create-react-app react-web-app $ npx nodeshift --strictSSL=false --dockerImage=nodeshift/ubi8-s2i-web-app --imageTag=10.x --build.env YARN_ENABLED=true --expose
$ npx @angular/cli new angular-web-app $ npx nodeshift --strictSSL=false --dockerImage=nodeshift/ubi8-s2i-web-app --imageTag=10.x --build.env OUTPUT_DIR=dist/angular-web-app --expose
In this article, we saw how quickly and easily we can deploy a modern web app to OpenShift using the new S2I Web App Builder image. The examples use the community version of the image, but very soon there will be an official Red Hat Openshift Application Runtime (RHOAR) tech preview release. So watch out for that.
In the coming articles, we will take a deeper look at what the image is actually doing and how we can use more of its advanced features, as well as some advanced features of OpenShift, to deploy a more production-worthy application.
Read part 2 of this series to learn how to combine this new S2I image with a current HTTP server image like NGINX, using an OpenShift chained build for a more production-ready deployment.
Read part 3 of this series to see how you can run your app’s “development workflow” on OpenShift.
For more information, download the free ebook Deploying to OpenShift.
Join the Red Hat Developer Program (it’s free) and get access to related cheat sheets, books, and product downloads.