Recently I had to deploy a simple Angular 5 app to an Azure environment, so I decided to use the VSTS deployment pipelines to speed up the process, but I was wrong. There are so many wrong information on internet that the creation of this build took almost 2 days for me to accomplish.

So I decided to write this post to help people like me who wants a fast and easy way to deploy an Angular app to Azure without pain.

Here are the steps:

The web.config file

This is the most important part of the solutions. You have to tell Azure that you are using a Node application and you need to start it. I tried lots of solutions I’ve found on internet but the one that solved my problem was this one. Here is the full web.config file:

<configuration>
    <system.webServer>
      <rewrite>
        <rules>
          <rule name="Angular" stopProcessing="true">
            <match url=".*" />
            <conditions logicalGrouping="MatchAll">
              <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
              <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            </conditions>
            <action type="Rewrite" url="/" />
          </rule>
        </rules>
      </rewrite>
    </system.webServer>
</configuration>

You have to put this file inside the /src/ folder and refference it on your angular.json file on the assets area, like this:

The VSTS Build

Now its time to create your build and configure the right steps.

Create a new build, select the related source and project and the branch that this build will handle.

As we don’t have a template for Angular apps on azure, click on “Empty pipeline” in the next screen. You will end up to this screen:

Click on “+” at Phase 1 agent, and type “npm” in the search box on Add tasks screen. Select the npm task and click “Add”

Now, select the npm task you added on the left panel and configure it like this image:

Don’t worry about Custom registries, Control Options and Output variables. You don’t need to change it.

Go back to the Phase 1 on left panel and click on “+”again. Add another npm task and configure it like this image:

Add a third npm task and configure it like this:

Now, add a task named Publish Build Artifacts, this task will upload your build to azure. Configure it like this:

Now ITS TIIIIIIMEEEE to deploy your artifact to azure. Add a task named Azure App Service Deploy and configure it like this:

Select the proper Azure subscription and a previously created App service where you will deploy your application. Still in this section, configure the Additional Deployment Options, and set it like the image below:

Your pipeline is ready to be tested and you can click on Save & queue to save your changes and queue a build. But, if you want to configure CI/CD and make your pipeline build after each update on your branch, go to the Triggers tab and select Enable continuous integration.

You can also schedule your builds and execute tasks after build completion.

Here is a picture of a full build executed without warnings:

This is a very simple pipeline but you can add unit tests, integration tests, some other validation and a lot more. It is up to you!

Hope this helps someone with the same problems I had.

Bye!