Build Bit components in your existing project

This blog will guide you through the following steps:

1. Create independent Node and React components in an existing project
   • See the project in its initial stage
   • See the Bit components in their scope
2. Use the new components in this project
   • See the project with Bit components

Our legacy app for this tutorial is a React + Express 'Hello-World' application. It displays a button that fetches the 'hello world' string from the server.

Clone the pre-bit project, to follow along:

$git clone https://github.com/bitdev-community/fullstack-legacy-with-bit.git

Copied

To run this project, run npm install && npm start in the root directory.

The project structure looks similar to this:

Initialize a Bit workspace in the root directory of the project:

$bit init --default-scope learnbit.bit-pioneers

Copied

learnbit.bit-pioneers is the default scope for components in this workspace. Replace this with your own scope name.

The output should look similar to this:

Bit has generated a workspace with the minimum necessary files, to prevent any possible conflicts with your current project. These files include the workspace.jsonc, for your workspace configuration, the .bitmap file which maps components to their directories in your workspace, and the .git/.bit hidden directory.

The Workspace UI is a visual representation of your workspace. It is not required for this tutorial, but it's a great way to get a better understanding of your workspace, and to visualize the components you maintain in it. (the components' instances for rendering are loaded from their *.compositions.* files, placed in their directory)

To run the Workspace UI, run the following command:

$bit start

Copied

Head over to your browser and navigate to http://localhost:3000. Note that the workspace is currently empty as there are not Bit components in it yet.

In futures steps, we'll add components to the workspace. These components will then appear in the Workspace UI. If that does not happen, try restarting the Workspace UI.

Create new components using component templates to get you started quickly with pre-made source files and configurations.

In this tutorial, we will create two components: a React 'loader' (spinner) component and a Node Express 'goodbye' route component. The components will be created using component templates. These templates generate a few source files and configurations. One important configuration is the env property which determines the component development environment to use. In this case, one component will be developed using the React env, and the other using the Node env.

We highly recommend creating your own React and Node envs. This will allow you to customize the development tools and configurations to your needs. See Set up your React env and Set up your Node env for more information.

To create a new React component, we'll use a template provided by the basic React env, and run the following command:

$bit create react ui/loader --aspect teambit.react/react-env

Copied

The output should look similar to this:

See the 'loader' component implementation in this workspace and scope.

To create a new Node component, we'll use a template provided by the basic Node env, and run the following command:

$bit create node routes/goodbye

Copied

The output should look similar to this:

See the 'loader' component implementation in this workspace and scope.

Components are consumed using the Node package generated for each of them. In development, the package is generated in the node_modules directory of the project, and can be imported like any other Node package. During the components' build a similar package is generated as part of the component's build artifacts, and is used to consume the component in other projects. More on that in the next sections.

The server for the workspace UI also compiles modified components. If you're not using it, make sure to run the compilation in watch mode, to make sure the component packages (containing the compiled code) are always up to date.

$bit watch

Copied

The output should look similar to this:

Import the components to the relevant files in the project:

React

Backend (NodeJS)

/* @filename: web/src/pages/landing-page/landing-page.tsx */

// ...

/* this is a bit component. it is consumed using its package */
import { Loader } from '@learnbit/bit-pioneers.ui.loader';

// ...

export const LandingPage = ({ className, ...rest }: LandingPageProps) => {
  const [helloWorldState, fetchHelloWorld] = useHelloWorld();

  if (helloWorldState.loading) {
    return <Loader />;
  }

  return (
    <div className={cx('container', className)} {...rest}>
      {helloWorldState.data ? (
        <Heading>{helloWorldState.data}</Heading>
      ) : (
        <Button onClick={fetchHelloWorld}>Load Data</Button>
      )}
    </div>
  );
};

Copied

Dependencies used by your components can be installed using your current package manager (npm, yarn, pnpm, etc.). These dependencies will be added to the project's package.json file.

The type of a dependency is determined by the components. For example, if a component uses @testing-library/react, in one of its dev files, this dependency will be listed as a devDependency, regardless of the dependency type in the project's package.json file.

In previous sections, we've seen how components are consumed in the project using their Node package (and never using relative paths to their source files).

To make sure your components are linked from the node_modules directory, and compiled, add the following to the "postinstall" script to your package.json file:

{
    "postinstall": "bit compile && bit link"
}

Copied

• Start from an existing project docs page.
• How to Integrate Bit into your Existing Project: The Basics blog. This will guide through the process of componentizing existing code in your project.
• Snap component changes and Export components docs pages. These will guide you through the process of sharing components with your team.
• Installing components docs page. This will guide you through the process of installing components from a remote scope (in non-Bit projects and Bit workspaces).