How to quickly set up a private Node.js package repository with Bit and NPM, and share your components. Setting up a package registry is often the first step towards scaling code-sharing and making life a little bit easier for your team. Node.js 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 registry can be massive. NPM 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 to host the modules we share and the native NPM/Yarn client to install them. Bit’s web platform First thing’s first, set up a registry. . Head over to Click on a bit.dev get started. . . It’s free. b Sign-Up . Create a collection: c 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. _Both public and private components and modules shared with Bit are now made instantly available to install with NPM and…_blog.bitsrc.io Introducing Bit’s NPM Package Registry 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. _Easily share code between projects with your team. - teambit/bit_github.com teambit/bit https://docs.bit.dev/ 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 without refactoring. publish packages right from any existing project #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 , and in the following project’s directory structure. button login logo $ 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 with a glob pattern, pointing Bit to the path in which the modules we want to publish are found. bit add $ 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 and 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 here. build test pre-made environments 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 . For assistance, visit or . Bit’s extension system Bit’s Gitter channel 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 to authenticate your machine to Bit’s platform. bit login $ 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 as a scoped registry to your NPM client. bit.dev 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. shared as a package. Let’s use the following command to install it (user = bit, collection = movie-app, name space = components, package name = hero): Here’s a React Hero component 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 : You can also use JFrog’s Artifactory as your Bit registry. to see how it’s done. JFrog Artifactory Learn more on JFrog’s blog Distributed Development Workflow Another advantage of installing packages via Bit’s registry is that you can to a version of the actual source code of the packages right from any project you’re working on. use Bit to import and make changes 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 and a (Git extension). smart updates cross-repo merge utility 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, and them back to the collection (creating a new version) or to a new collection to share. tag export 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 , set up your own registry and share some code. You can check out the or chat with the team on . Thanks! get started project on GitHub Gitter _Easily share reusable components between projects and applications to build faster as a team. Collaborate to develop…_bit.dev Share reusable code components as a team · Bit

Instantly

I write code and words. Learn about Bit: github.com/teambit/bit

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Private NPM Registry in 30 Seconds with Bit

Too Long; Didn't Read

Companies Mentioned

Jonathan Saring

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Private NPM Registry in 30 Seconds with Bit

Too Long; Didn't Read

Companies Mentioned

Jonathan Saring

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES