Creating MicroFrontend paradigms using Bit Tool 🎩

Private NPM Registry with Bit

Checkout Shikher’s Bit account. 👏 👏

Bit => Github => npm

Why Microfrontend is needed ?

Good frontend development is hard. Scaling frontend development so that many teams can work simultaneously on a large and complex product is even harder. In this Blog we’ll describe a recent trend of breaking up frontend monoliths into many smaller, more manageable pieces, and how this architecture can increase the effectiveness and efficiency of teams working on frontend code. As well as talking about the various benefits and costs, we’ll cover some of the implementation options that are available, and we’ll dive deep into a full example application that demonstrates the technique.

Before Microfrontend 😢

After Microfrontend 😸

How Bit is helpful !!

Setting up a Node.js package registry is often the first step towards scaling code-sharing and making life a little bit easier for your team.

Using Bit, you can remove most of the overhead around a private registry while reducing the overhead around the packaging and publishing process.

In this short tutorial, I’ll show you how, using Bit, you can set up a private Node.js registry and publish dozens of components and modules in a just few minutes, in 3 steps.

1. Set up a Node.js package registry.
2. Publish modules/components with Bit commands.
3. Install packages using NPM/Yarn client.

Let’s take this shot and dive in to trending world.

1. Setup a Node.js package registry for your components.

We’ll use Bit’s web platform to host the modules we share and the native NPM/Yarn client to install them.

Before we start Ignition we will set up registry. Click here

Flow :: Get Started →Signup (absolutely Free) → Create Collection(with scope)

Bit Flow

You now have a collection in Bit’s web platform, which also functions as a package registry. Let’s see how to publish packages to this registry.

You can even see your components codebase on Bit Platform and Play your component on the same Platform to check its working.

2. Publish components or modules

Now let’s publish modules and components to our newly created registry.

First, install Bit. Then, head over to the project in which you have the packages you want to publish. Note that since we are using Bit, you can publish packages right from any existing project without refactoring.

Step 2.1: Install bits

You can install bits in different ways, but the easiest and most OS generic would be to use npm like so:

$ npm install bit-bin --global

Step 2.2: Initializing the Workspace

Bit uses the concept of workspace to group collections- Yayy we have already created (which are groups of components). The first thing you need to do, is to initialize your workspace, and you can do that simply typing:

$ bit init

That’s it, once that is done, you’ll be able to start deciding what to share.

Step 2.3: Adding file & Checking the status of the components

Adding the files you want to share is quite simple. Assuming a project structure like the following:

$ tree
.
├── App.js
├── App.test.js
├── favicon.ico
├── index.js
└── src
    └── components
        ├── button
        │   ├── Button.js
        │   ├── Button.spec.js
        │   └── index.js
        ├── login
        │   ├── Login.js
        │   ├── Login.spec.js
        │   └── index.js
        └── logo
            ├── Logo.js
            ├── Logo.spec.js
            └── index.js
5 directories, 13 files

You can write your component(Button,Card) code that you want to reuse all over in your preferable language for eg. ReactJs,Vuejs etc. and save according to this structure. 🙌 🙌 ✋

To track these files as components we can use bit add with a glob pattern, pointing Bit to the path in which the modules we want to publish are found.

$ bit add src/components/*
tracking 3 new components

Note that Bit will automatically run through the module’s file & package dependancies, and create and isolate environment for the code which contains everything it needs in order to run in other projects.

You can now perform a status check in order to understand if you have everything you need:

$ bit status

Bit status

This is one of the benefits of using bits instead of going the npm route, we can avoid missing out important files.

After adding the other file, you can perform a new status check and you’ll get a better-looking response.

Step 2.4: Versioning

Before uploading the files, you’ll need to tag the component version. This will tag all components, so it’s a great way to initialize them all at the same time:

$ bit tag --all 0.0.1 --message "initial version for the component"

This step is mandatory, you won’t be able to commit anything until you tag the first version.

Step 2.5: Then export your component to your registry:

$ bit export <account-name>.<collection-name>

In my case, I called the collection “react-compo” and my account name is “sirshikher”, so my command would look like:

$ bit export sirshikher.react-compo

If you want to export particular component.(for eg. you have Button and avtar component and you only want to export Button) so :

$ bit export sirshikher.react-compo.button

That will upload the file up to the custom registry, without doing anything to your code nor your repo.

You will get to know how to import and install your component in your Bit account on Bit Portal.

3. Install packages using the NPM/Yarn client

Now that our packages are ready, let’s learn how to install them.

First, configure bit.dev as a scoped registry to your NPM client.

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

👯 👯👯 👯👯 👯👯 👯👯 👯👯 👯👯 👯👯 👯👯 👯👯 👯👯 👯👯 👯

$ npm i @bit/user-name.collection-name.namespace.packagename

You can use those component Like this :::

const Button = require("@bit/sirshikher.react-compo.button");
or
import Button from "@bit/sirshikher.react-compo.button";
<Button />

Conclusion

In this short tutorial we learned how to:

• Set up an NPM registry in 30 seconds
• Publish packages without refactoring or boilerplating
• Install them with the NPM/Yarn client
• Make changes anywhere and collaborate

Sharing more code in a managed way, while reducing the overhead and time involved in this process, means your team can speed development and simplify the maintenance of your codebase.

Feel free to get started, set up your own registry and share some code. You can check out the project on GitHub or chat with the me on LinkedIn Thanks!

Why only backend have all the fun of MicroServices 😜

” Now You can Finally showoff” 😍

— Shikher Mishra