How to quickly set up a private Node.js package repository with Bit and NPM, and share your components.
Setting up a Node.js package registry is often the first step towards scaling code-sharing and making life a little bit easier for your team.
Sharing more modules means duplicating less code. It also helps in building more modular and maintainable software. However, the overhead around setting up and maintaining a private NPM registry can be massive.
Using Bit, you can remove most of the overhead around a private registry while reducing the overhead around the packaging and publishing process.
In this short tutorial, I’ll show you how, using Bit, you can set up a private Node.js registry and publish dozens of components and modules in a just few minutes, in 3 steps.
- Set up a Node.js package registry in 30 seconds
- Publish modules/components
- Install packages with the NPM/Yarn client
Let’s get started.
- You can also check out this short video tutorial.
1. Setup a Node.js package registry for your components
Let’s set a private package registry for your team.
We’ll use Bit’s web platform to host the modules we share and the native NPM/Yarn client to install them.
First thing’s first, set up a registry.
a. Head over to bit.dev Click on get started.
b. Sign-Up. It’s free.
c. Create a collection:
To set a private collection, just select “private”. That’s it!
You now have a collection in Bit’s web platform, which also functions as a package registry. Let’s see how to publish packages to this registry.
Introducing Bit’s NPM Package Registry_Both public and private components and modules shared with Bit are now made instantly available to install with NPM and…_blog.bitsrc.io
2. Publish components or modules
Now let’s publish modules and components to our newly created registry. Since we set up the registry on Bit’s platform, we can leverage Bit for this workflow as well, to save precious time and effort.
teambit/bit_Easily share code between projects with your team. - teambit/bit_github.com
First, install Bit. Then, head over to the project in which you have the packages you want to publish. Note that since we are using Bit, you can publish packages right from any existing project without refactoring.
#1 Install Bitnpm install bit-bin -g
#2 Create a local workspace for your project$ cd project-directory$ bit init
Instead of having to create a new repository, configure the package etc, let’s use Bit to isolate components and modules from existing projects and publish them as packages.
Let’s point Bit to the right packages in the project using the bit add command.
Example
Let’s track the components button, login and logo in the following project’s directory structure.
$ tree.├── App.js├── App.test.js├── favicon.ico├── index.js└── src └── components ├── button │ ├── Button.js │ ├── Button.spec.js │ └── index.js ├── login │ ├── Login.js │ ├── Login.spec.js │ └── index.js └── logo ├── Logo.js ├── Logo.spec.js └── index.js
5 directories, 13 files
To track these files as components we can use bit add with a glob pattern, pointing Bit to the path in which the modules we want to publish are found.
$ bit add src/components/*tracking 3 new components
Note that Bit will automatically run through the module’s file & package dependancies, and create and isolate environment for the code which contains everything it needs in order to run in other projects.
Now, let’s add build and test environments so that Bit can build and test your packages (on the cloud) and present the results for every package. You can find a list of pre-made environments here.
Here’s a recommended example for React components.
$ bit import bit.envs/compilers/babel --compiler
$ bit import bit.envs/testers/mocha --tester
You can also implement your own environments using Bit’s extension system. For assistance, visit Bit’s Gitter channel or Discourse board.
Now, let’s tag a version for the packages we are about to publish (following the previous example).
$ bit tag --all 1.0.03 components tagged | 3 added, 0 changed, 0 auto-taggedadded components: components/button@1.0.0, components/login@1.0.0, components/logo@1.0.0
Next, use bit login to authenticate your machine to Bit’s platform.
$ bit loginYour browser has been opened to visit: http://bit.dev/bit-login?redirect_uri=http://localhost:8085...
Finally, export (publish) the packages.
$ bit export user-name.collection-nameexported 3 components to scope user-name.collection-name
That’s it!
All your packages will now be available in your collection, ready to install using NPM/Yarn in any project. Piece of cake, and we can use this workflow to quickly publish large numbers of packages in very little time.
3. Install packages using the NPM/Yarn client
Now that our packages are ready, let’s learn how to install them.
First, configure bit.dev as a scoped registry to your NPM client.
npm config set '@bit:registry' https://node.bit.dev
That’s it :)
Any package can now be installed using your native NPM/Yarn client.
Head over to the component/module page (Example).
Check out the pane on the top-right side. Choose the “NPM” tab and copy the command:
npm i @bit/user-name.collection-name.namespace.packagename
Let’s see an example.
Here’s a React Hero component shared as a package. Let’s use the following command to install it (user = bit, collection = movie-app, name space = components, package name = hero):
npm i @bit/bit.movie-app.components.hero
That’s it. You can now freely share and install these packages just as if you published them to any other NPM registry. The best
- JFrog Artifactory: You can also use JFrog’s Artifactory as your Bit registry. Learn more on JFrog’s blog to see how it’s done.
Distributed Development Workflow
Another advantage of installing packages via Bit’s registry is that you can use Bit to import and make changes to a version of the actual source code of the packages right from any project you’re working on.
Unlike other registries, which require a cumbersome process for cloning and publishing changes to a package, Bit lets different team members import and modify packages from different projects.
It also helps sync changes between them using smart updates and a cross-repo merge utility (Git extension).
For example, let’s look at this repo structure.
$ tree ..├── bit.json├── package.json└── src ├── hello-world │ ├── hello-world.js │ └── index.js └── utils ├── noop.js └── left-pad.js
We’ll use Bit to import the left-pad component into your local project.
$ bit init$ bit import bit.utils/string/left-pad --path src/left-pad
We can now make the required changes, tag and export them back to the collection (creating a new version) or to a new collection to share.
Conclusion
In this short tutorial we learned how to:
- Set up an NPM registry in 30 seconds
- Publish packages without refactoring or boilerplating
- Install them with the NPM/Yarn client
- Make changes anywhere and collaborate
Sharing more code in a managed way, while reducing the overhead and time involved in this process, means your team can speed development and simplify the maintenance of your codebase.
Feel free to get started, set up your own registry and share some code. You can check out the project on GitHub or chat with the team on Gitter. Thanks!
Share reusable code components as a team · Bit_Easily share reusable components between projects and applications to build faster as a team. Collaborate to develop…_bit.dev