> For the complete documentation index, see [llms.txt](https://ibm-developer.gitbook.io/openshift101/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ibm-developer.gitbook.io/openshift101/workshop/exercise-01.md).

# Exercise 1: Deploy a Node application with Source-to-Image

In this exercise, you'll deploy a simple Node.js Express application - "Example Health". Example Health is a simple UI for a patient health records system. We'll use this example to demonstrate key OpenShift features throughout this workshop. You can find the sample application GitHub repository here: <https://github.com/IBM/node-s2i-openshift>

## Deploy Example Health

Access your cluster on the [IBM Cloud clusters dashboard](https://cloud.ibm.com/kubernetes/clusters). Click the `OpenShift web console` button on the top-right. (This is a pop-up so you'll need to white list this site.)

Here is the main dashboard you should see.

![Main Dashboard](https://1137660015-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lo1CthFUNGt5R3JtwjG%2F-M2FN_WYISxeAkF2hmrD%2F-M250MlDem_EiSiiVPtN%2Fmain-dashboard.png?generation=1584044084949580\&alt=media)

Create a project, on the left hand side, you can title it whatever you like, we suggest "example-health."

![Create Project](https://1137660015-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lo1CthFUNGt5R3JtwjG%2F-M2FN_WYISxeAkF2hmrD%2F-M250xLC11Mo2puWPb1B%2Fcreate-project.png?generation=1584044077339410\&alt=media)

And fill it out something like this.

![Example Health](https://1137660015-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lo1CthFUNGt5R3JtwjG%2F-M2FN_WYISxeAkF2hmrD%2F-M250xLEi2DeI2KzoUSS%2Fexample-health-create-project.png?generation=1584044078311170\&alt=media)

You should see a view that looks like this.

![New Project View](https://1137660015-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lo1CthFUNGt5R3JtwjG%2F-M2FN_WYISxeAkF2hmrD%2F-M250MlFJO-d4K-3Obdq%2Fexample-health-new-project.png?generation=1584044083919989\&alt=media)

Now click on `Administrator` and select `Developer`.

![Developer](https://1137660015-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lo1CthFUNGt5R3JtwjG%2F-M2FN_WYISxeAkF2hmrD%2F-M250MlHyNsLG5gOwZc7%2Fchange-to-developer.png?generation=1584044086130331\&alt=media)

Click on the `From Catalog` button.

![Catalog](https://1137660015-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lo1CthFUNGt5R3JtwjG%2F-M2FN_WYISxeAkF2hmrD%2F-M250MlJ7nJaKCI_zlye%2Fdeveloper-catalog.png?generation=1584044078573157\&alt=media)

Scroll down and select `Node.js` Builder Image. If you don't see it, check `Builder Image` under `Type`.

![NodeJS](https://1137660015-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lo1CthFUNGt5R3JtwjG%2F-M2FN_WYISxeAkF2hmrD%2F-M250MlLOOdcSr3c1Gey%2Fdeveloper-nodejs.png?generation=1584044082696324\&alt=media)

Click `Create Application`.

You'll see an form like this:

![Create Source-to-Image Application](https://1137660015-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lo1CthFUNGt5R3JtwjG%2F-M2FN_WYISxeAkF2hmrD%2F-M250MlNpqV5DFs1QA-4%2Fnodejs-gitrepo.png?generation=1584044084536642\&alt=media)

Enter the repository: `https://github.com/IBM/node-s2i-openshift`.

Then click the `Show Advanced Git Options` and enter `/site` under `Context Dir`. Click 'Create' at the bottom of the window to build and deploy the application.

![Context Dir](https://1137660015-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lo1CthFUNGt5R3JtwjG%2F-M2FN_WYISxeAkF2hmrD%2F-M250MlPkHq9wNAs2_u6%2Fnodejs-context.png?generation=1584044075499903\&alt=media)

Click on the center circle, then click "Start Build." You should see #1 Build start. You can click on the "View logs" to get more details.

![Build](https://1137660015-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lo1CthFUNGt5R3JtwjG%2F-M2FN_WYISxeAkF2hmrD%2F-M250MlRsTnK_K7-STWf%2Fnodejs-build.png?generation=1584044079724540\&alt=media)

When the build has deployed, find the "Routes." Click on that link:

![Successful Build](https://1137660015-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lo1CthFUNGt5R3JtwjG%2F-M2FN_WYISxeAkF2hmrD%2F-M251MUWp5CBfYDwzXqJ%2Fnodejs-success.png?generation=1584044082579258\&alt=media)

And you should see the login screen like the following:

![Login](https://1137660015-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lo1CthFUNGt5R3JtwjG%2F-M2FN_WYISxeAkF2hmrD%2F-M250MlTfqjMEVXSIemO%2Fnodejs-login.png?generation=1584044082306666\&alt=media)

You can enter any strings for username and password, for instance `test:test` because the app is running in demo mode.

Congrats! You've deployed a `Node.js` app to Kubernetes using OpenShift Source-to-Image (S2I).

## Understanding What Happened

[S2I](https://docs.openshift.com/container-platform/3.6/architecture/core_concepts/builds_and_image_streams.html#source-build) is a framework that creates container images from source code, then runs the assembled images as containers. It allows developers to build reproducible images easily, letting them spend time on what matters most, developing their code!

## Git Webhooks

So far we have been doing a lot of manual deployment. In cloud-native world we want to move away from manual work and move toward automation. Wouldn't it be nice if our application rebuilt on git push events? Git webhooks are the way its done and openshift comes bundled in with git webhooks. Let's set it up for our project.

To be able to setup git webhooks, we need to have elevated permission to the project. We don't own the repo we have been using so far. But since its opensource we can easily fork it and make it our own.

Fork the repo at <https://github.com/IBM/node-s2i-openshift>

![Fork](https://1137660015-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lo1CthFUNGt5R3JtwjG%2F-LpZs2v9MhvPXFGOm_bZ%2F-Lo6FR6X_bi-fiSmo5n1%2Ffork.png?generation=1569355512131052\&alt=media)

Now that I have forked the repo under my repo I have full admin priviledges. As you can see I now have a settings button that I can change the repo settings with.

![Forked Repo](https://1137660015-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lo1CthFUNGt5R3JtwjG%2F-LpZs2v9MhvPXFGOm_bZ%2F-Lo6FR6gsKL49icaXzA3%2Fforked-repo.png?generation=1569355542981015\&alt=media)

We will come back to this page in a moment. Lets change our git source to our repo.

From our openshift dashboard for our project. Select `Builds`

![Build](https://1137660015-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lo1CthFUNGt5R3JtwjG%2F-M3DWhsaSGpSlzs_fVm1%2F-M25Ecv0TWt38OFxEcKu%2Fnodejs-build-config.png?generation=1585086656552541\&alt=media)

Select the `node-s-2-i-openshift` build. As of now this should be the only build on screen.

![Select Build](https://1137660015-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lo1CthFUNGt5R3JtwjG%2F-M3DWhsaSGpSlzs_fVm1%2F-M25Ecv2tucTX3Ocm4LI%2Fnodejs-build-select.png?generation=1585086671634046\&alt=media)

Click on `Action` on the right and then select `Edit Build Config`

![Edit Build](https://1137660015-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lo1CthFUNGt5R3JtwjG%2F-M3DWhsaSGpSlzs_fVm1%2F-M25Ecv4DN3lmn3aRJ6L%2Fnodejs-build-edit.png?generation=1585086662382357\&alt=media)

Change line `21` to `Git Repository URL` to our forked repository, and click `Save`.

![Save Build Config](https://1137660015-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lo1CthFUNGt5R3JtwjG%2F-M3DWhsaSGpSlzs_fVm1%2F-M25Ecv6rcumGACXiQ3u%2Fnodejs-build-save.png?generation=1585086666485979\&alt=media)

You will see this will not result in a new build. If you want to start a manual build you can do so by clicking `Start Build`. We will skip this for now and move on to the webhook part.

Click on the `Details` tab.

Scroll down and click `Copy URL with Secret` for the GitHub Webook URL.

The webhook is in the structure

```
https://c100-e.us-east.containers.cloud.ibm.com:31305/apis/build.openshift.io/v1/namespaces/example-health/buildconfigs/patientui/webhooks/<secret>/github
```

![Copy GitHub Webhook](https://1137660015-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lo1CthFUNGt5R3JtwjG%2F-M3DWhsaSGpSlzs_fVm1%2F-M25Ecv8uCCTWPt2FEjX%2Fgithub-url-secret.png?generation=1585086667204955\&alt=media)

> There is also the generic webhook url. This also works for github. But the github webhook captures some additional data from github and is more specific. But if we were using some other git repo like bitbucket or gitlab we would use the generic one.

In our github repo go to `Setting > Webhooks`. Then click `Add Webhook`

![Webhook Page](https://1137660015-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lo1CthFUNGt5R3JtwjG%2F-LpZs2v9MhvPXFGOm_bZ%2F-Lo6FR7CBbYW975K9C_d%2Fwebhook-page.png?generation=1569355583638542\&alt=media)

In the Add Webhook page fill in the `Payload URL` with the url copied earlier from the build configuration. Change the `Content type` to `application/json`.

> **NOTE**: The *Secret* field can remain empty.

Right now just the push event is being sent which is fine for our use.

Click on `Add webhook`

![Add Webhook](https://1137660015-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lo1CthFUNGt5R3JtwjG%2F-LvOMXKr4IZ16TX9vsfE%2F-Lo6FR7ENIntJ9uKNh2P%2Fadd-webhook.png?generation=1575604860443747\&alt=media)

If the webhook is reachable by github you will see a green check mark.

Back in our Openshift Console we still would only see one build however. Because we added a webhook that sends us push events and we have no push event happening. Lets make one. The easiest way to do it is probably from the Github UI. Lets change some text in the login page.

Path to this file is `site/public/login.html` from the root of the directory. On Github you can edit any file by clicking the Pencil icon on the top right corner.

![Edit Page](https://1137660015-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lo1CthFUNGt5R3JtwjG%2F-LpZs2v9MhvPXFGOm_bZ%2F-Lo6FR7GixosuEDqvZxu%2Fedit-page.png?generation=1569355633919923\&alt=media)

Let's change the name our application to `Demo Health` (Line 21, Line 22). Feel free to make any other UI changes you feel like.

![Changes](https://1137660015-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lo1CthFUNGt5R3JtwjG%2F-LpZs2v9MhvPXFGOm_bZ%2F-Lo6FR7ItY7jXqE3kB93%2Fchanges.png?generation=1569355563480771\&alt=media)

Once done go to the bottom and click `commit changes`.

Go to the Openshift Console and click on the `Builds` tab. This happens quite fast so you might not see the running state. But the moment we made that commit a new build was kicked off.

![Running Build](https://1137660015-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lo1CthFUNGt5R3JtwjG%2F-M3DWhsaSGpSlzs_fVm1%2F-M25EcvAAIoAZWlm5BzK%2Fnodejs-rebuild-webhook.png?generation=1585086671940807\&alt=media)

In a moment it will show completed. Navigate to the `Topology -> Application` to find the route.

![Routes](https://1137660015-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lo1CthFUNGt5R3JtwjG%2F-M3DWhsaSGpSlzs_fVm1%2F-M25EcvCIjSE61Ts_ius%2Fnodejs-rebuild-overview.png?generation=1585086658722888\&alt=media)

> You could also go to `Applications > Routes` to find the route for the application.

If you go to your new route you will see your change.

![UI](https://1137660015-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lo1CthFUNGt5R3JtwjG%2F-M3DWhsaSGpSlzs_fVm1%2F-M25EcvEoIct0zJQJL_4%2Fnodejs-rebuild-updated.png?generation=1585086658695026\&alt=media)