Creating MicroFrontend paradigms using Bit Tool 🎩
Checkout Shikher’s Bit account. 👏 👏
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.
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.
- Set up a Node.js package registry.
- Publish modules/components with Bit commands.
- 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)
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:
│ ├── Button.js
│ ├── Button.spec.js
│ └── index.js
│ ├── Login.js
│ ├── Login.spec.js
│ └── index.js
└── index.js5 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
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");
import Button from "@bit/sirshikher.react-compo.button";<Button />
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.
Why only backend have all the fun of MicroServices 😜
” Now You can Finally showoff” 😍
— Shikher Mishra