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:

• Create a Button component in React with unit test

• Build a design library in bit.dev and upload it to remote bit.dev server

• Import the components in a frontend React project

• Make changes to the underlying components and watch them apply automatically to the frontend

Step 1: Installing Bit.dev

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

npm i -g @teambit/bvm

• 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

• Restart your terminal and run:

bvm install

💡

If you're having trouble with bvm, restart your machine.

Step 2: Creating UI Components Library with Bit.dev

• Create a new folder called ui-components .

• 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

• 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": {}
    }
  }
}

• 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

• 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.

💡

The above command will create your component with Typescript files. I would recommend this because it makes locating and fixing errors much much easier than plain javascript.

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.

• Create a new bit.dev account here

• 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"

• 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"

• 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.

• 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.

• 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.

• 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>
  );
}

• 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.