5

Has anyone been able to get CI builds working with fontawesome pro? Locally my build and fontawesome pro works because I've run these commands

npm config set "@fortawesome:registry" https://npm.fontawesome.com/ && \
npm config set "//npm.fontawesome.com/:_authToken"

However my CI build fails with the message 

npm ERR! 404 Not Found: @fortawesome/fontawesome-pro@5.7.1

I've tried setting a .npmrc file but it didn't help. I also tried adding fontawesome's repo in service connections.

Tija
  • 1,691
  • 4
  • 20
  • 33

2 Answers2

4

You should set the npm config to project level, by adding a .npmrc in the same folder as package.json

The contents of the .npmrc should be

@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken={your token}
Joel'-'
  • 652
  • 1
  • 5
  • 17
  • I very strongly recommend _not_ checking secrets into source control. Checking in an `.npmrc` with the registry line is good so that both your local and CI builds use it, but Yennefer's answer is much better for the authentication part. – Jonathan Myers Sep 01 '23 at 14:23
4

Now (2023) this can be done by adding the proper service connection, and authenticating via npmAuthenticate@0.

Create Service Connection

In order to create the proper service connection in Azure Devops you have to

  1. open project settings from the gear icon
  2. open service connections under pipelines
  3. click on New Service Connection
  4. select NPM
  5. choose Authentication token
  6. paste in Registry URL: https://npm.fontawesome.com/
  7. paste in Personal Access Token your token
  8. set Fontawesome as Service connection name. Note that this is the identifier of the connection and it is used by Azure
  9. check the Grant access permission to all pipelines in case you want all the pipelines of your project to have access to it
  10. save

The window should be like this:

New Service Connection Window

You can read more about the procedure at Learn.

Authenticate in the Pipeline

The authentication is done by the npmAuthenticate@0 provided that your .npmrc already includes the proper registry configuration, which at this time, happens to be @fortawesome:registry=https://npm.fontawesome.com/

In this case, the pipeline would be something like this:

steps:
  - task: npmAuthenticate@0
    displayName: "Authenticate NPM registry"
    inputs:
      workingFile: .npmrc
      customEndpoint: Fontawesome

Note that CustomEndpoint here refers to the name entered previously in Service connection name.

Bonus

We don't use explicit .npmrc files in our builds, for this reason, we manually forge the configuration at runtime. Note that we build on self-hosted agents in containers, therefore we have a brand new throw-away environment every time, and leaving the environment in a dirty state is not a problem in this case.

steps:
  - task: PowerShell@2
    displayName: "Prepare NPM authentication"
    inputs:
      targetType: "inline"
      script: |
      $registry = '$(COMPANY_DEVOPS_REGISTRY)'
      npm config set 'registry' "$registry"
      npm config set '@fortawesome:registry' 'https://npm.fontawesome.com/'
      
      $fileName = [IO.Path]::Combine($home, '.npmrc')
      
      if (!(Test-Path -Path $fileName)) {
        Write-Host "##vso[task.logissue type=error;]Could not find the proper npm configuration file."
        Write-Host "##vso[task.complete result=Failed;]"
        exit 0
      }
      Write-Host "##vso[task.setvariable variable=npmrcFilePath]$filename"

  - task: npmAuthenticate@0
    displayName: "Authenticate NPM registry"
    inputs:
      workingFile: $(npmrcFilePath)
      customEndpoint: Fontawesome

Above, COMPANY_DEVOPS_REGISTRY is a variable containing our NPM Azure Devops registry. The first task ensures we have all the necessary information stored in the configuration file, which we know to be located in the home folder of the current user.

The second task, simply authenticates using the global configuration file.

Yennefer
  • 5,704
  • 7
  • 31
  • 44