Contents


Intro to IBM Bluemix Continuous Delivery, Part 1

Deploy and update a simple app

Fork an app, deploy it, update it, and then deploy it again to see changes running live

Comments

Content series:

This content is part # of # in the series: Intro to IBM Bluemix Continuous Delivery, Part 1

Stay tuned for additional content in this series.

This content is part of the series:Intro to IBM Bluemix Continuous Delivery, Part 1

Stay tuned for additional content in this series.

As developers, we're always on the lookout for ways to get things done easier. We 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 we love using IBM Bluemix Continuous Delivery.

Bluemix provides infrastructure and services in the cloud so you don't have to worry about managing servers or spending time coding something that has already been coded by someone else. IBM Bluemix Continuous Delivery gives you the tools you need to code in the cloud (no setup required), plan your app, and collaborate with others.

This tutorial series is designed to introduce you to the best of Continuous Delivery. In Part 1, you learn how to deploy and make changes to a simple application. In Part 2, you learn the basics of how to deploy an application that uses a Bluemix service. In Part 3, you learn how to use the planning capabilities in Continuous Delivery 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 more about using Delivery Pipeline service to deploy your app to Bluemix automatically whenever you or someone else on your team pushes code to your 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!

What Part 1 covers

In Part 1, you'll learn how to:

  • Fork an existing app
  • Deploy an app to Bluemix from Continuous Delivery
  • Make changes to an app in the Continuous Delivery web-based integrated development environment, known as "Eclipse Orion Web IDE"

About the app

In this workshop, you'll 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 should register at Bluemix. You'll also need the latest available version of one of these browsers:

  • Chrome
  • Firefox
  • Internet Explorer
  • Safari

Launch the online store

As you are working with and testing the Fabulous Price Finder that you'll use in these tutorials, 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.

With IBM Bluemix Continuous Delivery, forking the app means taking a copy of the code in an existing repository and putting it into a new repository, as well as standing up the tools you need to work with that code and get it deployed, something we call a toolchain. You can do this manually, but for this example, there’s an easier way.

1

Fork Lauren's Lovely Landscapes

  1. Go to the Lauren's Lovely Landscapes repository page.
  2. Click the Deploy to Bluemix button.
  3. Login or create an account if you need to.
  4. Enter a new name for your app (or just use the default one).
  5. Push the deploy button.

This takes you to the landing page for your new toolchain, which has a copy of the code in a new repository that's been created for you, along with a pipeline to build the app and a web-based editor. In addition, the pipeline is already running and taking care of deploying the app for you.

2

See Lauren’s Lovely Landscapes running

To see if the pipeline has finished deploying the app, click on its tile on the toolchain page.

Pipeline tile on the toolchain page

This takes you to the pipeline page that shows which jobs are currently running. While the app is being deployed you’ll see something like this:

Screenshot showing which jobs are currently running
Screenshot showing which jobs are currently running

When it finishes successfully, you should see this:

Screenshot showing successful deployment
Screenshot showing successful deployment

We’ll talk more about the pipeline in a future tutorial, but for now, once the pipeline is finished running, you can click on the Toolchain link to get back to your toolchain landing page, and then click the View app button to see it running.

Browse your application that is running live on Bluemix. Click on the Antarctica page and note that the current price is $100.00.

3

Making changes: Update the price of an item

As we mentioned above, the source code for the application is stored in a Git repository that is hosted by IBM. This hosted git is called "Git Repos and Issue Tracking." You can see this repo by clicking on its tile on the toolchain page, which will look like this:

Git repository tile

Any tool that can clone a repo can be used to develop your code, including just using the command line. You can also install command-line tools for deploying directly to Bluemix if you want.

For now, to keep things simple, we’ll use the Eclipse Orion Web IDE that was included in your toolchain. To get to it, click on its tile on the toolchain page, which will look like this:

Eclipse Orion Web IDE                     tile

The Web IDE will open, and clone the toolchain repository into an online workspace, so you have a place where you can develop and test things before committing them. This is also useful if several people are working with the same toolchain, to prevent you from stepping on each other's work. Once the Web IDE has loaded,

  1. In the left pane of the Web IDE, expand the line that shows your repository name, then expand the "views" folder 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 quite a sale! ;-)
  4. Click File > Save.

The Web IDE uses a launch configuration to control where your application is deployed. This lets you have more control over what's happening when you are deploying from your workspace. For example, it will let you override the settings in your manifest file. For now though, it's enough to create one and use it like this:

  1. Click on Create new launch configuration, then click on the "+" sign in the drop-down menu.
  2. The Edit Launch Configuration dialog will open. It may take a while for this to populate, but once it is finished, you should see something like this: Edit Launch Configuration dialog                     tile
    Edit Launch Configuration dialog tile
  3. The Target, Organization, and Space fields specify where in Bluemix you want to deploy the app. Just leaving these as the default values should be fine, but you can change them if you like.
  4. Click the deploy button (Deploy icon).
  5. If prompted to stop and redeploy your app, click OK.
  6. After your application is deployed, click the Open URL button (Open icon) in the top gray bar.
  7. In your app that opens, click Antarctica.

When an application is deployed, the app's artifacts are bundled, an app is created in Bluemix, the bundled app is transferred to Bluemix, and the app is started. Bluemix application names and URLs are created using properties that are often defined in a manifest.yml file in your source code. The "Lauren's Lovely Landscapes" source code 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. Deploy button in nav bar
    Deploy button in nav 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 repository. Those changes will be deployed.
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, you will see your repo’s name; click on the triangle beside it to expand it, then expand the "views" folder and select antarctica.tpl.
  2. In the pane showing the file’s contents, scroll down until you see <div id="price">100.00</div>.
  3. Replace 100.00 with 99.99.
  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 the page that opens, click Antarctica.

Notice that the price of the item has been updated. Success!

What next?

Take a moment to reflect on the awesomeness of what you just did. You are able to use Bluemix Continuous Delivery 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.

Next, 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!

In Part 2 of this series, you'll learn how to deploy an application that uses a Bluemix service.


Downloadable resources


Related topics


Comments

Sign in or register to add and subscribe to comments.

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=DevOps, Cloud computing
ArticleID=983796
ArticleTitle=Intro to IBM Bluemix Continuous Delivery, Part 1: Deploy and update a simple app
publish-date=09062017