Tour of Heroes in IBM® Bluemix®

Tour of Heroes, the official tutorial of Angular 2 teaches the quintessential aspects of AngularJS 2, such as data services, routing (application navigation), and HTTP. It is an ideal start point for anyone who would like to learn Angular 2, and the source code of the heroes application also serves as a good template for an initial setup of an Angular 2 application.

A while ago I went through this tutorial and have it deployed on IBM Bluemix (this link may be invalid after a few days, because I'm going to delete it from my bluemix account to free up resources). This post is a tutorial about how to get your Angular 2 heroes up and running on Bluemix.

This project is extended from Frederic Lavigne’s bluemix-hello-angular2 project. Many thanks to Mr. Lavigne!

Prerequisites

1. If you haven’t gone through the official Angularjs 2 Quickstart and the Tour of Heroes Tutorial, by all means do it. Install all the runtimes and additional libraries that is described in the Quickstart.
2. Install Git. Use Git Bash or any other Git shell for running npm tasks even if you are using a windows box.
3. Install angular-cli for building deployables.
   

   npm install -g angular-cli

4. Sign up a Bluemix account, or use an existing one.
5. Install bluemix-cli for connecting to bluemix.
6. Install cloudfoundry-cli for deployment of your applications.

Project Local Build

1. Clone the source code of the “Angular 2 Heroes on Bluemix” app to your local directory. Let’s call it .
   

   git clone https://github.com/nnworkspace/angular2-heroes-bluemix

2. Cd into your project directory.
3. Fetch angular-cli tooling libraries that are needed for building the deployables:
   

   ng init

   If you are asked any questions like “packages.json already exists, overwrite?”, answer all those questions with no. I have already written and tested the configuration files, and these config files should not be overwritten by the angular-cli default values. The mere purpose of this step is fetching the building dependencies to your project directory. Without this step, the ng build in the script section of the packages.json will fail.
4. Install the project dependencies:
   

   npm install

5. Build the project:
   

   npm run dist

   This task is defined in package.json. It compiles the source code written in TypeScript into deployable JavaScript. In this example, we make bluemix serve plain HTML, CSS, JavaScript files. In addition it copies the bluemix manifest.yml file to the dist directory together with the Staticfile. Those two are needed to deploy the dist folder with the Cloud Foundry static buildpack.
6. Run the project locally, to see whether everything works as described in the Tour of Heroes Tutorial:
   

   ng serve

   The test URL is http://localhost:4200/.

Heroes on Cloud a la Bluemix

1. Cd into the dist directory after build and local test:
   

   cd dist

2. Connect to IBM Bluemix:
   

   bluemix api https://api.eu-gb.bluemix.net

3. Login to Bluemix:
   

   bluemix login -u <your-user-account> -o <your-organization> -s <your-space>

   If you are using a federated ID, use the -sso option:
   

   bluemix login -u <your-user-account> -o "<your-organization>" -s "<your-space>" -sso

4. Up onto the cloud:
   

   cf push

   It will create a new app named angular2-heroes with a random route. Watch for the route name in the cf push output.

Troubleshooting

To troubleshoot your Bluemix app the main useful source of information is the logs. To see them, run:

cf logs <application-name> --recent


Extended Reading

Joe Deluca also made an Angluar 2 project petstore-client-angular2 run on Bluemix. You may want to have a look.

---

The program is provided as-is with no warranties of any kind, express or implied.