How to manually add “script” in an Azure CI Pipeline?

Question

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):

npm install @types/[email protected]
ng build (ng is angular)

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.

Matt Matt · Accepted Answer · 2020-11-03T21:03:07

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:

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'

How to manually add “script” in an Azure CI Pipeline?

1 Answers