Using bit.dev to share functionality between projects. Part 2

So you already have properly configured bit workspace for your project. If not check out previous part of this series.

Bit platform tightly coupled to "workspaces" concept. In this way it's important to understand that there are two types of components:

• Authored components
• Imported components

What does it mean? Bit components are not created in isolation. Basic and the most important imho concept here is - bit components [bits] are pieces of functionality isolated and extracted out of some bigger project. In other words bit is some isolated part of some project. And main purpose here is to reuse this part of this project in some other project without binding them between each other.

So for example we have project-1 and project-2. We want to reuse some functionality of project-1 in project-2. For this we initialize bit workspace in project-1 and isolate needed functionality as bit. Then we tag it and export it to bit.dev cloud. I intentionally do not write all the steps explicitly because this process well documented in first section of official docs.

! Important thing here to mention - we have to configure bit npm registry to install bits via yarn or npm:

copied bash

npm config set @bit:registry https://node.bit.dev
# or it's event better to do bit login
# if bit workspace configured in the project
bit login

After we exported our bit we can use it in project-2. It could be installed in 2 ways - as regular npm package or imported as bit component.

copied bash

yarn add @bit/myusername.my-collection.my-module
# or
bit import myusername.my-collection/my-module

First option should be clear - we just directly use functionality of project-1 in project-2.

Second option is more interesting. To use it you have to initialize bit workspace in project-2 as well. In this case bit creates mentioned my-module in the root directory of project-2 and creates a symlink in node_modules for my-module to be available for import via it's npm package name path.

copied ts/tsx

import MyModule from '@bit/myusername.my-collection.my-module'

Now @bit/myusername.my-collection.my-module path points to some directory in the root folder of your project (rootDir/components/ by default).

Now back again to authored and imported components - in case of project-1 my-module is authored component, in case of project-2 - it is imported.

Why you need all this? It is needed to quickly change or debug something in imported module.

There is also an important thing to mention here. Recommended by bit team workflow is to use imported components to test some changes or debug something, but export them via applying in authored component's project. This is for consistency and when you have two or more development teams with their responsibilities. But there are also a very convenient option to export changes right from imported components. If we would do this we will have newer version in bit.dev cloud.

Let's integrated those changes back to authored component's project. Go to project-1. Type

copied bash

bit import

This will fetch all remote changes in components which are being used in project-1 but changes will be not applied. They will hang in bit cache.

copied bash

# for example local version is 1.0.1
# and 1.0.2 is remote one
bit diff my-module 1.0.2

After that we can take a look at difference between remote and local version and then checkout to latest version all our components in a row or one by one.

copied bash

# this is one shot to update all local components
# to their latest version
bit checkout latest --all

# this is to update only one component
# to some specific version
bit checkout 1.0.2 my-module

Sidenote - you can export bits to different collections from the same workspace. For this you have to just export bit to collection explicitly and then just use current keyword.

copied bash

bit export username.my-utils-collection some-cool-util
bit export username.my-components some-cool-component

# some improvements were made to one
# or both of metioned above bits

bit export current
# each bit exported to it's own collection