Sorry, you need to enable JavaScript to visit this website.
Skip to main content
Redhat Developers  Logo
  • Start building apps

    Try Red Hat products now

    • Developer Sandbox for Red Hat OpenShift
      Try Red Hat's products and technologies without setup or configuration free for 30 days with this shared OpenShift and Kubernetes cluster.

    Hands-on learning

    • Learning paths
      Customize your learning to align with your needs and make the most of your time by exploring our massive collection of paths and lessons.

    Looking for more?

    • Start building modern apps
  • Products & technologies

    Linux

    • Red Hat Enterprise Linux
      A stable, proven foundation that's versatile enough for rolling out new applications, virtualizing environments, and creating a secure hybrid cloud.
    • Red Hat Universal Base Images (UBI)
    • Containers

    Cloud-native

    • Red Hat OpenShift
      Open, hybrid-cloud Kubernetes platform to build, run, and scale container-based applications -- now with developer tools, CI/CD, and release management.
    • Red Hat OpenShift Service on AWS (ROSA)
    • Kubernetes
    • Software Supply Chain Security
    • Cloud Native Application Development and Delivery Platform

    Automation

    • Red Hat Ansible Automation Platform
      Automate your cloud provisioning, application deployment, configuration management, and more with this simple yet powerful automation engine.
    • CI/CD
    • DevOps

    Java

    • Java runtimes and frameworks
      Deploy your application safely and securely into your production environment without system or resource limitations.
    • Java for developers
    • Event-driven architecture
    • Quarkus

    Looking for more

    • See all Red Hat Products
    • Browse all technologies
  • Events

    Join the DevNation community

    • DevNation events calendar
      Join us for online events, or attend regional events held around the world—you'll meet peers, industry leaders, and Red Hat's Developer Evangelists and OpenShift Developer Advocates.

    Looking for more?

    • Explore all developer events
  • Learn

    Featured free learning paths

    • Openshift & Kubernetes learning
    • OpenShift Data Science learning
    • OpenShift API Management learning

    More developer resources

    • Cheat sheets
    • E-books
    • Interactive tutorials
    • API Catalog and Documentation
    • Blogs and articles

    Looking for more?

    • Start learning now
  • Developer Sandbox

    Developer Sandbox (free)

    • Try hands-on activities in the Developer Sandbox
      Access Red Hat’s products and technologies without setup or configuration, and start developing quicker than ever before with our new, no-cost sandbox environments.
    • Explore the Developer Sandbox IDE

    Featured Developer Sandbox activities

    • Deploy a Java application on Kubernetes in minutes
    • Learn Kubernetes using the Developer Sandbox
    • Deploy full-stack JavaScript apps to the Developer Sandbox

    Ready to start developing apps?

    • Explore the free Developer Sandbox
  • DevNation

    Explore the community

    • What’s DevNation?
      Join developers across the globe for live and virtual events led by Red Hat technology experts.
    • Deep Dives
    • Tech Talks
    • The Show

    Upstream communities

    • Camel K
    • CentOS
    • Istio
    • Quarkus

    Looking for more DevNation?

    • Explore DevNation
  • Blog
Sandbox overview
  
Use case activities
  
Deploying full-stack JavaScript applications to the sandbox: Part 1
  
Part 2
JavaScript application deployment

Part 2: Deploying full-stack JavaScript applications to the Developer Sandbox for Red Hat OpenShift

This hands-on lab guides you through each stage of deploying a full-stack JavaScript application in a Red Hat OpenShift cluster using the Developer Sandbox for Red Hat OpenShift:

  • Part 1: Set up your environment and run the application locally, then build a container for the front end and deploy it to OpenShift.
  • Part 2: Deploy the back end and connect it to the front end using environment variables, then add a health check.
  • Part 3: Deploy a database and connect everything together, then deploy a new microservice from an existing container.

The demo application for this lab is a URL shortener and redirection service. It has a React front end and connects to a Node.js back end. In this part of the lab, you will deploy the Node.js back end using the OpenShift Source-to-Image (S2I) toolkit, then use environment variables to connect the back end to your front end. Note that this lab assumes you have already completed Part 1.

   Get access to the sandbox in minutes

Sandbox javascript activity

Deploy the Node.js back end

In the first part of this lab, you created a Dockerfile, built a JavaScript front-end container, and pushed it to a shared registry so it could be used by OpenShift.

OpenShift has several built-in options for application deployment. You will build and deploy a Node.js back end using OpenShift's Source-to-Image (S2I) toolkit.

Build the Node.js back end using S2I

Source-to-Image is a toolkit for building containers directly from the source code. To build the Node.js back end from the GitHub source code, you can use the oc new-app command, which you used in Part 1. This time, you must specify the GitHub repository where the source code is located; OpenShift will automatically pick the correct build image (Node.js 16 at this time). The --context-dir parameter specifies that the source code is located in the /back folder:

oc new-app https://github.com/nodeshift-blog-examples/urlshortener --context-dir=back

You should get a message back indicating that a build has started:

--> Found image dfd08e2 (2 months old) in image stream "openshift/nodejs" under tag "16-ubi8" for "nodejs"

    Node.js 16
    ----------
    Node.js 16 available as container is a base platform for building and running various Node.js 16 applications and frameworks. Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

    Tags: builder, nodejs, nodejs16

    * The source repository appears to match: nodejs
    * A source build using source code from https://github.com/nodeshift-blog-examples/urlshortener will be created
      * The resulting image will be pushed to image stream tag "urlshortener:latest"
      * Use 'oc start-build' to trigger a new build

--> Creating resources ...
    imagestream.image.openshift.io "urlshortener" created
    buildconfig.build.openshift.io "urlshortener" created
    deployment.apps "urlshortener" created
    service "urlshortener" created
--> Success
    Build scheduled, use 'oc logs -f buildconfig/urlshortener' to track its progress.
    Application is not exposed. You can expose services to the outside world by executing one or more of the commands below:
     'oc expose service/urlshortener'
    Run 'oc status' to view your app.

If you head to the Topology view in the OpenShift console, shown in Figure 1, you can see that the application is displayed with a white ring around it. This ring indicates that the application is currently being built. The source code is cloned, and the image is built directly on the OpenShift cluster.

The topology view in the OpenShift console shows that the application image is being built in OpenShift cluster.

Figure 1: An application image being built on the OpenShift cluster.

In a few minutes, you should see the ring turn blue, indicating that the image was successfully built.

Configure the environment variables

For the purpose of this lab, you'll use environment variables to indicate parameters in the back-end application. In the production server, you might want to change some of the environment variables.

We'll focus here on the back-end application's network port. The Node.js application was running on port 3001 in the development environment, which was set as an environment variable. In this case, you will change the port to 8080.

Click on the urlshortener circle denoting your application, and a side panel will open, as shown in Figure 2. In this panel, find the Actions menu in the top right corner and select Edit Deployment.

From the topology view of the OpenShift console, you can click on the application's circle (urlshortener), open the Actions menu, and select Edit Deployment.

Figure 2: Editing the application deployment in the OpenShift console.

A form-based deployment editor is then displayed, where you can see the description of the URL shortener application deployment. Scroll down the page and find the Environment section. Add a single variable with the name PORT and the value 8080, as shown in Figure 3.

In the edit screen, select Environment and change the PORT environment variable to assign a new network port to the application.

Figure 3: Changing the application's port number.

Click Save and go back to the OpenShift Topology view. If you go back fast enough, you might see a double ring around the URL shortener application, as shown in Figure 4. This is because OpenShift is currently deploying a new version of the application with the new environment variables. Once this new version is up and running, OpenShift takes the old version down. This process ensures that there is zero downtime when you update your applications.

After you make a change to your application, the old and new versions co-exist for a short time, indicated by the double circle around the icon in the topology view.

Figure 4: A double circle around the application icon shows two application versions co-existing temporarily.

Expose the application

Now that you've deployed the application back end, you can expose it using the same command you used for the front end:

oc expose svc/urlshortener

There is no need to specify the port in this case because S2I assumed that the application would be running on port 8080.

If you click on the Open URL link, you should see a response back from the server:

{ "msg": "Hello" }

You can also try the /health route, which should return the server and database status:

{ "server": true, "database": false }

You can see the code for this /health route in the urlshortener express server.

Add a health check

OpenShift can periodically check your pod to see whether it is still running. This process is called a health check. In the side panel, when you clicked on the urlshortener deployment, you might have noticed a message recommending that you add health checks. Go ahead and click on Add Health Checks, shown in Figure 5.

The link to Add Health Checks offers access to OpenShift's health checks.

Figure 5: Adding a health check to the URL shortener application.

From the next screen, you can add a liveness probe, which is a health check that monitors your application by doing periodic calls to the specified route. As long as the route returns a 200 HTTP code, OpenShift assumes that the application is still running.

To add this health check, click Add Liveness Probe. Change the path to /health and keep all the other default values.

Click the checkmark at the bottom of the dashed area, and then click the blue Add button to save the health check.

If you want to validate that the probe is working, visit the Resources tab from the deployment side-panel and click on View logs next to the pod name. This screen shows you the pod logs, and you should see the request to /health every 10 seconds.

Link the front end and back end

Now that the back end is up and running, you can test the application's About page again. If you open the developer tools in your browser and look at the network requests, you'll notice that some requests are made to %SERVER_NAME%/$BASE_URL/health. That is because the front end currently doesn’t have a value for the $BASE_URL environment variable.

Note: To learn more about how the front-end container injects environment variables in the JavaScript code, see Making environment variables accessible in front-end containers.

Add the BASE_URL environment variable

You can add environment variables using the oc CLI tool, but before you do that, you need to find the BASE_URL that the front-end needs to connect to. This base URL is the route to your back end. You can find this route by running the get route command:

oc get route urlshortener

NAME           HOST/PORT                                                         PATH   SERVICES       PORT       TERMINATION   WILDCARD
urlshortener   urlshortener-joelphy-dev.apps.sandbox.x8i5.p1.openshiftapps.com          urlshortener   8080-tcp                 None

If you want to get only the actual route:

Bash

You can use awk to extract it:

oc get route urlshortener | awk 'NR>1 {print $2}'

PowerShell

(oc get route urlshortener -o json | ConvertFrom-Json).spec.host

Now that you know how to get the URL, you can set it as an environment variable for the urlshortener-front deployment by using the  set env command with oc. Give it the environment variable name and the value of the route. Don’t forget to prepend http:// to the route:

Bash
oc set env deployment/urlshortener-front BASE_URL=http://$(oc get route urlshortener | awk 'NR>1 {print $2}')
deployment.apps/urlshortener-front updated
PowerShell

oc set env deployment/urlshortener-front BASE_URL=http://$((oc get route urlshortener -o json | ConvertFrom-Json).spec.host)

Now that you have configured the BASE_URL environment variable, you can go back to the URL shortener application and check its About page again. Figure 6 shows the current service status on the About page.

When the front end and back end are connected, the About page shows a service status of "Up and running."

Figure 6: The About page shows the service status is "Up and running."

You can see that the server is now up and running.

Conclusion to Part 2

The database and redirector services are still unreachable because you have not yet deployed them. You will add those in the third and final part of this lab.

Are you ready to move on to Part 3 of this activity series?

In Part 3, you will be guided through each step of deploying a full-stack JavaScript application in a Red Hat OpenShift cluster using the Developer Sandbox for Red Hat OpenShift.  Start Part 3    

More in this series

JavaScript activity part 1   
JavaScript activity part 2    
JavaScript activity part 3   

Related articles

Join the Red Hat team at OpenJS World 2021

Easily deploy Node.js applications to Red Hat OpenShift using Nodeshift

The browser wars and the birth of JavaScript

Use Node.js 12 on Red Hat OpenShift today

Modern web applications on OpenShift: Part 3 -- Openshift as a development environment

Processing CloudEvents with Eclipse Vert.x

Modern web applications on OpenShift: Part 2 -- Using chained builds

Modern web applications on OpenShift: Part 1 -- Web apps in two commands

Container-native integration testing

Announcing updated Red Hat Developer Studio and Container Development Kit

Red Hat Developers logo LinkedIn YouTube Facebook Twitter

Products

  • Red Hat Enterprise Linux
  • Red Hat OpenShift
  • Red Hat Ansible Automation Platform
  • Cloud services
  • See all products

Tools

  • My account
  • Training and certification
  • Customer support
  • Developer resources
  • Learning community
  • Partner resources
  • Resource library

Try, buy, & sell

  • Product trial center
  • Red Hat Marketplace
  • Red Hat Ecosystem Catalog
  • Red Hat Store
  • Buy online (Japan)
  • Console

Communicate

  • Contact sales
  • Contact training
  • Social

RED HAT DEVELOPER

Build here. Go anywhere.

We serve the builders. The problem solvers who create careers with code.

Join us if you’re a developer, software engineer, web designer, front-end designer, UX designer, computer scientist, architect, tester, product manager, project manager or team lead.

Sign me up

Red Hat legal and privacy links

  • About Red Hat
  • Jobs
  • Events
  • Locations
  • Contact Red Hat
  • Red Hat Blog
  • Diversity, equity, and inclusion
  • Cool Stuff Store
  • Red Hat Summit

Red Hat legal and privacy links

  • Privacy statement
  • Terms of use
  • All policies and guidelines
  • Digital accessibility