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!
- 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.
- Install Git. Use Git Bash or any other Git shell for running npm tasks even if you are using a windows box.
- Install angular-cli for building deployables.
npm install -g angular-cli
- Sign up a Bluemix account, or use an existing one.
- Install bluemix-cli for connecting to bluemix.
- Install cloudfoundry-cli for deployment of your applications.
Project Local Build
- 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
- Cd into your project directory.
- Fetch angular-cli tooling libraries that are needed for building the deployables:
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 buildin the script section of the
- Install the project dependencies:
- Build the project:
This task is defined in
npm run dist
manifest.ymlfile to the
distdirectory together with the Staticfile. Those two are needed to deploy the
distfolder with the Cloud Foundry static buildpack.
- Run the project locally, to see whether everything works as described in the Tour of Heroes Tutorial:
The test URL is
Heroes on Cloud a la Bluemix
- Cd into the dist directory after build and local test:
- Connect to IBM Bluemix:
bluemix api https://api.eu-gb.bluemix.net
- Login to Bluemix:
If you are using a federated ID, use the -sso option:
bluemix login -u <your-user-account> -o <your-organization> -s <your-space>
bluemix login -u <your-user-account> -o "<your-organization>" -s "<your-space>" -sso
- Up onto the cloud:
It will create a new app named angular2-heroes with a random route. Watch for the route name in the
TroubleshootingTo troubleshoot your Bluemix app the main useful source of information is the logs. To see them, run:
cf logs <application-name> --recent
Extended ReadingJoe 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.