I’m currently building out a simple design system for a product which I have begun converting into basic React components. These components can be as simple as a button or as complicated as a global navigation header. In order to make these components easily available and organized, I have decided to use Bit. Bit promises to increase code reuse and reduce overhead by turning your components into isolated building blocks which can be discovered, shared, and used across your application. It works great for UI components but would also work with any reusable function or module. If you’re curious about how Bit works, I would suggest watching the learn more video on their frontpage.
So first I created a separate React project and begun building up my design system components and adding them to a Bit collection. I then imported the shared components into my product project. This worked great. However, I was annoyed that my first push to Heroku came back in error.
Request failed 401 Unauthorized
This makes sense. The components themselves are private modules so why would Heroku have permission to access them? We’ll need to give Heroku access to the Bit registry. There are a couple of articles scattered around the web which tackle the topic of private NPM modules including this excellent one from Oscar Godson. Bit also covers it in a non-Heroku specific way in a hard-to-find discourse thread. Here’s what worked for me.
If you’ve worked with Bit locally already, you have probably ran the registry login command. If not, please do that now.
$ npm login — registry=https://node.bit.dev — scope=@bit
This command creates a token for you at
~/.npmrc which gives local NPM access to your private components on Bit. Let’s recreate that
.npmrc file in your projects root folder but pass an environment variable instead of the token directly.
You can then pass your Bit token over to Heroku by configuring it as an environment variable.
heroku config:add BIT_NODE_TOKEN=abc123def456
.npmrc to your project and your next push to Heroku should be a successful one. Hopefully this saves you a bit of time. Good luck with your building blocks!