How to replace Environment Variables in a .npmrc File

Managing npm registry configurations and authentication tokens can be a tricky task, especially when working collaboratively on multiple projects and environments. To simplify this process, I've created a package called npmrc-replace-env.

Why?

So, picture this – we're deep into a project, and suddenly, we need this secret _authToken in our .npmrc file to access some essential packages (e.g. @fortawesome pro version 😉). Cool, but how do we share this without risking our repo's security or making everyone's life complicated?

That's the snag I hit, and it got me thinking. I needed a way to smoothly pass around this _authToken, making sure everyone gets what they need without committing it to our codebase.

The goal? To make life easier for all of us – no headaches, no communication chaos, and definitely no disruptions to our coding vibe. I wanted something straightforward that could handle this kind of situation in other projects too.

And voila, npmrc-replace-env was born!

npmrc-replace-env is a utility designed to dynamically generate .npmrc files based on configuration and environment variables.

By having a committed .npmrc.config file as a template, you're basically giving your team a shortcut. They only need to worry about updating their .env file with their environment variables, and bam, they're good to go. No more wrestling with the entire .npmrc file, no more back-and-forth to keep everyone on the same page 🎉.

How It Works

This package follows a simple yet powerful approach. The magic begins with the .npmrc.config file in your project's root. This file outlines the configuration for your .npmrc file, with placeholders serving as markers for environment variables to be injected.

Example .npmrc.config:

# .npmrc.config

# Custom registry for @myorg packages
@myorg:registry=https://somewhere-else.com/myorg
//somewhere-else.com/myorg/:_authToken=NPMRC_MYTOKEN1

# Custom registry for @another packages
@another:registry=https://somewhere-else.com/another
//somewhere-else.com/another/:_authToken=NPMRC_MYTOKEN2

# Custom registry for @fortawesome packages
@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=NPMRC_FA_AUTH_TOKEN

In this example, the .npmrc.config file defines custom registries. The authentication tokens are provided as environment variables (NPMRC_MYTOKEN1, NPMRC_MYTOKEN2, and NPMRC_FA_AUTH_TOKEN), which will be replaced during the generation process.

It's important to add .npmrc to your .gitignore file to prevent accidentally committing sensitive information, such as authentication tokens.

Next, define your environment variables in the .env file, each prefixed with NPMRC_. Each placeholder in the .npmrc.config file corresponds to an environment variable defined here.

Example .env file:

NPMRC_MYTOKEN1=your_myorg_token_value
NPMRC_MYTOKEN2=your_another_token_value
NPMRC_FA_AUTH_TOKEN=your_fontawesome_token_value

With everything set up, execute the following command:

npx npmrc-replace-env

Keep in mind: This will override any existing .npmrc files.

Explore npmrc-replace-env

If npmrc-replace-env has made your development life easier, consider showing some love on GitHub ⭐️.

Discover more about npmrc-replace-env by checking out the npm package. Dive into the GitHub repository for detailed documentation, updates, and opportunities to contribute.

Happy coding! 👨‍💻

Comments

[Noel Blaschke]

Great tooling!

Does it also work with different yarn versions?

[Dennis Zimmermann]

Good point!

I have read that yarn in the latest versions (>= 2) doesn't use the configuration from .npmrc files anymore... They instead read all of the configuration from the .yarnrc.yml files. (v3.yarnpkg.com/getting-started/mig...)

Maybe the package can be adapted in the future so that it also works with the newer versions of yarn, etc..

I have tested a little further:

• it works with pnpm (8.15.3)
• it does not work with bun (registries can be configured via bunfig.toml)