Angular Application Build pipeline - Continuous Integration in VSTS

Question

Actually I have my angular application required to deploy into Azure. Honestly its my first time deployment with Angular app. So what I choose was Node with Grunt template.

Here are the steps

steps:
- task: Npm@1
  displayName: 'npm install'
  inputs:
    workingDir: CrSPA/Clientapp
    verbose: false
steps:
- task: Npm@1
  displayName: 'Build Project'
  inputs:
    command: custom
    workingDir: CrSPA/Clientapp
    verbose: false
    customCommand: 'run build-prod'

run build-prod means ng build --prod

My question is it it the correct approach. I asked this because when ever a small change in application, whole npm install procedure takes place and its taking long time to finish. So I'm not sure the way I'm following is the best way.

Also it it best to push after build locally? Also is it OK to push node_modules folder as well into repository, So I cant do an npm install always?

Answer 1

Your approach is good and you should always do a npm i and ng build --prod on the pipeline before the files get in to the repo.

This is because when multiple people who work on the same application if they add a new package if you don't do npm install your pipline build will fail. So it is always recommended to do

1. npm install
2. ng build --prod

You can read more on this article

Answer 2

Actually it is a good practice to do the dependencies whenever you do the deployment,

You can easily specify and change which version of these packages you depend on in the package json so that you will not have any issues in the environment you deploy and your build will use exact package version listed in the JSON file.

Also it is better to use npm ci instead of npm i because it uses the package lock file with exact version numbers so you will always use exactly correct versions.

Here is a good explanation on why you should not include node_modules to commit and as well as build