Azure Pipelines: publish to Azure Artifacts

This article is a follow-up to my previous article about using Azure Artifacts for own NPM modules.

In that article I showed how to create a NPM module by hand on your local system and publish it to Azure Artifacts. But now we like to integrate it into CI/CD, so in this article I will show you how you can create an Azure Pipeline in Azure DevOps for publishing NPM modules to Azure Artifacts.

Get started

To get started you need the code from the previous article.

Open Visual Studio Code with the NPM module project folder.

Git repository

If you have not done it yet, add the code to a repository on Azure DevOps (or GitHub or Bitbucket). We will use Azure Repos.

Login into your Azure Devops at https://dev.azure.com.

Navigate to Repos in the sidebar and press the + icon and choose New repository.

Repository type will be Git.

Enter a repository name, e.g. storage-lib-node.

Every repository should have a README. You can leave the checkmark or add one later.

Select to add a .gitignore of type Node.

And press Create.

Click on the Clone button and copy the command line.

Go back to Visual Studio code and open the integrated terminal.

Type:

git init
git remote add –t master origin <copied command line>
git pull

Next open the .gitignore file and add .npmrc.

If you forget to add the .npmrc file to your .gitignore and it is added to the repository, the build step will fail when trying to install the npm modules on the build server with an authentication error!

Next run the following command in the integrated terminal:

git add .
git commit –m "Initial commit"
git push --set-upstream origin master

If you now go back to Azure Repos you will see that youre files have landed in Azure DevOps.

Azure Pipelines

Azure Pipelines are the CI/CD (continuous Integration / Continuous Deployment) part of the Azure DevOps.

You can create pipelines in the browser or by creating a yaml file directly in your project and import that file into Azure DevOps.

When creating a pipeline in the browser, you can choose between creating a yaml file (using a wizard) or the classic editor without yaml (only gui).

Using the classic editor is bit more straight forward to do, but normally you will want to use the yaml files so you have your pipeline alongside the code in your repository and have version control over it.

My collegue Joost Luijben has already written some articles about Azure DevOps, so if it is already familar to you just skip to the section about adding the steps for build and publish.

Creating the azure pipeline

When you start with Azure Pipelines I would suggest to use the browser to create your yaml file (it will be stored in your repository by the way). Later, when you have more experience and will reuse pipelines it will be easier to just create them in Visual Studio Code. You should then also install the Azure Pipeline extension then which gives you syntax highlighting and code completion.

In Azure DevOps navigate in the side bar to Pipelines.

When you have not created any pipelines yet you have the option to create the first one:

Press Create pipeline.

When you have already a pipeline, you can create a new one use the + icon in the sidebar.

Next we need to select where out code is located. So Choose Azure Repos Git.

Select your repository.

Next you need to select a starter pipeline. Choose Node.js.

Next you will see the created YAML file.

Replace it with:

# Build pipeline for publishing NPM (NodeJS) module to Azure Artifacts
# Stage 'publish' publishes the NPM module to Azure Artifacts
# Note: The current version is used as set in package.json is used. Make sure that you use a
#       version which is not yet used, other the stage will fail.

trigger:
- none

# Global variables for all stages
variables:
  vmImageNamePool: 'ubuntu-latest'

stages:
# Prepare
- stage: prepare
  displayName: Build and test artifacts
  jobs:
  - job: Build
    displayName: Build artifacts
    pool:
      vmImage: $(vmImageNamePool)
    steps:
      - task: NodeTool@0
        inputs:
          versionSpec: '12.x'
        displayName: 'Install Node.js v12'

      - script: |
          npm install
        displayName: 'Install NPM dependencies'

# Publish
- stage: publish
  displayName: Publish to Azure Artifacts
  jobs:
  - job: publish
    displayName: Publish NPM module
    pool:
      vmImage: $(vmImageNamePool)
    steps:
    - checkout: self
      persistCredentials: true
      clean: true

 We are almost finished.

First place the cursor at the end of the YAML file.

We need to add one more step (the publish step), but we need some assitance with that, so click on Show assistant on the right side.

In the search box, type: npm. And choose the npm task.

Next choose command: publish

Leave the working folder empty.

And with Registry location: select Registry I select here.

And choose as Target registry the registry you created in the previous article.

And press Add.

The task is added to the YAML file. It is probably not indended correctly, so you will need to correct this.

Move the task block to the right until the red underlining is gone.

Next press the down arrow next to Save and run and choose Save.

Enter a commit message and press Save.

If you now go back to Visuyal Studio code, you can do a git pull and you will see that an azure-pipeline.yml file is added to your repository.

Before you hit Run pipeline, note that the npm publish task will use the version number as it is stored in package.json. So if that version already exists in Azure Artifacts, the pipeline will fail.

So first update the version in your package.json file, commit the changes and push to Azure DevOps.

You can do the first 2 steps using this command:

npm version patch -m "Bump version to %s"

And run the pipeline.

Check Azure Artifacts if  the new version is published.

If you go back to the pipeline you will notice that is named (bt default) after the the repository the pipeline was created for. Change the name of the pipeline into for example “Build and publish NPM module storage-lib”. On the pipeline overview page click on the 3 dots to the right of the pipeline and choose “Rename/move”.

Enter a name and press Save. You can also place pipelines in folders, which can become useful when you have a lot of pipelines to group them in folders. Those folders can be seen on the pipeline overview page when you click on the All tab.

I would recommend that when you create a lot of pipelines, you set some naming guidelines to follow for your project otherwise it will become harder to find the pipeline you need. You could for instance choose to start the pipeline name with the type of pipeline, like “[INFRA]” for deploying infra structure components or “[LIB]” for build and publish libraries like NPM modules.

A next step to make this project better is to add unittests for both local development and incorporate it into the pipeline and publish the testresults and code coverage…