Modern apps with OpenShift, part 1: web apps in just two commands

We’re starting a series of posts in which we’ll show you how to deploy to Red Hat OpenShift modern web apps like React or Angular using the new S2I (source-to-image) builder image.

What’s coming in this series of posts:

  • Part 1: how to deploy modern web applications in just a few steps
  • Part 2: how to use a new S2I image along with an existing HTTP server image, for example NGINX, using the OpenShift build chain to organize production deployment;
  • Part 3: how to start a development server for your application on the OpenShift platform and synchronize it with the local file system.

Preparatory actions

First of all, we need OpenShift installed. We will be using minishift, which allows you to run OpenShift in a virtual machine on Windows, Mac or Linux computers. To get a minishift, download Red Hat Container Development Kit (CDK) and execute these instructions on its installation and launch. More information can be found in CDK documentation and in the documentation on the site OKD.io

After minishift is launched, you need to log in and configure the project, which is done in just two commands:

$ oc login

$ oc new-project web-apps

This assumes you have Node.js 8+ and npm 5.2+ already installed.

If you opened this article just to find out what these two such magic commands are, skip to the final part. Otherwise, go further along the text!

What is a modern web application?

First of all, we need to decide what we mean by “modern web application” and how it differs from the so-called “pure” Node.js application.

For us, a modern web app is something like React, Angular or Ember, with a build step that generates static HTML, JavaScript, and CSS. During the build phase, several tasks are usually performed, such as concatenation, transpilation (Babel or Typescript), and file minification. Each of the major frameworks has its own build process and pipeline, but tools like Webpack, Grunt, and Gulp also fall into this category. And all of these tools use Node.js to run build processes.

However, the static content generated (compiled) at this stage does not necessarily need a node process to serve it. Yes, you can use something like serve modulewhich is great for development as it allows you to quickly see what the site looks like. But for production deployments, it is usually recommended to use something like NGINX or Apache HTTP Server.

On the other hand, a “pure” node application will use the Node.js process to start and can be something like an application Express.js (i.e. REST API server) – usually it does not have a build step (yes, we are aware of Typescript). Development dependencies are usually not installed because we only need the ones that are used to run the application.

To read about how to deploy a “clean” node application on OpenShift using our Node.js S2I image, you can, for example, here

Deploying a web application on OpenShift

Now that we’ve outlined the difference between a modern web app and a Node.js app, let’s show you how to actually deploy our web app to OpenShift.

Here we will be deploying both a React app and a modern Angular app. Both of these projects can be created fairly quickly using the appropriate CLI tools: create-react-app and angular / cli. This will be one of the two commands that appear in the title of this article.

React app

If you already have create-react-app installed globally, great. If not, then just run the appropriate command with npx, like this:

$ npx create-react-app react-web-app

Note: npx is a tool for running one-time commands that is included with npm 5.2+, see more details. here

This command will create a new React app, and you should see something like this on the screen:

Assuming you are in the newly created project directory, you can run the second command to deploy our application to OpenShift:

$ npx nodeshift --strictSSL=false --dockerImage=nodeshift/ubi8-s2i-web-app --imageTag=10.x --build.env YARN_ENABLED=true --expose

Now the OpenShift console will look something like this:

And this is the web console after launching the application:

Before moving on to the Angular app, let’s take a look at what our last command does.

It starts with npx nodeshift – here we run the module with npx nodeshiftwhich makes it easy to deploy node applications on OpenShift.

Now let’s look at the options that are passed to nodeshift. The first is –strictSSL = false.

Since we have minishift, and it uses a self-signed certificate, we need to tell nodeshift this so that there are no security errors (in fact, we say this to the request library hidden under the hood).

Next comes the long option –dockerImage = nodeshift / ubi8-s2i-web-app –imageTag = 10.x. She tells nodeshift to use new Web App Builder image with tag 10.x.

Now we tell the S2I image that we want to use yarn: –build.env YARN_ENABLED = true. Finally, the –expose flag tells nodeshift to create an OpenShift route for us so that we can get a web-accessible URL to our application.

Since this is an article in the “OpenShift in Swift” series, the S2I image here uses serve module for serving generated static files. In the next post, we will show you how to use the same S2I image with NGINX.

Angular app

Now let’s create an Angular app. The first step is to create our new application using the Angular CLI. Again, if you don’t have it installed globally, you can start it with npx:

$ npx @angular/cli new angular-web-app

This command will create a new Angular project, and we, as is the case with the React application, then just run another command to deploy it:

$ npx nodeshift --strictSSL=false --dockerImage=nodeshift/ubi8-s2i-web-app --imageTag=10.x --build.env OUTPUT_DIR=dist/angular-web-app --expose

Similar to the React case, the OpenShift web console will look something like this:

And this, respectively, is the web console when you launch the application:

Now let’s take a look at the deployment command. It is very similar to React, but there are important differences.

The differences are in the build.env flag: for Angular we write –build.env OUTPUT_DIR = dist / angular-web-app, and there are two points here.

First, we removed the YARN_ENABLED variable as we are not using yarn for our Angular project.

Second, we added the OUTPUT_DIR = dist / angular-web-app variable. Therefore, the S2I image will by default look for your compiled code in the build directory. React uses build by default, so we didn’t configure this setting in the previous example. But Angular uses other things for its compiled output. Therefore, we write that the ist / in our case is equal to dist / angular-web-app.

Conclusion

For those who skipped the parsing of the examples above and went here right from the beginning of the article, we show the two commands with which the deployment is performed:

React:

$ 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

Angular:

$ 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

Additional Resources

Today you saw how to quickly and effortlessly deploy a modern web application on OpenShift using the new S2I Web App Builder image. Our examples use the community version of this image, but Red Hat has already released Red Hat Openshift Application Runtime (RHOAR), so be careful.

In the next post, we’ll show you how to use a new S2I image along with an existing HTTP server image such as NGINX, using the OpenShift build chain to organize production deployments.

The third part of this series will focus on how to organize a development workflow for an application on the OpenShift platform.

We also recommend downloading and reviewing the free e-book Deploying to OpenShift

Similar Posts

2 Comments

  1. H, Thanks for this but but my deployment keeps failing with
    ENOENT: no such file or directory, open ‘/opt/app-root/src/package.json’
    Though I can see the file present in the archive that is upload! Any clue how to resolve this?

  2. Hi there when will the next post be avaliable? i’m looking to just as described . react app with nginx at the front.

Leave a Reply

Your email address will not be published. Required fields are marked *