Lab instructions

Developing Node.js apps using IBM DevOps Services and Bluemix
Lab 2: Easily create a Node.js application from scratch in the cloud
This lab is part of a workshop to explore IBM® DevOps Services and BluemixTM through handson exercises. The main objective of the workshop is to explore DevOps Services capabilities to
develop and deliver Node.js applications in the cloud. For further information on other labs, go to
the workshop main page.
Before you begin
Before you start this lab, review the Overview and Prerequisites page. Optionally, you can watch
the recorded demo on http://bit.ly/1BxgHr0 (10 minutes)
Learning Objectives
In this lab, you will learn how to do the following:
• Create Node.js application from scratch on Bluemix
• Create an IBM DevOps Service project associated to the Bluemix application
• Modify and manage source code using IBM DevOps Services (Web IDE, Git Hosting)
• Enable automated builds and deployments on Bluemix (Delivery Pipeline)
• Support agile planning and collaborative work with IBM DevOps Services (Track and Plan)
Time Required:
This lab takes about 10 minutes to complete.
About the App
In this lab, you create a new application from scratch using the Node.js Cache Web Starter
boilerplate available on Bluemix. This simple Node.js application includes a caching capabilities for
web and mobile applications. With this application, you can store and retrieve keys and their values.
Page 1
1- Create a Node.js application in the cloud
To create a new application on Bluemix, you can choose from several available runtimes and
boilerplates. In this section, you use the Node.js Cache Web Starter boilerplate to quickly create
and deploy a new Node.js application.
1. Navigate to http://www.bluemix.net/ and log in to access your Bluemix dashboard.
2. On the Bluemix dashboard, click CREATE AN APP.
3. When asked what kind of app you want to create, choose the web option
4. On the next screen, click Browse Sample Apps, then EXPLORE SAMPLES.
Page 2
5.
6. From the Boileplates section, select Node.js Cache Web Starter.
7. Enter a name for the new application. The name is a descriptive name to identify the
application on the Bluemix dashboard. The host must be a unique URL on Bluemix, so it is a
good practice to include your name or a unique identifier, such as in the example below:
◦ Name: MyNodeJSApp-<your-unique-id>
◦ Host: MyNodeJSApp-<your-unique-id>
When you enter an application name, the host name is provided for you, but you can
modify it. If you modify the host name, make sure:
• You keep a valid URL format
• You use a globally unique host name to avoid conflict with other Bluemix
applications.
• The app name is limited to 27 characters
Page 3
8. Click CREATE. The application is created and deployed on Bluemix. Wait until the
dashboard indicates that the app is running.
9. In the Routes section, click the link to access your deployed application. The Routes is
where you find the URL to your server.
10. (Optional) To test the application, you may type in a key and a value, and then click Put. The
data is stored in the cache and can be retrieved (Get) anytime.
• Key: FirstKey
• Value: My first value added to the cache
11. Note that this application is deployed on a public cloud (Bluemix). You can send its URL to
anyone and test it from any mobile device.
In just a few minutes, you have created and deployed a Node.js application in
Bluemix. The application is up and running and you can already test it.
Page 4
2- Modify source code in the cloud
The source code of your Node.js application is stored in a Git repository (a version control system).
You could access it using any Git client, but in this section, you use IBM DevOps Services and the
Web IDE capability to modify the source code directly in the cloud, from a web browser.
1. On the Bluemix dashboard for your app, click ADD GIT (upper-right corner). This will
create an IBM DevOps Services project and link it to your Bluemix application.
Remember that you create applications in Bluemix, but you create projects in DevOps
Services. A project is a place to modify source code and collaborate with others in order
to deploy applications on Bluemix.
2. Enter your credentials to access IBM DevOps Services. Then click CONTINUE when
asked to confirm the Git repository creation.. A new DevOps Services project is created. It is
automatically inked to your Bluemix application.
3. Click EDIT CODE that now appears on the upper-right corner of the Bluemix dashboard.
You are redirected to the corresponding DevOps Services project (same name than the
Bluemix application).
In DevOps Services, you have access to a set of capabilities to support your
application development project: Web IDE, Source code repository (Git hosting),
Delivery Pipeline, and Agile Planning & Tracking.
4. From the left pane, browse the source code that has been created for your Node.js
Page 5
application.
5. Under the views folder, select index.ejs to display the code.
6. Modify the source code by adding some text within the <h1> tag. In the example below,
"*** Amazing ***" is added to the page.
7. Click File > Save to save your changes.
8. Navigate to the root folder by either selecting a file in the root directory, or by selecting the
root directory itself. This step is important to successfully deploy the application in the next
step.
For instance, select README.txt to display its content. The file describes the structure
of the Node.js application that has been created for you.
9. Once you are on the root directory, click DEPLOY on the main menu
10. On the Configure Application Deployment window, verify the path to the manifest. It
should be “/manifest.yml” to indicate that you will use the manifest provided to you on the
root folder of the project.
11. Keep the default values provided and click DEPLOY.
12. When deployment completes, a green message appears on the top of the screen.
13. Click the link to the root folder page. A new page opens, and the Manual Deployment
Information section contains a link to your deployed application on Bluemix.
Page 6
If the deployment fails (red light instead of green light), you may find valuable hints in
this video: http://youtu.be/k6yom7K9YbE
14. Click the link to your application to test your change.
Congratulations! You have created a project on IBM DevOps Services to develop
your application. Then you have used the Web IDE to modify source code and you
have manually deployed your Node.js application in the cloud (Bluemix).
3- Configure automated deployment on your project
In the previous section, you deployed your changes manually on Bluemix. This approach is quite
useful during development when you want to test some code without delivering it to the source
control.
In this section, you enable automated deployment for your project. You use the IBM DevOps
Services Delivery Pipeline capability to automatically build and deploy the application when a
change is pushed to Git.
1. On the IBM DevOps Services page, click BUILD & DEPLOY.
2. On the Build & Deploy page, click SIMPLE. Auto deployment is now turned on for your
project.
3. Click EDIT CODE on the upper-right corner. You will modify the application to see the
automated deployment in action.
4. Open index.ejs under views.
5. Modify the content of the page(<h1> tag)
Page 7
6. Click File > Save (or CTRL-S) to save your changes. (Note that the Web IDE also contains
an auto-save feature)
7. On the left-side bar, click the Git Repository button
8. On the Git page, in the Work Directory Changes section, add a comment, check the
index.ejs file, and click COMMIT.
The other files are generated by the system when you create an application from
Bluemix. Ultimately, you will need to deliver them as well in another change set, but this
step is not required in this example scenario.
9. Under the Outgoing section, click PUSH to deliver your changes to the Git repository.
Page 8
The page that you have modified is now delivered to the remote repository and is
visible to other team members. With IBM DevOps Services and the Git Hosting
capability, you can work in isolation until you decide to share your code with the
entire team.
10. On the upper-right corner, click BUILD & DEPLOY.
Note that build and deployment have been triggered automatically as you pushed
changes to the Git repository (you may need a manual refresh to see the new work in
progress). When the build completes, you can access your deployed application from
this page and text your changes
A Delivery Pipeline is defined for your projects. Any change delivered to the
repository will trigger a build and a deployment on Bluemix.
Page 9
4- (Optional) Enable planning and tracking for your agile project
IBM DevOps Services provides capabilities to support Agile planning. In this section, you enable
the Track & Plan feature and you create your first work items: a user story and a defect.
1. On the IBM DevOps Services page, click the Settings button.
2. From the left menu, click OPTIONS, then check the Enable Track & Plan option.
3. On the same page, verify the information under the Deploy to Bluemix section. It must
contain valid information related to your organization (your account) on Bluemix.
4. Click SAVE.
5. From the left menu, click BETA FEATURES, check the “Try the new Track & Plan
Beta” option, and click SAVE.
Page 10
6. On the upper-right Corner, click TRACK & PLAN. The DevOps Services Quick Planner
opens. This is the place to do project planning and manage collaborative work with your
team.
7. On the left pane, click Backlog. The Product Backlog for this new project is empty by you
can start adding work items (epics, stories, defect...)
8. In the first input field (+ Create a work item), enter some text to create a new story: “As a
user, I want some new cool feature in my Node.js app”. Note that you can specify other
attributes such as type, description, subscribers, owner, tags, priority, or parent.
9. Click SAVE. The story is created and added to the backlog.
10. Create another work item. Type in: “Fix this crash *defect #production $high !critical”
We call this approach the “Tweet-like notation”. In the work item description, you add
tags to quickly specify attributes for the work item.
11. Click SAVE. The work item is created and the following attributes are set:
◦ Type: Defect
◦ Tags: production
◦ Priority: High
◦ Severity: Critical
It is easy an quick to create work items and to set some attributes with keywords.
Page 11
With the Track & Plan feature, your team can collaborate efficiently in the cloud.
The Quick Planner facilitates Backlog management, Agile planning, and work item
tracking for collocated and distributed teams.
Summary
In this lab, you learned about the main IBM DevOps Services capabilities:
• Web IDE to develop applications in the Cloud from a Web browser.
• Git Hosting to manage source code
• Delivery Pipeline to build and deploy applications
• Track & Plan to support collaborative work and agile planning during a project
• Integration with Bluemix to easily deploy and run applications on the IBM Cloud
Next Steps…
Continue on to Lab 3 of this workshop where you’ll learn how to reuse existing code to create and
deploy your own application (http://bluelabs.mybluemix.net/workshops/introNodeJS).
Page 12

Download Report