Sharing components across multiple projects or with other developers seems to be the most complicated thing, yet it really shouldn’t be. With package registries such as npm or GitHub packages surely we should easily be able to share our components by publishing them as packages.

If you have ever published a package to the npm registry then you will know that you need to create a package.json file in order to publish it.

Packages published to the registry must contain a package.json file which lists the packages your project depends on, specifies the versions of a package that your project can use, using semantic versioning rules, and makes your build reproducible so you can easily share it with other developers or across multiple projects.

This doesn’t sound like too much work and by following the steps on the npm docs we can have the component published to npm and available for anyone to download. This means if you have created a utility function, a serverless function, a React hook, a UI component, a CSS stylesheet or CSS animations that you want to share with someone else or with another project then this is the way to do it.

But what happens if you want to share 50 components or 100 components or even a thousand components. There is absolutely no way you could manage the package.json files for each of those components.

It’s probably just quicker to copy and paste the component files to reuse them in your other application. But now you are maintaining two of the same components and this is not ideal at all, especially when working in large enterprises or across multiple teams. You start to loose consistency across applications.

What if I told you there was a way to publish multiple components without having to manage a package.json for each one. Sounds too good to be true, right!

The solution is Bit.

Bit will auto generate a package.json file for each of your components meaning you don't have to create or maintain multiple package.jsons. By using Bit we can publish multiple components at once with a single command. The bit tag --all command will build all components in your workspace that are new or have been modified.

Bit builds each component in a dedicated, temporary, directory to validate all dependencies are properly defined and that the component can truly be reused in any project before it creates a new version of the component.

You can choose which version your components should have by specifying the version or choosing from the --patch, --minor or --major flag. If you don't add a version then a patch version will be created.

As part of the build pipeline Bit will run all component’s tests to make sure the tests pass. If tests fail then your component will not be published. You can pass in a flag to skip tests but that just defeats the purpose of writing tests so it is not really recommended.

Once tests pass a fully isolated version of each of your components is created, complete with their own dist folders, package.json and node_modules folder which includes all dependencies your component depends on, either libraries or other components. That means you do not have to manage dependencies per component. Bit does it automatically for you by finding all import statements in the components and generating a list of dependencies and devDependencies(static code analysis).

When you run bit tag bit creates a separate, isolated, workspace for each component called a capsule. This is what makes your component fully isolated and independent and it is from here that publishing happens.

Your new or modified components then get published to the package registry of your choice. One command and hundreds of components are added to the package registry.

When you update a component and run bit tag --all, Bit automatically checks to see if other components need to be updated, for example components that use the updated component, and will build, version and publish all the affected components.

At all times you have complete control over this process and should you wish to only publish a single component you can do so by adding the component’s id at the end of the command instead of the --all flag.

As each component has its own build-pipeline, a single workspace can easily include many types of components. And as there is no rigid directory structure, you can have deeply nested components and you can move components around in the workspace without any refactoring to components or config.

This process of publishing components is so user friendly and takes away the pain of managing multiple package.json files per component.

Because you have less maintenance you can publish smaller components and really make everything much more modular. Bit helps you manage and scale to 100s of components in a single repo.

So what’s the catch?

There is none. Bit is Open Source and therefore free to use.

Installing Bit

To use Bit you must install it using BVM, Bit’s version manager.

npm i -g @teambit/bvm   # install bvm
bvm install   # use bvm to install bit

Creating a Workspace

Then create a workspace to house your components. You can create a workspace in a new directory or inside an already existing project.

bit new react-workspace my-workspace

Creating a Component

All components must be in their own folder and contain an index.js file that exports the component. You can create your components using bit create or add your pre-existing components using bit add .

bit create react ui/my-component

This command will create a basic <div> with some text which you can modify to how you want. All Bit components must be created in a folder with an index file that exports the component. This command will create these files as well as the documentation file, test file and composition file for the component.

Start the Dev Server

To see your components in the UI running on localhost:3000 run the bit start command.

bit start

The UI has many features which allows you to read component documentation, see component compositions, check if your tests have passed, visualise the components dependency graph, inspect the code of the component as well as view the changelog and configuration for the component.

Configuring the Workspace

Bit will create and manage a package.json file for each of your components. The package.json file can be found in your component's folder inside your node_modules directory (node_modules/@scope/component-name/package.json). As this file is an auto-generated file created and managed by Bit you cannot edit this file directly. Instead, Bit provides us with the Pkg extension (known as an aspect) which handles the configuration, publishing, and packaging of our components.

The teambit.pkg/pkg aspect is added to the variants section in your workspace.jsonc file and can be applied to all components by using the "{*}" wildcard or to a specific set of components. This gives us better control over publishing our components as we can decide which ones we want to publish and to which remote scopes. For example, a group of base-ui components might be published to a scope on npm called base-ui and the group of components for utility functions might be published to a scope called utilities.

"teambit.workspace/variants": {
  "{ui/**}": {
      "teambit.pkg/pkg": {
	// configuration goes here
      }
    }
}

Make your Packages Public

To make the package a public package on npm add ["--access public"] to the value for packageManagerPublishArgs.

"teambit.workspace/variants": {
  "{ui/**}": {
      "teambit.pkg/pkg": {
        "packageManagerPublishArgs": [
          "--access public"
        ],
      }
    }
}

Override the Package.json

We can override the properties of the package.json for all our components at once. To do this we add the "packageJson" key and inside our object we add any of the properties we want to override. For the name property, we add the dynamic value "@scope/component-name". This will take the scope value from the defaultScope property in the workspace.jsonc file and append it to the name of your component. You can add other key-value pairs to the package.json file. For example, you can add a "license" property to specify the license of your package.

"teambit.workspace/variants": {
  "{ui/**}": {
      "teambit.pkg/pkg": {
        "packageManagerPublishArgs": [
          "--access public"
        ],
        "packageJson": {
          "name": "@{scope}/{name}",
          "private": false
          // add more configuration here
        }
      }
    }
}

Create an Ogranization in npm

In order to publish our components to the npm registry we first must login to npm.

npm login

Add a new organization/scope in npm and give your scope a name.

Add the npm organization name to your Workspace.json

In order for Bit to know where to publish the components, we need to add the name of the organization/scope created in npm to the publishConfig property under the "packageJson" key. Then add the registry url to the registry property which in this case is the URL to the npm registry.

"teambit.workspace/variants": {
  "{ui/**}": {
      "teambit.pkg/pkg": {
        "packageManagerPublishArgs": [
          "--access public"
        ],
        "packageJson": {
          "name": "@{scope}/{name}",
          "private": false,
          "publishConfig": {
            "scope": "@my-org", // org created in npm
            "registry": "https://registry.npmjs.org/" 
            // or any registry url
          }
        }
      }
    }
}

Publish your Components

In order to publish components they must be tagged by using the bit tag command. Bit will run all tests and build the components that are new or have been modified or that are affected by this component and will generate a package.json file for each component.

bit tag --all

Use your Components from npm

Your components are now visible on npm and can be installed to any project or application using npm install.

npm install @my-org-on-npm/component-name

You can add a README.md file to your component’s directories to provide more information about your component so they can be understood better on npm.

Conclusion

And that’s how you publish multiple components to npm, 100% for free. No account or login to Bit required. Your code is 100% yours. No lock in. You can publish to npm or to the package registry of your choice. Welcome to Open Source. Welcome to Bit.