This article originally appeared on OpenReplay.
The term micro frontend has been flying around recently, but what are they, and why should you care? This article will answer those questions.
What's a micro frontend?
Modern frontend frameworks are big on building web apps using components: self-contained, reusable pieces of code that render a portion of the user interface.
Micro frontends take this concept one step further. A micro frontend is a web application made up of fully independent components. But what makes this different from a regular frontend?
The components that make up a micro frontend are as loosely coupled as possible. They can be maintained and improved independent of the rest of the application.
The idea behind Micro Frontends is to think about a website or web app as a composition of features that are owned by independent teams. Each team has a distinct area of business or mission it cares about and specializes in. A team is cross-functional and develops its features end-to-end, from database to user interface. (Source: What are micro frontends? )
That's the power of micro frontends.
Why (or why not) should you build micro frontends?
The most obvious advantage of a micro frontend is flexibility. Anyone can build components, and you can include them in your application as you please.
The glaring disadvantage of this method is the complexity. Building a frontend from bits and pieces that are so loosely coupled means that you have to be very careful about the way you organize your code and coordinate all these different components.
If your application is small or medium-sized, you probably don’t need to construct it this way. However, once applications grow to large sizes with many people working on them, the flexibility micro frontends provide can be a valuable asset.
What's Bit?
Bit is software that allows you to create self-contained components and export them so you (and others, if you so choose) can reuse them across projects.
In addition to component reuse, Bit allows you to create documentation and tests for your components, and handles versioning them for you. Bit is written in and supports TypeScript, and is built to be framework agnostic.
How to build a micro frontend in Bit
In this section, you’ll piece together a React web page from Bit components.
Project setup
First, you need to install Bit. The easiest way to do this is with npx:
npx @teambit/bvm install
After that, you need to create a new Bit workspace. A Bit workspace is an environment for creating and managing related Bit components. Create the workspace by running the following in your terminal:
bit new react demo-site
That command will create a workspace called demo-site
using the React workspace template.
Note: You can view the list of default templates by running bit templates
in your terminal outside a workspace directory.
Now that your workspace is set up, run the following to start the Bit component development server:
cd demo-site
bit start
You can access the dev server at localhost:3000
.
Creating Bit components
Next, you’re going to create your first Bit component: the body component of your web page. This component will be written in React, but Bit components can also be written in Angular or Vue, and even Node.js!
Create the component in your workspace by running the following:
bit create react site/body
Like the bit new
command, the bit create
command takes the name of a template as the first argument, and the name of your component as the second.
Note: You can find out how to turn an existing component into a bit component here
Running bit new
should create a folder in your workspace that looks like the following:
Let's break this down. The my-scope/site/body
folder represents your component. The body.docs.mdx
file contains component documentation (if you don't know what mdx is, you can find out here), and the body.spec.tsx
file contains tests. You won't write any tests in this demo, so delete that file.
The body.composition.tsx
file contains small JavaScript functions called compositions that serve as code examples to demonstrate the use of your component under various conditions.
The code that will render the component goes into body.tsx
, and the index.ts
file is responsible for exporting your components.
Now, paste the following code into body.tsx
:
import React, { ReactNode } from 'react';
import './body.css'
export function Body() {
return (
<div className="container">
<div className="image"></div>
<div className="content">
<h1>Futuristic shoes</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quia, commodi. Molestiae blanditiis quis, laborum necessitatibus
pariatur quam ipsa accusamus corporis,
minima labore recusandae earum reprehenderit saepe autem ratione, laudantium natus.
</p>
</div>
</div>
);
}
Next, styling. Create a body.css
file in your component folder and put the following into it:
.container {
height: 30rem;
display: flex;
gap: 2rem;
}
.image {
background-image: url('https://images.pexels.com/photos/2529148/pexels-photo-2529148.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
height: 100%;
width: 50%;
background-size: cover;
background-position: center;
}
.content {
width: 50%;
}
Those blocks of code created a React component that renders an image and some text side by side. If you visit your dev server at localhost:3000
, you should see a page that looks like this:
If you click on the card, you should see a view of your component that looks like this:
The documentation on the page is rendered from body.docs.mdx
and composition.tsx
. Let's edit it to something more accurate. Replace the contents of body.docs.mdx
with the following and save:
---
description: A Body component.
---
import { Body } from './body';
A component that renders the body of a web page.
## Component Usage!
```js live
<Body></Body>
```
Then replace the contents of composition.tsx
with this:
import React from 'react';
import { Body } from './body';
export const BasicBody = () => {
return (
<Body></Body>
);
}
The web page should update itself to look like this:
Finally, since Body
takes no props, remove this line from index.ts
:
export type { BodyProps } from './body';
And your component is done!
Exporting your component
Sign up for a bit.cloud account for free hosting of your component. Next, there's a file called workspace.jsonc
in your workspace. Edit its defaultScope
property to this:
"defaultScope": "[your bit.cloud username].[scope name]"
Next, run the following in your terminal:
bit login
then
bit export
And your component is live! If you refresh the scope page in your bit.cloud, you should see your component there like this:
Composing a frontend with Bit
Now that you've built and exported a Bit component, let's see how to compose an app from components.
Exit your Bit workspace and create a new React app with the following:
npx create-react-app bit-site
Next, you're going to install a search input component from bit.cloud to use in the header.
Note: When you're importing a Bit component with npm, you first need to set the name of the Bit organization or user (the part after @
) as a scoped registry with npm config set
.
Run the following in your terminal:
npm config set '@nitsan770:registry' https://node.bit.cloud
npm i @nitsan770/reuse-components.ui.input sass --legacy-peer-deps
and then import the component you built in this tutorial like this:
npm config set '@[your-bit-cloud username]:registry' https://node.bit.cloud
npm i @[your-username]/[scope name].site.body
In my case, the code looks like this:
npm config set '@paul-akinyemi:registry' https://node.bit.cloud
npm i @paul-akinyemi/test1.site.body --legacy-peer-deps
Next, put the following code into src/App.js
:
import { Input } from '@nitsan770/reuse-components.ui.input'
import { Body } from '@[bit.cloud username]/[scope name].site.body'
import './App.css';
function App() {
return (
<div>
<header>
<span>Header</span>
<Input buttonText='search' className='search'></Input>
</header>
<Body></Body>
<footer>
I'm a footer
</footer>
</div>
);
}
export default App;
and put the following into src/App.css
:
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
}
header > span {
font-size: 2rem;
font-weight: 600;
}
header .search{
width: 25%;
border: 1px purple;
}
footer {
font-size: 2rem;
font-weight: 600;
text-align: center;
padding: 15px 0;
}
Then in your terminal, run npm start
. You should render a frontend that looks like this:
And now you've built a micro-frontend with Bit!
Conclusion
In this article, you learned about the concept of a micro frontend, and you learned how to assemble a web app from independent components using Bit. If you'd like to learn more about micro frontends, you can check out this YouTube video.
I hope you enjoyed the article, and happy building!