The Angular CLI makes it easy to build a production ready Angular app. The next step is getting that app up and in the cloud. This is where a CI process helps take that code from Github, build it properly, and the deploy it to Azure. I outlined the detailed steps below if you want to try this for yourself.

If you want to learn how to build your Angular app using the Angular CLI, check out my course on Pluralsight.

You can also watch these steps in this 3 minute video.

Prerequisites

We need something to serve the assets such as Node.js. Be sure you have a Node.js server in your Angular project, similar to the one I have here.

Make sure the Angular CLI will copy your Node.js server to your dist folder. Here is a snippet from my .angular-cli.json file that does this. This file assumes there are an index.js and package.json file in the /server folder that we want to distribute.

"assets": [
  "assets",
  "favicon.ico",
  {
    "glob": "index.js",
    "input": "./server/",
    "output": "./"
  },
  {
    "glob": "package.json",
    "input": "./server/",
    "output": "./"
  },
],

We can and should create an Node.js express server is more robust and only serves the angular content (this one servers the package.json too). This node.js server is merely an example ... you should feel empowered to use your own node.js server.

Create an account (consider the free trial) with Azure and create and Web App Service.

If you have not already done so, go to https://www.visualstudio.com and sign up/in to your account. Then create a team and project.

Start from your project's home page.

Deploying

  1. Go to the Build and Release menu and select Builds
  2. Click the New button to create a new build
  3. Start with an empty process

Get Your Code

  1. Under Process, click on Get Sources
  2. Select Github, enter your authorization, and select your repository and branch

Install the Angular CLI

  1. Click Add Task, on the left, search for npm on the right
  2. Select npm (run an npm command) and click Add
  3. Enter a name such as install the angular cli
  4. Enter the npm command as install
  5. Enter the arguments as @angular/cli -g

Install the Project's NPM Packages

  1. Click Add Task, on the left, search for npm on the right
  2. Select npm (run an npm command) and click Add
  3. Enter a name such as install packages via npm
  4. Enter the npm command as install

Build the Project with the Angular CLI

  1. Click Add Task, on the left, search for command line on the right
  2. Select Command Line and click Add
  3. Enter a name such as build the angular app
  4. Enter the tool as ng
  5. Enter the arguments as build --prod

Install the Express Server's NPM Packages

  1. Click Add Task, on the left, search for npm on the right
  2. Select npm (run an npm command) and click Add
  3. Enter a name such as npm install in the dist folder for express
  4. Enter the working folder as dist/
  5. Enter the npm command as install

Deploy to Azure

  1. Click Add Task, on the left, search for azure app service deploy on the right
  2. Select Azure App Service Deploy and click Add
  3. Enter a name such as Azure App Service Deploy: my-app
  4. Select your Azure subscription
  5. Select your app service name
  6. Set the package or folder to dist/
  7. Select the checkbox for Generate Web.config
  8. Enter the Web.config parameters as -Handler iisnode -NodeStartFile index.js -appType node
  9. Select the checkbox for Publish using Web Deploy
  10. Check the box for Remove additional files at destination

Run this Process on all Commits/Merges to Github

  1. Go to triggers in the upper left and enable continuous integration
  2. Press the Save and Queue button

Then you can queue it and go watch the build's progress!