1

I have a node.js/typescript/angular project in BitBucket that I want to create a build (CI) pipeline for it on Azure Devops. I used the classic editor to create the pipeline (reason below) and am trying to add the following task(s)/step(s):

  1. npm install @types/node@8.10.52
  2. ng build (ng is angular)

classic editor pipeline

If was to use the YAML configuration, the resulting YAML file looks like the following file below, so how do i create a "script" manually after the Node task i have in classic editor? I only have options to add "npm" as a task, which is why i have added 3 npm tasks as shown in image above with 3 separate custom commands to mimic the steps configuration in the YML file below. Is that the way to do it with custom command?

YAML file npm/angular representation via YAML configuration:

trigger:
- master

pool:
  vmImage: 'ubuntu-latest'

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '10.x'
  displayName: 'Install Node.js'

- script: |
    npm install -g @angular/cli
    npm install
    ng build --prod
  displayName: 'npm install and build'

Reason why Im using classic editor:

When i tried saving the YAML configuration pipeline, i got a "Error from bitbucket: something went wrong" error, which appears to be a write-permission issue based on what i found from Atlassian forums.

So i ended up just using the classic pipeline editor, and this way i was able to select a specific branch (i.e. dev) instead of master (prod) branch.

Cataster
  • 3,081
  • 5
  • 32
  • 79

1 Answers1

1

The way I've handled this is to add a script to your package.json:

"scripts": {
    "ng": "ng",
    "build": "ng build",
    "build-prod": "ng build --configuration=production"
    "build-dev": "ng build --configuration=dev"
},
 ...

Then, you just call run-script from the custom NPM task:

enter image description here

Or you could optionally on the task just call run-script build --prod since you can pass arguments on the task.

These same steps are available in YAML, it would look something like this:

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '10.x'
  displayName: 'Install node.js'
  
- task: Npm@1
  inputs:
    command: 'install'
  displayName: npm install
  
- task: Npm@1
  inputs:
    command: 'custom'
    customCommand: 'run-script build --prod'
  displayName: 'npm build'
Matt
  • 3,658
  • 3
  • 14
  • 27
  • i see! since someone else created this project, i didnt know about this package.json file. I navigated to angular folder and found there are multiple json files with package in their names, although i do see one thats strictly "package.json". is that the only script i add this to? also if i dont want to build for production but just dev, would it be: `run-script build` only? – Cataster Nov 03 '20 at 21:10
  • Yeah, believe just the `package.json` file. I'm assuming you are seeing something like `package-lock.json`. You might look at this [answer](https://stackoverflow.com/a/53578685/10761889). – Matt Nov 03 '20 at 21:15
  • ah-ha! that makes sense! so its kinda like gradle file but for angular. basically default created files that handle the versions. – Cataster Nov 03 '20 at 21:16
  • Yeah, it is possible might not even need that install @angular/cli if you have the dependencies configured. I think it might just happen as the install command. I updated for the other clarification you were asking about. – Matt Nov 03 '20 at 21:19
  • gotcha. btw, do these tasks/installs really need to run everytime a commit/change is done to the repo? I am thinking about it and it seems like as if its just installing over and over...isnt that kinda pointless? do i just need the build steps? I am using Azure pipeline pool (e.g. windows 2019), so i am not sure if the install steps are required due to the fact that the pipeline runs on a different machine each time it runs (i think) – Cataster Nov 03 '20 at 21:23
  • If you are using a Microsoft-hosted agent, you get a fresh image every time. I haven't looked into it, but you might reference [this](https://learn.microsoft.com/en-us/azure/devops/pipelines/release/caching?view=azure-devops#nodejsnpm) if caching npm is something you care about. – Matt Nov 03 '20 at 21:26
  • yep im using microsoft-hosted agent. I guess caching wouldnt be an option here since a different image each time. Thanks anyways, this really helps! One more thing: each time i run the pipeline, it displays the name of the latest commit. is that normal? is it only building the latest commit? or is it just for display purposes? – Cataster Nov 03 '20 at 21:30
  • https://stackoverflow.com/questions/64065863/remove-commit-message-from-azure-devops-pipeline-run-web-page – Matt Nov 03 '20 at 21:42
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/224066/discussion-between-matt-and-cataster). – Matt Nov 03 '20 at 21:42
  • ohhh i see. so its just a display name not really anything major. One last question if you dont mind, as your guidance is very helpful as i create this CI for first time. How does the CI pipeline actually build? if the tasks are mainly install node.js and npm, is the `"build": "ng build",` or `npm build` what actually builds the entire project files? – Cataster Nov 03 '20 at 21:50
  • quick update to this: it has to be `run-script build -- --prod` note the extra dashes, else a warning will be on production with angular. https://learn.microsoft.com/en-us/azure/devops/pipelines/tasks/package/npm?view=azure-devops#custom-npm-command – Cataster Aug 02 '21 at 17:19