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”

VSTSAngularBuild1

–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
    VSTSAngularBuild2
  3. Click on the New button to show the list of available OOB build definitions
    VSTSAngularBuild3
  4. Select Azure Web App and select Apply, this will show the Azure Web App build defintition steps
    VSTSAngularBuild4
  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 DeployVSTSAngularBuild5
  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 itVSTSAngularBuild6
  9. Configure NPM build step as shown below and please ensure to configure the “Working folder with package.json” to “$(Build.SourcesDirectory)”VSTSAngularBuild8
  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 belowVSTSAngularBuild9
  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 disabledVSTSAngularBuild10
  16. Enable the continuous integration and configure as belowVSTSAngularBuild11
  17. This will trigger build and deploy the content for every git commit.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s