A continuous deployment approach can help you get application changes faster and more easily to your users, ensuring a robust and repeatable deployment process. Continuous deployment helps you identify potential build issues as they arise.

This tutorial demonstrates the processes of setting up a new Angular application and deploying that app as a static Cloud Foundry site, using DevOps services for automated deployment.

The Angular app is a good application to demonstrate in this tutorial because it has a somewhat more complex build process than a standard Node.js application. Angular apps compile to a static site and require specific buildpacks and node versions the the default.

Learning objectives

When you complete this tutorial, you learn how to set up a new Angular application and deploy that app as a static Cloud Foundry site on IBM Cloud, using DevOps services for automated deployment.

Prerequisites

To follow this tutorial, you need:

Estimated time

This tutorial should take between 30 minutes and an hour to complete.

Steps

First you get your application code on GitHub. Then you create a DevOps Toolchain on the cloud. Then you can deploy and view the app. The following sections contain details for each of these steps.

Get your application code on GitHub

Before you deploy an application, you need one to deploy. You need to complete the following steps:

1. Generate a new Angular application by following the instructions on the Angular Getting Started Page. I call the application DemoApp in this example, but you can name yours whatever you like. Remember the name, because you need to reference your app’s name when configuring your deployment directory.

2. Create a new GitHub repository for your application by following the GitHub instructions.

3. After your repository is created, push your application to your GitHub repository by following the instructions on the page, as shown in the following screen capture:

Create a DevOps Toolchain

To set up continuous deployment for an Angular app, remember that Angular apps are not deployed as a regular Node.js application. Instead, they must be compiled and then served as a static website to the client. Angular apps require a slightly more complex build process than the typical Node.js web application.

A DevOps Toolchain is a set of tools for development, deployment, and operations tasks that you can use together to automate many development tasks (for example, testing and deployment).

It helps to introduce a toolchain earlier in the development process, because it allows you to start off with a simple build process and introduce complexity as your project grows and your builds become more complex. This tutorial uses IBM Cloud DevOps Services for the toolchain, because it provides a variety of tools that help you simplify the process.

Create a Toolchain

1. Log into IBM Cloud and from the menu at the top left, select DevOps.
2. Select the Getting Started page, and then click the Get Started button.
3. Now search for the Build your own toolchain template and select the template, as shown in the following screen capture. Note that the search is case sensitive.
4. Name your toolchain and select the region. Then click Create.

After creating the toolchain, you are directed to overview page for the toolchain, which shows the different tool integrations in the toolchain. At this step there are none, but you can click Add a Tool to add the GitHub integration that pulls your code from GitHub to use in the toolchain:

Get your code from GitHub

1. Click Add a Tool.
2. On the Add Tool Integration screen, search for GitHub and select the GitHub tool integration, as shown in the following screen capture:
3. If you are prompted to authorize the tool, click Authorize, and follow the instructions on the window.
4. Configure your integration by selecting your GitHub server, in this case named GitHub, and set your repository type as Existing. Search for your Repository URL and select the one that contains the app that you want to deploy (in this case AngularDemoApp). Click Create Integration. On the toolchain overview, you can see the two tools that the GitHub integration added, the Issues tool, and the GitHub tool.

Create a delivery pipeline

1. Click Add a Tool to create a delivery pipeline.
2. On the Add Tool Integration screen, search for Delivery Pipeline, and select the tool card.
3. On the Tool Configuration page, set your Pipeline Name, and click Create Integration. You see Delivery Pipeline on our dashboard, along with the GitHub Tools you added earlier.
4. Click the Delivery Pipeline tool on the dashboard to begin setting up the stages of our pipeline. There are no pipeline stages, but you can click Add a Stage.

Add the build stage

1. First click Add a Stage for building your app. Name this stage Build Application, and set up our input. Select an Input Type of Git Repository, and ensure that the correct repository is selected, as well as the master branch:

   

2. Scroll back up and click Jobs. Then add a build job to your stage by clicking the add icon:

   

3. Select our Builder Type as npm.

4. Change your build script as shown in the following example. The script installs the version of node that your application needs, installs your app dependencies, and completes a production build for our application.

    #!/bin/bash
    export NVM_DIR=/home/pipeline/nvm
    export NODE_VERSION=8.12.0
    export NVM_VERSION=0.29.0
   
    npm config delete prefix \
      && curl https://raw.githubusercontent.com/creationix/nvm/v${NVM_VERSION}/install.sh | sh \
      && . $NVM_DIR/nvm.sh \
      && nvm install $NODE_VERSION \
      && nvm alias default $NODE_VERSION \
      && nvm use default \
      && node -v \
      && npm -v
   
    npm install -g @angular/cli
    npm install
   
    ng build --prod
   

   Show more

   To view an explanation of the general version installation process, see How to use a current Node version on IBM DevOps Delivery Pipeline, a blog post from Michael Wellner.

5. Select the correct Build Archive Directory, as shown in the following example:

    dist/DemoApp
   

   Show more

   If you did not name your app DemoApp, select your BuildArchiveDirectory with the following command:

    dist/<YOUR APP NAME>
   

   Show more

6. Click Save. The Delivery Pipeline stage view opens, as shown in the following screen capture:

   

Add the deploy stage

1. Click Add a Stage to create a stage for deployment.

2. Rename your stage to Deploy. Ensure that your Input Type is Build Artifacts, that the Stage is set to Build Application (or whatever you named your build stage), and that the Job is the build job from your previous stage.

3. Click the Jobs tab and add a deploy job by clicking the add icon. Then set your Deployer Type as Cloud Foundry and the IBM Cloud Region as the region where your organization and space are located. Set the organization and space where you want your app resource. Then set your application name for our Cloud Foundry app.

4. Change your deploy script. Use the cf push command with the Static File buildpack, because Angular apps are built to a static web page. Use the --hostname option to set the route for your application as well as the --no-manifest option. Use the script shown in the following example. The host name can be anything you like, the route through which your application or website is accessed.

    #!/bin/bash
    cf push "${CF_APP}" --hostname <YOUR HOSTNAME> --no-manifest -b 'https://github.com/cloudfoundry/staticfile-buildpack'
   

   Show more

   If you want to restrict the memory use of your application use the -m flag as shown in the following example:

    #!/bin/bash
    cf push "${CF_APP}" --hostname <YOUR HOSTNAME> --no-manifest -m 256M -b 'https://github.com/cloudfoundry/staticfile-     buildpack'
   

   Show more

5. Click Save, which opens the Delivery Pipeline Stage view. The Application Manifest allows you to set your application configuration through a manifest file as opposed to through the command line interface. For more information, see the Cloud Foundry documentation about Application Manifests.

Deploy the app

1. Run your Build Application stage with the Play button at the top right of the Build Application card. The Deploy Stage is triggered, as shown in the following screen capture:

   

2. When your Build and Deploy phases complete successfully, you see the following screen:

   

   If the stages are red, one has failed. You can view the logs by clicking on the build or deploy stages by clicking View logs and history. Then you can troubleshoot any issues you encounter in either of your stages.

   Note that as you update your application master branch in GitHub, your build and deploy stages are run automatically.

View your application

1. You can navigate to your IBM Cloud dashboard through the menu at the top left or by clicking IBM Cloud in the menu at the top of the window. See your new, created application:

   

2. Select your application to get to the application screen where you can view your application information. From the menu on the left, you can modify the number of instances, the instance memory, and other information about your application.

   

3. Open your application site by clicking Visit App URL next to the name of your application.

   

   And you’re done! You successfully built and deployed an Angular app with IBM Cloud DevOps.

Troubleshooting

Try the following tips if you receive error messages.

Git is not recognized

If you get a 'git' is not recognized as an internal or external command message, you do not have git installed. You can download git at git-scm.com, then close and reopen your terminal and navigate back to your application directory. Then run the following commands:

git add .
git commit -m "first commit"
git remote add origin <YOUR REPOSITORY URL>
git push -u origin master

Not a Git repository

When trying to push your repository to GitHub you receive a fatal: not a git repository message, ensure that you are in your app directory (in this case DemoApp) and run the following commands:

git init
git add .
git commit -m "first commit"
git remote add origin <YOUR REPOSITORY URL>
git push -u origin master

Summary

You successfully deployed an Angular app to Cloud Foundry by using DevOps Services on IBM Cloud. Your application also has continuous deployment, which enables easier and faster deployment of changes to our site.

You can try out other ways to work with DevOps Services at IBM Cloud Continuous Delivery. Learn more about DevOps on the IBM Developer DevOps page.