Deploying Angular to Azure

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

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

Install the Angular CLI

6. Click Add Task, on the left, search for npm on the right
7. Select npm (run an npm command) and click Add
8. Enter a name such as install the angular cli
9. Enter the npm command as install
10. Enter the arguments as @angular/cli -g

Install the Project's NPM Packages

11. Click Add Task, on the left, search for npm on the right
12. Select npm (run an npm command) and click Add
13. Enter a name such as install packages via npm
14. Enter the npm command as install

Build the Project with the Angular CLI

15. Click Add Task, on the left, search for command line on the right
16. Select Command Line and click Add
17. Enter a name such as build the angular app
18. Enter the tool as ng
19. Enter the arguments as build --prod

Install the Express Server's NPM Packages

20. Click Add Task, on the left, search for npm on the right
21. Select npm (run an npm command) and click Add
22. Enter a name such as npm install in the dist folder for express
23. Enter the working folder as dist/
24. Enter the npm command as install

Deploy to Azure

25. Click Add Task, on the left, search for azure app service deploy on the right
26. Select Azure App Service Deploy and click Add
27. Enter a name such as Azure App Service Deploy: my-app
28. Select your Azure subscription
29. Select your app service name
30. Set the package or folder to dist/
31. Select the checkbox for Generate Web.config
32. Enter the Web.config parameters as -Handler iisnode -NodeStartFile index.js -appType node
33. Select the checkbox for Publish using Web Deploy
34. Check the box for Remove additional files at destination

Run this Process on all Commits/Merges to Github

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

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