Font-awesome: [PRO] Azure Devops .npmrc registry problem

[pardonmeme]

Hey guys,

I'm tiring apart my hairs because seems like it is impossible to do that CI build project on azure devops.
As stated in faq, putting .npmrc in git with token makes non sense for obvious reasons. Then one way to do that is already exlcuded.

Other and last way was setting up the global config
npm config set "@fortawesome:registry" https://npm.fontawesome.com/ && \
npm config set "//npm.fontawesome.com/:_authToken" TOKEN

It didn't work with the azure devops pipe line.

I have also tried to register a new registry connection and it also didn't worked. Because you cannot just add aliases there.
http://prntscr.com/mtlc5z <- screenshot

So we are kind of stuck with our CI, because I couldn't figure out the way to npm install with the fontawesome PRO packages

http://prntscr.com/mtld8v

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community.

As stated in faq, putting .npmrc in git with token makes non sense. Then one way to do that is already exlcuded.

Do you mean that you don't want to share your authorization key ?

That's right, you should not do that!

I do not use Azure Devos, but as a TravisCI user, I suggest you to consider [secret variables]: https://docs.microsoft.com/en-us/azure/devops/pipelines/process/variables?view=azure-devops&tabs=yaml%2Cbatch#secret-variables

You should put the auth token in a secret variable and then refer it from the .npmrc like an environment variable: https://docs.npmjs.com/files/npmrc#files

Let me know if this could work for your use case

[tagliala]

@robmadole any suggestion?

[pardonmeme]

Alright, I came up with quite smooth solution that works for me. Maybe there is a better way to do that but in case someone would have the same problem.

So, basically I added a new variables library which includes the fontawesome auth token.

Then I have included the library in the build pipeline

And last thing I added a new task which creates a new .npmrc file with the configuration shown on the fontawesome documentation and used the variable that I did set up earlier.

And there you go, the alias registry was registered.

If someone have a better suggestions, I'm open minded :D
@tagliala

[tagliala]

Thanks for sharing your solution

[acaravia]

@pardonmeme I've been struggling with this for a couple hours but not having success like you did. Granted I'm accessing a different registry but trying to accomplish the same thing. A couple things I'm noticing with my build is the that when npm install looks for .npmrc file it is actually looking for BuildId.npmrc so I prefixed my .npmrc file with that name but I'm still not getting it to work. I followed your steps verbatim so curious if there is a possible step you may have forgotten to post? Appreciate you doing all the heavy lifting for me though :)

[acaravia]

@pardonmeme was finally able to get it to successfully install. Here are the differences from yours to mine so I have something configured different somewhere.

When creating my file I had to include both the full path and buildId of the file. I got these from looking at where my npm install was looking for the .npmrc on my other 500 failed attempts. :) While getting the BuildId from the predefined build variables. Anyway, you definitely saved me a few hairs. :)

[itsjusth]

My solution is elegant. Add the fontawesome feed as an upstream source to your Azure Artifacts Feed.

https://npm.fontawesome.com/YOUR-TOKEN/

You don't have to mess with .npmrc during Azure DevOps ci at all.

[enihar]

My solution is elegant. Add the fontawesome feed as an upstream source to your Azure Artifacts Feed.

https://npm.fontawesome.com/YOUR-TOKEN/

You don't have to mess with .npmrc during Azure DevOps ci at all.

Could you explain how you did that.

[bluebaroncanada]

@enihar I had the same question. If you go to the Azure Artifacts section and select NPM, it tells you exactly what to do which is just create a .npmrc file in the same directory as your packages.json file and commit it to your repository. It only needs one line to work:

registry=https://npm.fontawesome.com/YOUR-TOKEN/

[tagliala]

Of course try to avoid to commit your private token if the system allows to use environment variables to store secret keys

[bluebaroncanada]

@tagliala That's a good point. In my large team, anyone having access to the fontawesome token isn't a problem. If we ever make it public, then we will definitely take your advice.

[robmadole]

registry=https://npm.fontawesome.com/YOUR-TOKEN/

This method ☝️ is deprecated because of security issues. We no longer support this with the new infrastructure.

[bluebaroncanada]

@robmadole Can we get a link or some more info?

[robmadole]

The correct way:

@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=TOKEN

Or as @tagliala mentioned if you can use a secrets system with environment variables:

@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=${FONTAWESOME_NPM_AUTH_TOKEN}

A link to our docs on this

[bennett-elder]

Found this and had hoped that passing the token in the URL still worked since that seems to be the only way to add it as an upstream source in Azure DevOps. The security impact seems negligible (as mentioned above) because everyone on the team would be using that same token to do local builds.

[itsjusth]

As @robmadole mentioned, my method is deprecated.

Untested: You could save the .npmrc as a secure file and insert it before the restore step in your build pipeline. .npmrc should be in your .gitignore of course.

[robmadole]

@bennett-elder the security impact was not negligible. The lock files would store the token in URLs and that caused lots of accidental leaked tokens. This especially became a problem for open source projects where a user would configure the token locally and then Yarn or NPM would save the token into the lock file. That would get pushed to a public repo and created a security issue.

How does Azure DevOps deal with private packages from the main NPM registry? Is that something it supports?

[bozdoz]

Double-checked my .npmrc files, and I still can't re-install the font awesome packages:

> npm ci     
npm WARN prepare removing existing node_modules/ before installation
npm ERR! code E401
npm ERR! Unable to authenticate, need: Basic realm="https://npm.fontawesome.com/"

[bhaskarreddy463]

@pardonmeme was finally able to get it to successfully install. Here are the differences from yours to mine so I have something configured different somewhere.

When creating my file I had to include both the full path and buildId of the file. I got these from looking at where my npm install was looking for the .npmrc on my other 500 failed attempts. :) While getting the BuildId from the predefined build variables. Anyway, you definitely saved me a few hairs. :)

Hi ,

I am also trying to build the sencha project in Azure DevOps Pipeline, configured the same as you suggested as you can see in the attached screenshot.

after that added the NPM task to install sencha.

after that added the command task runner to build the sencha project in pipeline using this command sencha app buil

when I run the pipeline I am getting the following log in the NPM install task runner.
npm info ok
npm info it worked if it ends with ok
npm verb cli [
npm verb cli 'C:\Program Files\nodejs\node.exe',
npm verb cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
npm verb cli 'config',
npm verb cli 'list',
npm verb cli '-l'
npm verb cli ]
npm info using [email protected]
npm info using [email protected]
npm verb exit [ 0, true ]
npm timing npm Completed in 47ms
npm info ok
user-agent = "npm/6.14.4 node/v12.17.0 win32 x64"

after that in command task runner giving the following error that sencha is not command.

'sencha' is not recognized as an internal or external command,
operable program or batch file.

[debug]Exit code: 9009

[debug]Leaving Invoke-VstsTool.

[error]Cmd.exe exited with code '9009'.

can you please help me out what I should do for the sencha commands in Azure DevOps Pipeline.

Thanks,
Bhaskar V

[acaravia]

@bhaskarreddy463 so in your package.json what are your scripts defined as? I have the following scripts defined:

"scripts": {
    "build": "npm run clean && cross-env webpack --env.environment='production' --env.treeshake='yes'",
    "clean": "rimraf build",
    "dev": "webpack-dev-server",
    "start": "npm run dev",
    "start-localapi": "npm run dev -- --env.useConfig='dev'"
  },

For my build task I use an NPM task and set it up as below and that's it.

Hope that helps

[bhaskarreddy463]

so in your package.json what are your scripts defined as? I have the following scripts defined:

Hi Acaravia,

When we create the sencha / ExtJS project it won't create the package.json file in sencha project.

currently I created my applicaiton using ExtJS(6.7.0.210) which supports for mobile apps(like Android, iOS and Windows) package.json file has not created by framework.

I observed in your package.json file inside the scripts there is no any sencha commands, how sencha applicaiton is building in Azure Pipeline.

can you please briefly explain step by step, how you achived your sencha app build in Azure DevOps build pipeline.

Thanks,
Bhaskar V

[tagliala]

Hi @bhaskarreddy463 , is this issue related to Font Awesome?

[bhaskarreddy463]

Hi @bhaskarreddy463 , is this issue related to Font Awesome?

No, It's related to sencha commands in Azure DevOps build Pipelines.

[acaravia]

@bhaskarreddy463 tagliala is correct this is no longer a Font Awesome issue. I'd suggest either posting the question on stackoverflow (SO) or an appropriate github repository. With that said, I'm building an ExtReact project not ExtJs using webpack so may be different setup. If you open a question on SO send the link and I can communicate further there as to not include unnecessary discussion here.

[tagliala]

If someone can point me to the comment/link that explains how to set up private npm repositories on azure devops, I will close this thread.