Deploy Web UI with with Node.js and AngularJS


In this lab you will learn about Node.js and will deploy the Node.js and Angular-based web frontend for the CoolStore online shop which uses the API Gateway services you deployed in previous labs.

API Gateway Pattern

What is Node.js?


Node.js is an open source, cross-platform runtime environment for developing server-side applications using JavaScript. Node.js has an event-driven architecture capable of non-blocking I/O. These design choices aim to optimize throughput and scalability in Web applications with many input/output operations, as well as for real-time web applications.

Node.js non-blocking architecture allows applications to process large number of requests (tens of thousands) using a single thread which makes it desirable choice for building scalable web applications.

Deploy on OpenShift

The Web UI is built using Node.js for server-side JavaScript and AngularJS for client-side JavaScript. Let’s deploy it on OpenShift using the certified Node.js container image available in OpenShift.

In the previous labs, you only used the S2I builder image for injecting developer source code inside a running container. In this lab, you will fully use OpenShift Source-to-Image (S2I). OpenShift will obtain the application code directly from the source repository then build and deploy a container image of it.

In the OpenShift Web Console, from the Developer view, click on '+Add' and select 'Import from Git'

OpenShift - Add from Git

Then, enter the following information:

Table 1. Web UI Project
Parameter Value

Git Repo URL


Git Reference


Context Dir


Builder Image








Create a route to the application


Show advanced routing options

Expand - see below

From the advanced routing options de-select the Secure Route option, so this creates an HTTP route like below:-

OpenShift - Add route

Click on 'Create' button

Now wait a few minutes for the application to built by OpenShift and deployed to your project. In the toplogy view, the web application pod will not be ready until the blue ring goes dark blue.

Test your Service

In the OpenShift Web Console, from the Developer view, click on the 'Open URL' icon of the Web Service

OpenShift - Web Topology

Your browser will be redirected to your Web Service running on OpenShift. You should be able to see the CoolStore application with all products and their inventory status.

CoolStore Shop

Well done! You are ready to move on to the next lab.