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.
    • Kubernetes
    • Red Hat Integration
    • 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 Streams for Apache Kafka learning
    • OpenShift API Management learning

    More developer resources

    • Cheat sheets
    • E-books
    • Interactive tutorials
    • Blogs and articles

    Looking for more?

    • Start learning now
  • OpenShift sandbox

    OpenShift developer sandbox (free)

    • Try hands-on activities in the OpenShift 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 sandbox IDE

    Featured sandbox activities

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

    Ready to start developing apps?

    • Explore the free OpenShift 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
  
Part 3
JavaScript application deployment

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

This hands-on lab guides you through each step 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.

In this final part of the lab, you will add a database to your project using the Red Hat OpenShift developer catalog. You will also use a pre-built image and the OpenShift developer console's user interface (UI) to deploy another microservice to your application. Note that this lab assumes you have completed Part 1 and Part 2.

   Get access to the sandbox in minutes

Sandbox javascript activity

Add a database to your JavaScript application

In the second part of this lab, you created your back-end container and deployed it using the Source-to-image (S2I) toolkit. Now you need to add a database to your application so that you can store the URLs being passed around. You will select a template from the OpenShift developer catalog to deploy on the cluster.

Select a database from the developer catalog

From the left navigation bar, click on +Add. This brings up a menu with various options to add your application to the OpenShift cluster.

Choose Database to open the developer catalog, filtered to show database templates. From this view, select the MongoDB (Ephemeral) card. A side panel should open. On this panel, click the blue Instantiate Template button.

Note: Because this selection is an ephemeral template, when the pod restarts, all data is lost. This is ideal for development purposes, but not so great for production. For a production deployment, look into Operator-backed templates.

On the next screen, fill in the fields with the following values, which are also shown in Figure 1:

  • Database Service Name: mongo
  • MongoDB Connection Username: shorties
  • MongoDB Connection Password: shorties
  • MongoDB Database Name: urls

 

Configuring a database in the OpenShift console.
Figure 1: Configuring a database in the OpenShift console.

 

When you are done, select Create at the bottom of the screen.

OpenShift will create all the necessary components to deploy the database to your cluster. In a few seconds, you should see the application in the Topology view with a blue ring indicating that it is running, as shown in Figure 2.

 

The OpenShift Topology view showing the running MongoDB database.
Figure 2: The OpenShift Topology view showing the running MongoDB database.

 

Configure the environment variables

The database has started, so now you need to configure the back end to connect to it. In the second part of this lab, you used the command-line interface (CLI) to configure environment variables. This time, you will configure the environment variables using the UI.

Click on the urlshortener deployment in the Topology view. This opens a side panel. In the Actions menu on the top right of the screen, select Edit Deployment.

From this new screen, select the Environment tab. This should take you back to the screen where you added the PORT variable in Part 2.

Click on Add More and add the following environment variables:

  • MONGO_SERVER: mongo
  • MONGO_VERSION: 3.6

For the user name and password, you can also use the secret created by the MongoDB template.

Click Add from Config Map or Secret, and use the name MONGO_USER. In the Select a resource dropdown, pick the secret named mongo. In the Select a key dropdown, pick database-user.

Do the same for MONGO_PASSWORD, which maps to the database-password key.

When you are done, select Save at the bottom of the page, as shown in Figure 3.

 

Configuring environment variables in the OpenShift UI.
Figure 3: Configuring environment variables in the OpenShift UI.

 

Verify the application status

You've added the database component and connected it to the back end. Now, you will test the application again.

If you open the front end and look at the application's About page, you should see that the database is up and running, as shown in Figure 4.

 

The About page shows that the database is up and running.
Figure 4: The About page shows that the database is up and running.

 

You can now use the Add New page to create URL shortcuts, and you can see them on the Current Shorties page. All of this data is persisted if you refresh the page.

When clicking on the link icon, though, you get an error. This error shows up because the front end is trying to contact a redirector service that hasn’t been deployed yet. You will add this service next.

Add a new microservice

You now have a front end, an API, and a database deployed and running on OpenShift. This application needs another microservice that short URLs will point to, and that will redirect the application to the matching longer URL found in the database.

One of the many benefits of deploying containerized microservices is that they don’t need to be written in the same language. In this example, you will add a PHP server to the application.

Add a container from an existing image

The image containing the redirector service is already built for you. If you are curious, you can find the source code and Dockerfile in the demo project's redirector folder.

You can use the same commands from the first part of this lab to add this new image, or you can use the UI. To use the UI, click on the +Add link in the console's left navigation bar.

Next, choose the Container Image card. A new page titled Deploy Image will be displayed.

In the field Image name from external registry, enter quay.io/donschenck/urlshortener-redirector.

Note: You can change the runtime icon if you wish.

For the Application Name, remove the redirector-app to keep urlshortener. This creates a group in the Topology view, and you will be able to add the other services to it.  Scroll to the bottom of the page, select Resource type under the Advanced options section. Then select Deployment. (Figures 5 and 6)

Select Resource type under Advanced options.
Figure 5: Select Resource type under Advanced options.

 

The Deployment option
Figure 6: Deployment option has been chosen.

 

The application should have been successfully deployed, but the route won’t work for now. Because this image has two different exposed ports, the created route was mapped to the wrong port. To change this, click the urlshortener-redirector application in the Topology view. In the Resources tab from the side panel, click the route name, as shown in Figure 7.

 

Choosing a route.
Figure 7: Choosing a route.

 

From the Actions dropdown, choose Edit Route. This opens a YAML editor. (Figure 8) Scroll down to find the spec object in the alphabetical list. Then look for the port property. Note that the targetPort has the value of 80-tcp. Change the value to 8080-tcp and click Save.

 

Changing environment variables in the YAML editor.
Figure 8: Changing environment variables in the YAML editor.

 

You can now go back to the Topology view and click on the Open URL link for the urlshortener-redirector application. This shows a page with a few errors. As you'll see, the PHP application doesn’t have environment variables yet, so it can’t connect to the database.

Update the environment variables

For the redirector service to connect to the Mongo database, it needs a few environment variables.

Click on the application, and from the Action dropdown in the side panel, choose Edit Deployment. Choose the Environment tab (Figure 9) and fill in the following values:

  • MONGO_SERVER: mongo
  • MONGO_VERSION: 3.6
  • MONGO_USER from mongo Secret: database-user
  • MONGO_PASSWORD from mongo Secret: database-password

 

Configuring environment variables for the redirector application.
Figure 9: Configuring environment variables for the redirector application.

 

Click Save, and the urlshortener-redirector application will restart with the new environment variables.

Now that the redirector service is configured and ready to go, update the REDIRECTOR_URL environment variable from the front end to point to this service:

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

The front-end pod will restart with the new environment variables.

Verify the application status

Everything is up and running, so open the application's About page again. All of the systems should now be green, as shown in Figure 10.

 

All services up and running.
Figure 10: All services up and running.

 

Congratulations! You’ve deployed a full-stack JavaScript application into an OpenShift cluster. You can now use the application.

Conclusion to Part 3

Now that you have an application in the Developer Sandbox for Red Hat OpenShift, you can try various things such as scaling up some of the applications, grouping the applications in the Topology view, and looking at the logs inside the pods.

To learn more about Red Hat OpenShift, please try out some of the smaller workshops available from the Interactive Learning Portal.

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

  • Featured Topics
    • Istio
    • Quarkus
    • CI/CD
    • Serverless
    • Enterprise Java
    • Linux
    • Microservices
    • DevOps
  • Build
    • Developer Tools
    • Interactive Tutorials
    • Container Catalog
    • Operators Marketplace
    • Certify Applications
    • Red Hat on Github
  • Quicklinks
    • What's new
    • DevNation events
    • Books
    • Cheat Sheets
    • Videos
    • Products
  • Communicate
    • Site Status Dashboard
    • Report a security problem
    • Helping during COVID-19
    • About Red Hat Developers
    • Contact Sales

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 Logo
  • ©2023 Red Hat, Inc.
  • Privacy Statement
  • Terms of Use
  • All policies and guidelines
Red Hat Summit