Publishing existing apps as Bit components

You want to gradually adopt Harmony to your project but would like to compose and reuse as much of your current implementation as possible? Easy.

All you need to do is make any app that contains features you wish to reuse is transforming it to something that can be a dependency for any new project. The quickest way to do that is by wrapping the entire app with a Bit Component that exposes features. This makes anything be able to compose that functionality.
While we are focused on using Bit and Bit components for this flow, you can also do the same with NPM and a package registry.

In this post, I will use a simple Create React App as an example, but you can do this with any kind of app or even a microservice.

Sing up for Bit Cloud, and create a new Scope. This Scope will be a place where you keep all the Bit Components that wrap any of your existing apps.

After you sign up, create an organization, then head to the Create Scope, and name the new Scope "existing-apps".

Install Bit on your machine:

npx @teambit/bvm install

Copied

Authenticate your client with your Bit Cloud account

bit login

Copied

Head to the root directory of your project, and initialize a Bit Workspace

bit init

Copied

Open the workspace.jsonc file and find the defaultScope configuration. Set it to the Scope you created in the previous step (remember to replace acme with the organization name):

"defaultScope": "acme.existing-apps",

Copied

Normally apps will have an entry point named ./src/app.js. When making the app as a dependency for others, we want to create an additional entry point for this use case.

Create a new file for exposing internal features.

touch src/expose-features.js

Copied

We recommend using ./src/index.js, but as Create React App already defines one, we create one with a custom name.

Open the file, and here you expose any feature you want from the app's internals, making it available for others. For example:

import Feature from './components/feature';

export { Feature }

Copied

This pattern making it easy for others to know which features are available to use. If we don't do it, consumers are forced to import internal files, which impacts developer experience and documentation.

Make Bit start managing it as a Bit Component using the bit add command. We also use the following options:

• --main - Target the entry point file.
• --id - Name of the app.
• --env - Set up the Bit Env responsible for packaging the app to a Bit Component.

bit add ./src --main expose-features.js --id my-app --env bitdev.platforms/envs/existing-app-env

Copied

Run bit status to get a feedback from Bit, ensuring app is tracked correctly and all import statements are resolving correctly.

Release the app as a component on Bit Cloud, making it's features available as a dependency for others.

bit tag --message "initial release of the app as a bit component"
bit export

Copied

All components on Bit Cloud are available as packages to install.Use Bit or any other package manager to install it:

bit install @acme/existing-apps.my-app

Copied

To use features from the app, import them:

import { Feature } from '@acme/existing-apps.my-app'

Copied

As time goes by, you may want to expose more features. To do so, simply export them via the dedicated file and release new versions of the Bit component.

You can automate this flow using the following CI scripts, depending on your CI tool of choice (GitHub Actions, Azure Devops, GitLab CI, Jenkins, Other)

If you have more apps or services in different repositories, you can follow the same steps shown here and export them to the same scope.