Deploy an Application Using odo

Prerequisites

• Access to an OpenShift Cluster and a Web Console URL from your workshop coordinator

• You need API URL to the cluster. Ask your workshop coordinator, if you don’t have one

• You need credentials (UserName and Password) to login to the cluster

• You need to have odo on your machine

Installing odo on Linux

Binary installation

$ curl -L https://mirror.openshift.com/pub/openshift-v4/clients/odo/latest/odo-linux-amd64 -o /usr/local/bin/odo
$ chmod +x /usr/local/bin/odo

Tarball installation

$ sh -c 'curl -L https://mirror.openshift.com/pub/openshift-v4/clients/odo/latest/odo-linux-amd64.tar.gz | gzip -d > /usr/local/bin/odo'
$ chmod +x /usr/local/bin/odo

Installing odo on macOS

Binary installation

$ curl -L https://mirror.openshift.com/pub/openshift-v4/clients/odo/latest/odo-darwin-amd64 -o /usr/local/bin/odo
$ chmod +x /usr/local/bin/odo

Tarball installation

$ sh -c 'curl -L https://mirror.openshift.com/pub/openshift-v4/clients/odo/latest/odo-darwin-amd64.tar.gz | gzip -d > /usr/local/bin/odo'
$ chmod +x /usr/local/bin/odo

Installing odo on Windows

• Binary installation Download the latest odo.exe file.

• Add the location of your odo.exe to your GOPATH/bin directory.

  • Setting the PATH variable for Windows 7/8

    • The following example demonstrates how to set up a path variable. Your binaries can be located in any location, but this example uses C:\go-bin as the location.

    • Create a folder at C:\go-bin.

    • Right click Start and click Control Panel.

    • Select System and Security and then click System.

    • From the menu on the left, select the Advanced systems settings and click the Environment Variables button at the bottom.

    • Select Path from the Variable section and click Edit.

    • Click New and type C:\go-bin into the field or click Browse and select the directory, and click OK.

  • Setting the PATH variable for Windows 10

    • Edit Environment Variables using search:

    • Click Search and type env or environment.

    • Select Edit environment variables for your account.

    • Select Path from the Variable section and click Edit.

    • Click New and type C:\go-bin into the field or click Browse and select the directory, and click OK.

Introduction

Through the exercises presented here, you’ll see how to deploy a three-tier Node.js application on Red Hat OpenShift. The example application is a concession kiosk, used to streamline the process of placing concession orders. The user will place an order via the Front-End web application. The order information will be saved in a MongoDB database, and then the user will be given an order number. Once their order number is called, users can go to the concession window to pay and receive their food.

Deploy the Back-End nodejs app on OpenShift

• Create a folder to store Back-End and Front-End code

mkdir kiosk
cd kiosk

• you need to get the code from github:

git clone https://github.com/RedHatWorkshops/openshiftv4-odo-workshop-backend.git
cd openshiftv4-odo-workshop-backend/

• Use odo to build and deploy Back-End to Openshift

odo login <ocp server API uri> -u <user> -p <password>
odo project create kiosk
odo create nodejs backend
odo push

Output:

ℹ️	Check the log and make sure the app started correctly

  odo log backend

ℹ️	If you login to Openshift 4.2 you should see your deployment on the developers view:

Deploy the Front-End nodejs app on OpenShift

ℹ️	Make sure you are in the kiosk folder that you created on step one before moving forward.

• Get code from github

git clone https://github.com/RedHatWorkshops/openshiftv4-odo-workshop.git
cd openshiftv4-odo-workshop/

• Use odo to build and deploy Front-End to Openshift

odo create nodejs frontend
odo push

Output:

ℹ️	Validate that the Front-End app is started.

  odo log frontend

As the Front-End app needs to be accessed by client outside of the openshift we need to create a URL for it, this is done with the following commands:

odo url create
odo push

get the URL you just created with following command and access it on your browser. you should see this image:

odo url list

Link Front-End to Back-End application

Now that we have both Front-End and Back-End deployed we need to make sure that the Front-End app would use the Back-End as a service to fulfill the request. This is easily done by the odo link command as below:

cd <frontend folder location>
odo link backend

Let us test the application, go to the Front-End app in your browser and order something. you shouled see this responce:

as you can see the order number is 9999 and you can not see your items this is because the Back-End app need a database to store the orders which we have not deployed yet. as long as we are in a roll let’s do it!

Create an ephemeral mongodb

• To create a mongodb we can use the following command :

odo service create

this command will show a list of available services provided by openshift out of the box. lets pick database and select mongodb-ephemeral you can accept the rest of the default values.

ℹ️	if you do not want to step through this process just run the following command

odo service create mongodb-ephemeral mongodb-ephemeral --plan default -p DATABASE_SERVICE_NAME=mongodb -p MEMORY_LIMIT=512Mi -p MONGODB_DATABASE=sampledb -p MONGODB_VERSION=3.6

Link Back-End to MongoDB

We are almost done, now that we have a database we just need to link it to the Back-End application. If you accept the default values the name of your service for the MongoDB should be mongodb-ephemeral and you can use the followin command to link them together.

cd <backend app code location>
odo link mongodb-ephemeral

or if you are in the Front-End code folder do this

odo link mongodb-ephemeral --component backend

you should see an output similar to this:

after linking database to Back-End, the odo is adding some extra environment variable to your pod and would restart the pod so the aplication could utilize them and connect to the database.

ℹ️	you can explore this in index.js file in your Back-End folder: const dbConnectionUrl = process.env.MONGODB_URL || 'mongodb://' + process.env.username ':' process.env.password+'@mongodb/' +process.env.database_name;

Let’s try ordering again, this time you see your order recorder and get an order number.

We are not completely done just stay with me for a couple more minutes.Let’s say you build this app and demo it to your manager and they like everything but siad that Front-End looks too cartoonish and want you to change that.I have prepared another set that for the sake of time you can use and see what it would take to change the app and redeploy as this is a normal part of our life as a developer, code, deploy, validate, and start over.

Do the following to use the new set of images.

cd <frontend app code location>
mv public/images public/images-2
mv public/images-1 public/images
mv public/stylesheets/style.css public/stylesheets/style-2.css
mv public/stylesheets/style-1.css public/stylesheets/style.css

Now that we have change the assets let’s redeploy the code:

odo push

Let’s try ordering again, this time you see your new images in Front-End app.

Now the BOSS is happy, but we know that is not true and he/she ask you to change it again! but now you know, after any code change you just need to say/type the magic word odo push

Thanks to Jan Kleinert for original development deploy-a-NodeJS-app-OpenShift