Setting Up Build with VSTS GIT for Angular project and deploy to Azure (CI CD)

Assumption

1. You have scaffolded your Angular project using Angular CLI
2. You have committed the angular project in GIT repo in VSTS.

Goto your package.json and add following command to it

“build-prod”: “ng build –prod –aot”

–aot flag is optional, –prod meta-flag compiles with AOT by default.

Now go to your git project in VSTS online and create a build definition as follows

1. Click on Builds and Release from top menu
2. This should show create NEW build definition button
   
3. Click on the New button to show the list of available OOB build definitions
   
4. Select Azure Web App and select Apply, this will show the Azure Web App build defintition steps
   
5. Configure the Process tab as per your settings, like Azure subscription, Service Name etc.
6. As you can see OOB Azure Web App template has lot of unwanted build steps like Nuget Restore, Building solution etc. We can remove all these build steps and just keep the Azure App Service Deploy
7. Now we need to do NPM install and NPM build so for that we add 2 builds steps
8. Search for NPM and add it
9. Configure NPM build step as shown below and please ensure to configure the “Working folder with package.json” to “$(Build.SourcesDirectory)”
10. This will ensure that it does npm install during the build.
11. Add one more npm build steps similarly like above, only difference in this case is we will trigger the prod build which we had configures right at the top of the article. Configure the build steps like shown below
12. The above npm step is to run custom npm command which is this case is “run build-prod”. As you can recollect in the package.json file we had configured build-prod command.
13. Please note that 2 npm steps should be prior to the Azure App Service deploy step.
14. Save the build definition and queue the build to verify every thing works as expected.
15. Once the build has succeeded you can set up CI/CD, continuous integration and continuous deployment, be default it is disabled
16. Enable the continuous integration and configure as below
17. This will trigger build and deploy the content for every git commit.