How to deploy full-stack JavaScript applications in OpenShift

Red Hat OpenShift is a Kubernetes distribution that makes it easy to deploy and scale applications in the cloud. In this hands-on learning path, created by Don Schenck, you will learn how to deploy a full-stack JavaScript application in an OpenShift cluster.

Access the Developer Sandbox

Using environment variables brings flexibility to applications. When environment variables are updated, OpenShift will automatically rebuild the service to use the new values. This lesson creates an application from source code, then changes several variables to link all of the services.

Prerequisites:

In this lesson, you will:

  • Create the service urlshortener-back from source code in a Git repo.
  • Link the back end, front end, and database using environment variables.

Create the back-end service from source code

OpenShift has a feature called "Source-to-Image", that will fetch source code from a Git repo, analyze it, and build an image from it. To take advantage of this feature, build the backend service urlshortener-back by running the following command:

oc new-app --name=urlshortener-back https://github.com/redhat-developer-demos/urlshortener --context-dir=back

The service needs to be exposed via a URL so the front-end website can locate it. Run the following command to expose the service urlshortener-back:

oc expose svc/urlshortener-back --port=8080

At this point, the database, the front-end website, and the back-end service have been created. They may be in various stages of completeness. This is because they lack the necessary environment variable to connect them.

Link the back end, front end, and database using environment variables

Start by connecting the back-end service to the database. Run the following command to update the environment variables for the back-end urlshortener-back service:

oc set env deploy/urlshortener-back PORT=8080 DB_USER=shorties DB_SERVER=shorties DB_PASSWORD=shorties

Next, the front-end website needs to be updated with the route to the back-end service. Run the following command to get the route:

oc get routes

Using the value for the route named urlshortener-back, append it with the http: scheme and run the following command:

oc set env deploy/urlshortener-front BASE_URL=http://$ROUTE_TO_URLSHORTENER-BACK

Here’s an example:

oc set env deploy/urlshortener-front BASE_URL=http://urlshortener-back-rhn-engineering-dsch-dev.apps.sandbox-m3.1530.p1.openshiftapps.com

Reload the urlshortener-front app in your browser and navigate to the About page. You should see three of the four layers up and running (Figure 1).

The Server Status page showing the one remaining layer Redirection Server Status.
Figure 1: Only one more layer to have a complete application.

Wrapping up

Only one piece remains for this four-part application: the redirection service.

Previous resource
Deploy a database to OpenShift
Next resource
Deploy a new microservice from an existing image and connect all of the services