Deploy an Angular CLI app to Azure with Azure DevOps

I recommend following every step here in order, otherwise you’ll likely run into multiple annoying issues which could’ve been avoided.

Versions

Angular CLI: 7.3.8
Angular: 7.2.13

Create an App Service resource

We will be deploying our Angular app to an Azure App Service, so we need to create this resource first.

  1. In Azure Portal, create a new Web App (go to a resource group, click the Add button, search for Web App)

Prepare the code

  1. In package.json, add npm script to build production version of the app:
    “scripts”: {
    “build:prod”: “ng build –prod”
    }
  2. Add following web.config to the “src” folder. The .woff config is necessary if you are using custom .woff fonts, otherwise you will get 404 errors on your website once it’s deployed (thanks to this post for helping me figure this issue out http://www.codepal.co.uk/show/WOFF_files_return_404_in_Azure_Web_Sites)

3. In your angular.json, you need to make sure that this web.config is deployed during the build. Add ”“src/web.config” to your assets array to ensure that this happens.

Set up Azure DevOps build pipeline

We’re going to set up a build pipeline in Azure that will install all the node modules, build the Angular project for production, and then publish the resulting assets for us to use in a release.

  1. Create a new build pipeline in Azure and link it to the repository where your Angular app is saved.
  2. Select “Hosted VS2017” as your build agent.
  3. You will need to add 2 npm tasks to this build. Click the + icon and search for “npm”, then add 2 of those tasks.
  4. For the first npm task you will run an npm install command. Make sure the working folder is set to the folder where your package.jsonis.
  5. For the second npm task you’ll be building your Angular app using the command that we added. Select “custom” command option and set the Command and arguments section to run-script build-prod.
  6. Now, click the + icon again and search for “Publish build artifact”, add that task. After your application is built, the resulting assets will be added to the “dist” folder. So set the “Path to publish” to “dist”. Note that this might be different on your project if someone on your team has changed it. Check your angular.json file, you will see a parameter called “outputPath” from the “build” task. The default is “dist” but if someone on your team has changed it, then you will need to change it in this step too.

Your final build will have the following 3 tasks as discussed above:

Run a build and make sure it works. It is helpful to verify that all assets were created as expected. You can click on your resulting build in Azure DevOps and there will be an “Artifacts” button. When you click on this you should see your “dist” artifact, open that up and make sure all your project stuff is there correctly.

Set up Azure DevOps release pipeline

  1. Create a new release pipeline. You want to link it to your build artifact that you set up in the build you just created.
  2. Add a new stage to the pipeline. Select the Agent pool as “Hosted VS2017”.
  3. Click the + button to add a task and search for “Azure Web App”, add that task. For the Azure Subscription, select the subscription where you created your App Service resource. For App type, select “Web App on Windows”. For App name, select the App Service resource that you created. For Package or folder, select the “dist” folder (this is the artifact that was published at the end of the build).

Run the release, then go to the URL for your App Service. It should work.

Leave a comment

Your email address will not be published. Required fields are marked *