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

Video: Intro to Bluemix and Bluemix DevOps Services:
                    Part 1, Deploy and update a simple app

This article was written using the Bluemix classic interface. Given the rapid evolution of technology, some steps and illustrations may have changed.

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 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.

Screenshot of Lauren's Lovely Landscapes
Screenshot of Lauren's Lovely Landscapes

Run the appGet the code

What you need to get started

Before you begin, you need to register at Bluemix. 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 upper-left 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 (Deploy icon) in the top bar. Tool bar
    Tool 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 (Open icon) 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 (Deploy icon).
  6. If prompted to stop and redeploy your app, click OK.
  7. After your application is deployed, click the Open URL button (Open icon) 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.

Downloadable resources

Related topics


Sign in or register to add and subscribe to comments.

Zone=DevOps, Cloud computing
ArticleTitle=Intro to IBM Bluemix DevOps Services, Part 1: Deploy and update a simple app