You are on page 1of 5

Intro to IBM Bluemix DevOps Services, Part 1: Deploy

and update a simple app


Lauren Hayward Schaefer (ljhaywar@us.ibm.com)
Growth Hacking Engineer and Social Media Lead, IBM
Bluemix DevOps Services
IBM

27 March 2015
(First published 23 September 2014)

In this four-part introductory series on Bluemix and Bluemix DevOps Services, you discover
how using these products can prevent you from wasting time. You learn how to quickly and
easily deploy a simple app, deploy an app that makes use of a Bluemix service, and write
code that uses a new Bluemix service. You'll even try out the web IDE (no setup required) and
learn how to use agile planning tools. As a bonus to all of the knowledge you'll get by working
through the examples in this series, you also get an application that checks the prices of items
in online stores for you, so you dont have to surf the web to see if your favorite items are on
sale!
To view the introductory video Intro to Bluemix and Bluemix DevOps Services: Part 1,
Deploy and update a simple app please access the online version of the article.
Sign up for IBM Bluemix
This cloud platform is stocked with free services, runtimes, and infrastructure to help you
quickly build and deploy your next mobile or web application.

As a developer, I'm always on the lookout for ways to get things done easier. I despise wasting
time setting up development environments, configuring servers, and, generally, doing anything that
can be automated. (Less time working means more time for shopping!) That's why I love using IBM
Bluemix DevOps Services.

Bluemix provides me with infrastructure and services in


the cloud so I don't have to worry about managing servers
or spending time coding something that has already been
coded by someone else. Bluemix DevOps Services gives
me the tools I need to code in the cloud (no setup required),
plan my app, and collaborate with others.
To introduce you to the best of Bluemix DevOps Services, I've written this four-part tutorial series.
In Part 1, you learn how to deploy and make changes to a simple application. In Part 2, you learn
Copyright IBM Corporation 2014, 2015
Intro to IBM Bluemix DevOps Services, Part 1: Deploy and
update a simple app

Trademarks
Page 1 of 5

developerWorks

ibm.com/developerWorks/

how to deploy an application that uses a Bluemix service. In Part 3, you learn how to use the
planning capabilities in Bluemix DevOps Services to plan and track your app, how to add a new
Bluemix service to your app, and how to write code that makes use of a Bluemix service. In Part
4, you learn how to use the Delivery Pipeline service to deploy your app to Bluemix automatically
whenever you or someone else on your team pushes code to your project's repository.
As a bonus to all of the knowledge you get by working through the examples in this series, you
also get an application that checks the prices of items in online stores for you, so you don't have to
surf the web to see if your favorite items are on sale! (Can you tell I love to shop?)

What Part 1 covers


In Part 1, learn how to:
Fork an existing app
Deploy an app to Bluemix from Bluemix DevOps Services
Make changes to an app in the Bluemix DevOps Services web Integrated Development
Environment (IDE)

About the app


In this workshop, you work with a sample online store called "Lauren's Lovely Landscapes." The
store currently sells three prints; each print's page displays the name, image, and price associated
with the print.

Run the app


Get the code
WATCH: See IBM Bluemix in action http://www.ibm.com/developerworks/cloud/library/cl-bluemixdbarnes-ny/index.html
Intro to IBM Bluemix DevOps Services, Part 1: Deploy and
update a simple app

Page 2 of 5

ibm.com/developerWorks/

developerWorks

What you need to get started


Before you begin, you need to register at Bluemix and Bluemix DevOps Services. You'll also need
one of the following browsers:

Firefox 15 or later
Chrome 21 or later
Internet Explorer 10 or later
Safari 7 or later

Launch the online store


As you are working with and testing the Fabulous Price Finder that you'll use in workshops 2 and
3, having an online store where you can easily manipulate prices will be helpful. To get the online
store, fork the "Lauren's Lovely Landscapes" app and deploy it to Bluemix.
At Bluemix DevOps Services, forking a project means taking a copy of the code in an existing
project and putting it in a new project.

Step 1. Fork Lauren's Lovely Landscapes


1. Go to the Laurens Lovely Landscapes project overview page.
2. Click Edit Code in the upper-right corner. You might be prompted to authenticate if you have
not already done so. The web IDE opens.
3. Select Tools > Fork.
4. Type a name for your project, leave the Add features for Scrum development and Make
this a Bluemix Project boxes checked, and click CREATE.
5. Note that when the project has finished forking, your new project name is listed in the upperleft corner.
Now you have a copy of the code in your own project. The next step is to deploy it.

Step 2. Deploy Laurens Lovely Landscapes


To deploy an application means to bundle the project artifacts, create an app at Bluemix, transfer
the bundled app to Bluemix, and start the app. Bluemix application names and URLs are created
using properties, which are often defined in the manifest.yml file in a project. The "Lauren's Lovely
Landscapes" project already has the manifest created for you.
1. In the left navigation pane of the web IDE, select manifest.yml.
2. Click the deploy button ( ) in the top bar.
Note: When you deploy through the Web IDE, you are deploying the changes that are in your
Web IDE's workspace. For example, you may have changes you are currently working on that
you have not yet pushed to your project's repository. Those changes will be deployed.
Intro to IBM Bluemix DevOps Services, Part 1: Deploy and
update a simple app

Page 3 of 5

developerWorks

ibm.com/developerWorks/

Step 3. See Laurens Lovely Landscapes running


After your application is deployed to Bluemix, a green dot displays in the status area of the top
gray bar.
1. Click the Open URL button ( ) in the top bar.
2. Browse your application that is running live on Bluemix. Click on the Antarctica page and note
that the current price is $100.00.

Step 4. Update the price of an item


Make a change to the application by updating the price of an item.
1. In the left pane of the web IDE, expand views and select antarctica.tpl.
2. Scroll down until you see <div id="price">100.00</div>
3. Replace 100.00 with 99.99. (Wow, that's a big sale! ;-) )
4. Click File > Save.
5. Click the Deploy button ( ).
6. If prompted to stop and redeploy your app, click OK.
7. After your application is deployed, click the Open URL button ( ) in the top gray bar.
8. In your app that opens, click Antarctica.
Notice that the price of the item has been updated. Success!

What next?
First, take a moment to reflect on the awesomeness of what you just did. You are able to use
Bluemix and Bluemix DevOps Services to quickly fork (make a copy) of an app, deploy it, update
it without any manual IDE setup required, and deploy it again so you can see your change running
live.
Second, get creative with the app. Lauren's Lovely Landscapes is yours now. Change the name,
change the color scheme, change the pictures, or go crazy and implement a shopping cart. Make
the site your own and redeploy!
Third, continue to Part 2 of this series where you learn how to deploy an application that uses a
Bluemix service.
RELATED TOPICS:

Bluemix

Part 2

Part 3

Intro to IBM Bluemix DevOps Services, Part 1: Deploy and


update a simple app

Part 4

Rapidly create a Node.js app

Page 4 of 5

ibm.com/developerWorks/

developerWorks

About the author


Lauren Hayward Schaefer
@lauren_schaefer on Twitter
Follow me on Google+

Copyright IBM Corporation 2014, 2015


(www.ibm.com/legal/copytrade.shtml)
Trademarks
(www.ibm.com/developerworks/ibm/trademarks/)

Intro to IBM Bluemix DevOps Services, Part 1: Deploy and


update a simple app

Page 5 of 5