Build consistent UIs across Frontend apps using React and Bit.dev

In this guide, we will build a library of UI components with bit.dev that we can import and use in all our frontend applications.

• Frameworks: React, Typescript
• Tools Used: bit.dev
• Time saved: 1 week -> 1 hour
• Source Code

Introduction

As you build out your products, you want to be consistent so users recognize your brand - same colors, fonts, interactions across all platforms and all applications. This becomes difficult to implement when you have to create the same UI components across all your codebases - maintaining them, updating them becomes a hassle.

Bit.dev lets you build a library of UI components with React that can be imported into your frontend React applications using NPM.

In this guide, you will:

1. Create a Button component in React with unit test
2. Build a design library in bit.dev and upload it to remote bit.dev server
3. Import the components in a frontend React project
4. Make changes to the underlying components and watch them apply automatically to the frontend

Step 1: Installing Bit.dev

1. Let's start by installing BVM - Version manager for Bit.

npm i -g @teambit/bvm

2. Depending on the machine you're using, you have to make bvm available in your terminal. Run the appropriate command:

setx path "%path%;%LocalAppData%\.bvm" #windows

echo 'export PATH=$HOME/bin:$PATH' >> ~/.bashrc && source ~/.bashrc #bash

echo 'export PATH=$HOME/bin:$PATH' >> ~/.zshrc && source ~/.zshrc #zsh

3. Restart your terminal and run:

bvm install

Step 2: Creating UI Components Library with Bit.dev

1. Create a new folder called ui-components .
2. Initialize bit by jumping into the folder and running:

bit init --harmony

This will create all the necessary configurations necessary to run a bit server

• .bit: Folder that keeps component versioning data
• .bitmap: Autogenerated file that keeps track of available components
• workspace.jsonc: Configuration for your bit project. Similar to a package.json  

3. Let's add React to our project by editing workspace.jsonc like so:

{
  "$schema": "https://static.bit.dev/teambit/schemas/schema.json",
  "teambit.workspace/workspace": {
    "name": "my-bit-demo",
    "icon": "https://static.bit.dev/bit-logo.svg",
    "defaultDirectory": "{scope}/{name}",
    "defaultScope": "my-bit"
  },
  "teambit.dependencies/dependency-resolver": {
    "packageManager": "teambit.dependencies/pnpm",
    "policy": {
      "dependencies": {},
      "peerDependencies": {
        "react": "17.0.2",
        "react-dom": "17.0.2",
        "@testing-library/react": "12.0.0"
      }
    }
  },
  "teambit.workspace/variants": {
    "*": {
      "teambit.react/react": {}
    }
  }
}

4. Just like a package.json , you can install the listed packages by running:

bit install

Sweet! Your bit project is ready to go. We don't have any components to take a look at yet but that's what we will do next.

Step 3: Creating Components

Let's create your first component - a fancy looking Button

Bit makes it easy to scaffold a new component with fully auto-generated:

• Unit tests
• Documentation
• Use case variations

1. Let's create a new Button by running:

bit create react-component ui/button

This will generate the related files under the ui/button directory.

You can browse the component library with our brand new Button by running:

bit start

Fixing broken unit tests

There's a small issue with the auto-generated test where it will fail because it's not set up correctly. Update the button.composition.tsx with:

export const BasicButton = () => {
  return <Button>hello from Button</Button>;
};

and run bit test to confirm that all tests pass.

Step 4: Export Components to Remote server

Our component library currently is running locally. You can export them and host them on bit.dev remote server to be used in other frontend projects.

1. Create a new bit.dev account here
2. Create a new Scope. Think of Scope like a project folder. You would create a separate Scope for each project you work on. I named mine - saasbase-demo . Make sure Harmony is selected.

3. Update your workspace.jsonc to include your bit.dev username and scope as the default scope like so:

{
	...
	"defaultScope": "<YOUR_USERNAME>/<YOUR_SCOPE>"
	...
}

For example, mine would be "defaultScope": "sssaini/saasbase-demo"

4. Similar to how you might do a git commit, you can tag your components for export by tagging them like so:

bit tag --all --message "first version"

5. Now push them to the remote server with:

bit export

There we go! Once exported, you should be able to view your newly created Button component in your bit.dev account.

Step 5: Creating a React frontend project

Let's start a frontend that will use our UI Component library:

npx create-react-app frontend

Jump into the folder and install dependencies with:

cd frontend
npm install

We can run our React frontend with:

npm start

Step 6: Importing Bit.dev UI Component into React

To import our components, we need to first set up a Scoped Registry so NPM can find the packages.

1. Add your scope with:

npm config set '@<YOUR_USERNAME>:registry' https://node.bit.dev

2. Now we are ready to import our Button component with installing:

npm i @YOUR_USERNAME/<YOUR_SCOPE>.ui.button

Sweet! You've just imported a component from a Design Library successfully. Now you just use it as you would another React component.

3. Edit App.js to include the Button:

import logo from './logo.svg';
import { Button } from "@sssaini/saasbase-demo.ui.button"
import './App.css';

function App() {
  return (
    <div style={{ width: "100vw", height: "100vh", display: "flex", alignItems: "center", justifyContent: "center" }}>
      <Button>My cool button</Button>
    </div>
  );
}

export default App;

Step 7: Update UI component definition

Switch back to the ui-components folder and let's update our Button.

1. Edit the my-bit/ui/button/button.tsx :

import React, { ReactNode } from "react";

export type ButtonProps = {
  children?: ReactNode;
};

export function Button({ children }: ButtonProps) {
  return (
    <div>
      <a
        style={{
          backgroundColor: "#345DEE",
          borderRadius: "0.5rem",
          color: "white",
          textDecoration: "none",
          padding: "0.75rem 1rem 0.75rem 1rem",
          display: "flex",
          justifyContent: "center",
        }}
      >
       {children}
      </a>
    </div>
  );
}

2. Tag and export the second version of the Button by running:

Step 8: Import newly updated Button component

Switch to the frontend project and install the new version of the component by running:

npm i @sssaini/ecommerce-demo.ui.button@0.0.2

The component should be updated.

There we have it! A well documented UI component library that can be reused in as many front-end projects as you want and deliver consistent experiences to your users.