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. 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 NPM 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 Set up a Node.js package registry in 30 seconds Set up a Node.js package registry in 30 seconds Publish modules/components Publish modules/components Install packages with the NPM/Yarn client Install packages with the NPM/Yarn client Let’s get started. You can also check out this short video tutorial. 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. Bit’s web platform First thing’s first, set up a registry. a. Head over to bit.dev Click on get started. a bit.dev bit.dev get started. b. Sign-Up. It’s free. b Sign-Up c. 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. 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 Introducing Bit’s NPM Package 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 teambit/bit teambit/bit _Easily share code between projects with your team. - teambit/bit_github.com https://docs.bit.dev/ 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 publish packages right from any existing project 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 #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. bit add command Example Let’s track the components button, login and logo 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 $ 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 $ bit add src/components/*tracking 3 new components $ 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. 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 $ 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. 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 $ 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 login $ bit loginYour browser has been opened to visit: http://bit.dev/bit-login?redirect_uri=http://localhost:8085... $ 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 $ 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. bit.dev npm config set '@bit:registry' https://node.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). 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): 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 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. 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. JFrog Artifactory Learn more on JFrog’s blog 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. 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 smart updates and a cross-repo merge utility (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 $ 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 $ 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. 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 Set up an NPM registry in 30 seconds Set up an NPM registry in 30 seconds Publish packages without refactoring or boilerplating Publish packages without refactoring or boilerplating Install them with the NPM/Yarn client Install them with the NPM/Yarn client Make changes anywhere and collaborate 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! get started project on GitHub Gitter 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 Share reusable code components as a team · Bit 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

Instantly

4 Ways to Go Monorepo in 2019

Reusing React UI Components

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

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Private NPM Registry in 30 Seconds with Bit

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

How to Manage Reusable UI Components

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

How to Manage Reusable UI Components

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps