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

Intro to IBM Bluemix DevOps Services, Part 1: Deploy
and update a simple app
Lauren Hayward Schaefer (https://www.ibm.com/
developerworks/community/profiles/html/
profileView.do?key=d48395c0-6616-450d-94dcd98f63480a6b&lang=en&tabid=dwAboutMe)
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 don’t 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.
© Copyright IBM Corporation 2014, 2015
Intro to IBM Bluemix DevOps Services, Part 1: Deploy and
update a simple app
Trademarks
Page 1 of 6
developerWorks®
ibm.com/developerWorks/
“ 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
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.
Intro to IBM Bluemix DevOps Services, Part 1: Deploy and
update a simple app
Page 2 of 6
ibm.com/developerWorks/
developerWorks®
Run the app
Get the code
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. Click FORK in the upper-left corner.
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.
Intro to IBM Bluemix DevOps Services, Part 1: Deploy and
update a simple app
Page 3 of 6
developerWorks®
ibm.com/developerWorks/
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 Lauren’s 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.
Step 3. See Lauren’s 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
Intro to IBM Bluemix DevOps Services, Part 1: Deploy and
update a simple app
Page 4 of 6
ibm.com/developerWorks/
developerWorks®
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.
Node.js Cache Web Starterhttps://ace.ng.bluemix.net/#/store/
appTemplateGuid=nodejswebstarter&fromCatalog=trueis a sample application that demonstrates
how to use the IBM DataCache Service with the Node.js runtime.
RELATED TOPICS: Bluemix Part 2 Part 3 Part 4 Rapidly create a Node.js app
Intro to IBM Bluemix DevOps Services, Part 1: Deploy and
update a simple app
Page 5 of 6
developerWorks®
ibm.com/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 6 of 6