How to self host components and publish to npm

[debs-obrien]

Hosting components is easily done with Bit.dev however you can also self host your components and publish them to a public registry such as npm. How can this be done?

[debs-obrien]

Self-Hosted a Scope

The easiest way to export your components is to host them on the Bit Cloud. However if you prefer to host them yourself you can do so by creating your own server.

Creating your own Server

To create your own remote server you can run the bit init --bare command. This will create a bare version of Bit.dev that you can use to host your own components.

mkdir my-server
cd my-server
bit init --bare

Start your Server

To start your server you can run the bit start command.

bit start

This will open up the server on the available port eg. http://localhost:3001. You will notice that it is an empty remote scope as no components have been exported yet.

Update your Default Scope

In the workspace.jsonc file in the project where your components are, change the default scope to be the name of your server.

{
  "defaultScope": "my-server"
}

If you have already created some components you will need to modify the import statements in your components to point to the new default Scope. Once you do that run bit link to update the links and bit compile to compile your components.

Add your Remote Scope

In the workspace where you want to export your components run the bit remote add command followed by the url of where your remote scope is.

bit remote add http://localhost:3001 # url of the scope

Publish your Components to NPM

Although we recommend using Bit Cloud to host your components you can publish your components to the npm registry if you prefer. 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 aspect which handles the configuration, publishing and packaging of your components.

The teambit.pkg/pkg is added to the variants section in your workspace.jsonc file. We can apply this 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.

"teambit.workspace/variants": {
  "{ui/**}": {
      "teambit.react/react": {},
      "teambit.pkg/pkg": {}
    }
}

Make your Components Public

If you want to make your package a public package on npm add ["--access public"] to the value for packageManagerPublishArgs.

"teambit.workspace/variants": {
  "{ui/**}": {
      "teambit.react/react": {},
      "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}/{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.

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

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.

Setting the Scope and registry

In order to publish our components to the npm registry we first must login to npm and add a new organization/scope in npm. We can then add the name of this organization/scope to the publishConfig property under our "packageJson"" key. We then need to add the registry url to the registry property which in this case is the url to the npm registry.

"teambit.workspace/variants": {
  "{ui/**}": {
      "teambit.react/react": {},
      "teambit.pkg/pkg": {
        "packageManagerPublishArgs": [
          "--access public"
        ],
        "packageJson": {
          "name": "@{scope}/{name}",
          "private": false,
          "publishConfig": {
            "scope": "@test-remote",
            "registry": "https://registry.npmjs.org/"
          }
        }
      }
    }
}

Here we are publishing to npmjs.org, but it's also possible to publish to Artifactory, Nexus or Verddacio.

Logging in to npm

In the terminal login to npm so that you can use Bit to publish your components to npm.

npm login

Tagging your Components

In order to publish components they must be tagged by using the bit tag command. Bit will run all tests and build a new version of each component as well as generate a package.json file for each one. It is during this process that your components get published to npm.

bit tag --all

Exporting your Components

After tagging is complete components can be exported to your remote scope on your self hosted server using the bit export command.

bit export

Use your Components

Your components are now visible on npm as well as on your remote scope and can now be installed to any project or application using the package manager of your choice.

npm install @scope/component-name
yarn add @scope/component-name

You can add a README.md file to your component's directories to provide more information about your component.

[The-Poe]

Is it still possible to collaborate the private npm components in the projects that consume these componets?

[sbland]

You can still collaborate using the usual bit methods. They will still be on bit cloud etc.

[EL-MEHDI-ESSAADI]

Self-Hosted a Scope

The easiest way to export your components is to host them on the Bit Cloud. However if you prefer to host them yourself you can do so by creating your own server.

Creating your own Server

To create your own remote server you can run the bit init --bare command. This will create a bare version of Bit.dev that you can use to host your own components.

mkdir my-server
cd my-server
bit init --bare

Start your Server

To start your server you can run the bit start command.

bit start

This will open up the server on the available port eg. http://localhost:3001. You will notice that it is an empty remote scope as no components have been exported yet.

Update your Default Scope

In the workspace.jsonc file in the project where your components are, change the default scope to be the name of your server.

{
  "defaultScope": "my-server"
}

If you have already created some components you will need to modify the import statements in your components to point to the new default Scope. Once you do that run bit link to update the links and bit compile to compile your components.

Add your Remote Scope

In the workspace where you want to export your components run the bit remote add command followed by the url of where your remote scope is.

bit remote add http://localhost:3001 # url of the scope

Publish your Components to NPM

Although we recommend using Bit Cloud to host your components you can publish your components to the npm registry if you prefer. 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 aspect which handles the configuration, publishing and packaging of your components.

The teambit.pkg/pkg is added to the variants section in your workspace.jsonc file. We can apply this 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.

"teambit.workspace/variants": {
  "{ui/**}": {
      "teambit.react/react": {},
      "teambit.pkg/pkg": {}
    }
}

Make your Components Public

If you want to make your package a public package on npm add ["--access public"] to the value for packageManagerPublishArgs.

"teambit.workspace/variants": {
  "{ui/**}": {
      "teambit.react/react": {},
      "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}/{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.

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

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.

Setting the Scope and registry

In order to publish our components to the npm registry we first must login to npm and add a new organization/scope in npm. We can then add the name of this organization/scope to the publishConfig property under our "packageJson"" key. We then need to add the registry url to the registry property which in this case is the url to the npm registry.

"teambit.workspace/variants": {
  "{ui/**}": {
      "teambit.react/react": {},
      "teambit.pkg/pkg": {
        "packageManagerPublishArgs": [
          "--access public"
        ],
        "packageJson": {
          "name": "@{scope}/{name}",
          "private": false,
          "publishConfig": {
            "scope": "@test-remote",
            "registry": "https://registry.npmjs.org/"
          }
        }
      }
    }
}

Here we are publishing to npmjs.org, but it's also possible to publish to Artifactory, Nexus or Verddacio.

Logging in to npm

In the terminal login to npm so that you can use Bit to publish your components to npm.

npm login

Tagging your Components

In order to publish components they must be tagged by using the bit tag command. Bit will run all tests and build a new version of each component as well as generate a package.json file for each one. It is during this process that your components get published to npm.

bit tag --all

Exporting your Components

After tagging is complete components can be exported to your remote scope on your self hosted server using the bit export command.

bit export

Use your Components

Your components are now visible on npm as well as on your remote scope and can now be installed to any project or application using the package manager of your choice.

npm install @scope/component-name
yarn add @scope/component-name

You can add a README.md file to your component's directories to provide more information about your component.

Just a note, if the name of npm org different than the bit scope name, make sure to replace the "{scope}" with your org name in the packageJson.name like the following:

        "packageJson": {
          "name": "@my-npm-org-name/{name}",
          

[debs-obrien]

If you want to host your remote scope using docker you can find info on how to do that here:
https://github.com/teambit/bit/tree/master/scripts/docker-teambit-bit

[pgangwani]

Can we change public registry to private registry with NPM token to publish ?

[debs-obrien]

@pgangwani I think so. I didn't try it cause of npm's limit to private unless you pay so I just made them public. Let me know if you run into any issues

[pgangwani]

@debs-obrien How to restriction authentication of self hosted bit server using BIT_TOKEN to avoid local exporting from dev machine ( by command)
CC: @GiladShoham

[itaymendel]

the core OSS feature set does not have permissions built in. you can run this server behind an nginx or something to validate permissions.

[jonparkdev]

@itaymendel @GiladShoham Could you elaborate more about setting up permissions so that users can't just visit the url of the scope or bit export on a local machine? As much as bit.cloud is convenient, I would need to run this on-prem at my company.

[itaymendel]

permissions is not a part of the OSS tool. what you can do is setup nginx right before the scope, and have that validate permissions.

[jigneshchudasama]

I am getting below error on running the bit export command & I am using self-hosted approach.

"jc-test" is invalid, component scope names can only contain alphanumeric, lowercase characters, and the following ["-", "_", "$", "!"]

I tried running bit init --reset-new as well.

[sbland]

Changing the name in the below:

"packageJson": {
    "name": "@{scope}/{name}",
    "private": false
}

Causes the following error when running bit export:

missing packages or links from node_modules to the source (run "bit install" to fix both issues. if it's an external package, make sure it's added as a package dependency): 

[rpetersChrysalis]

I have tried to follow the above instructions, but when I try to run bit start, I get this error:
Cannot find module '@pmmmwh/react-refresh-webpack-plugin'
Require stack:

• C:\Users\Ruben Peters\AppData\Roaming\npm\node_modules\bit-bin\dist\extensions\ui\webpack\webpack.config.js
• C:\Users\Ruben Peters\AppData\Roaming\npm\node_modules\bit-bin\dist\extensions\ui\ui.extension.js
• C:\Users\Ruben Peters\AppData\Roaming\npm\node_modules\bit-bin\dist\extensions\ui\index.js
• C:\Users\Ruben Peters\AppData\Roaming\npm\node_modules\bit-bin\dist\extensions\bit\manifests.js
• C:\Users\Ruben Peters\AppData\Roaming\npm\node_modules\bit-bin\dist\extensions\bit\bit.manifest.js
• C:\Users\Ruben Peters\AppData\Roaming\npm\node_modules\bit-bin\dist\extensions\bit\index.js
• C:\Users\Ruben Peters\AppData\Roaming\npm\node_modules\bit-bin\dist\app.js
• C:\Users\Ruben Peters\AppData\Roaming\npm\node_modules\bit-bin\bin\bit.js

I have tried to install the package '@pmmmwh/react-refresh-webpack-plugin' and I still get the same error. Any ideas??

[zilinglong]

I have deployed the server according to the above method，and self host components and publish to private npm。However, every body uses "bit tag" tag the components, needs to login npm，it is very complex。I want to apply to a common accout to for team member to use "bit tag"，how I should do ? thanks~~

[zilinglong]

@debs-obrien

[itaymendel]

you don't need to bit login for tag... can you share the error you get?

[sbland]

Recently my bit tag no longer runs the publish step and I have to run bit publish manually. I'm also getting an issue with installing the exported package in another project causing webpack errors.

[Akiagari-ua]

I am facing the same issue. When I execute bit tag <package-name>, the version is increased, but the package is not published. I can only publish the package by using bit publish <package-name>.

[andreeatirgovatu]

Hi team. Is there a way I can publish the bit components in gitlab package registry as private packages? if yes, how?
I will really appreciate your help because I am stucked at this phase from 2 days.
Thank you.

[AlexThurston]

Did you ever figure out how this is done?