Speed up the your micro-frontend development. Configure less and delivery more.

Overview

React Micro

Speed up the your micro-frontend development. Configure less and delivery more. You don't need to waste more time trying to change your application to support multiple micro-frontends or use iframe becase of old bundler version.

Why

Reason One Webpack federation module and other bundlers requires newest version of their library (webpack 5+) and makes your application bounded to their architecture, which makes harder the migration to other module bundles.

Reason Two If your project uses old bundler version like <= webpack4, you might not be able to use a decent configuration to run a micro-frontend in the client side without spending some time changing the architecture of your container and host.

Reason Three If you don't want to spend too much time chaing the architecture of your container and host, you might decide to go with iframe which is not good for the following reasons:

  • Cookies does not work well.
  • Browser history, routing and deep linking are complicated to integrate.
  • It makes responsive design a bit tuff for some cases.
  • You will not be able to provide any input/function as parameter in the initial render of the micro-frontend.
  • Not elegant for developers (developer friendly).

How to use?

Configuring your container It's pretty straight forward, you just need to call the Micro component in your container, which is in most of the case the root application:

import { Micro } from "react-micro-js";

<Micro
    name="MicroCar"
    manifestSRC="manifest.json"
    host="http://localhost:4000"
    deeps={[...]}
/>

where:

  • name is the name of your micro frontend. Keep this name in mind, because this should be the same that you will use in the connect function later.
  • manifestSRC the destination to your manifest file. In this case the manifest file is found at http://localhost:4000/manifest.json
  • host the endpoint where your micro-frontend is deployed.
  • deeps the dependency array which you want to inject in your micro-frontend when it is going to be mounted. Usually used for browser history, event emitters and shared capabilities.

The manifest is json file which has a files entry on it. If you use create-react-app it will be something like:

Configuring your host There's one last step, which is to configure your micro-frontend, some times called as host.

In the entry point of your application, most of the time index.js, you need to move your ReactDOM render logic to be inside a function, like this example bellow:

const mountFn = (connect) => (containerId, deeps) => {
  const root = ReactDOM.createRoot(document.getElementById(containerId));

  root.render(<App />);

  connect(root);
};

Please notice we're calling a connect function which will come as parameter from the connector later. Also notice this 2 parameters provided in the curried function: containerId and deeps, where:

  • containerId is the id of your micro-frontend container, which will be [YOUR_MICRO_FRONTEND_NAME]-container
  • deeps dependency array provided from the parent container.

Then, you just need to provide your mountFn to react-micro-js connector and that is it:

import { connector } from "react-micro-js";

const host = connector(mountFn, {
  devRoot: "root",
  name: "MicroCar",
});

Where:

  • name is the micro-frontend name. This property should be the same name that you have provided in the <Micro /> component which you used inside your container.
  • devRoot is the id of the html element that the micro-frontend should be attached in case it is running isolated, without the container. Eg: suppose your application is running at localhost:3000 but your micro-frontend is running at localhost:4000 and you are accessing localhost:4000 directly, the connector function will know that there isn't any container to attach your micro-frontend, so it will try to find the html tag with the id === devRoot property.

Found an issue, need help or want a feature request?

We're more than happy to fix bugs, create features or help you anything, you just need to create an issue here.

What is next?

  • Create unit tests ASAP.
  • Create dispatch function, to make easer cross communication between hosts and containers.
  • Create CONTRIBUTTING.md
You might also like...

Veroo is a cappuccino delivery app. This application is for the purpose of studying modern interface and animations.

Veroo Veroo is a cappuccino delivery app. This application is for the purpose of studying modern interface and animations. Pleasant, fluid and lively

Jun 12, 2022

⚡️🦕 A version semantic and fast package delivery network for Deno.

Deno PKG A version semantic and fast package delivery network for Deno. Examples Using a fixed version: https://pkg.deno.dev/[email protected]/fs/mod.ts htt

Aug 14, 2022

一个运行在浏览器内的提词器,可翻页,可变速,可自定义字体、大小、颜色等多种选项 A teleprompter in web browser, page down, speed up , custom font family/size/color and more.

Introduction 一个运行在浏览器内的提词器,可翻页,可变速,可自定义字体、大小、颜色等多种选项 A teleprompter in web browser, page down, speed up , custom font family/size/color and more. inst

Aug 17, 2021

Show More Less - jQuery - Very useful tiny tool

myOwnLineShowMoreLess Show More Less - jQuery - Very useful tiny tool. Demo Getting Started This is simple plugin developed using jQuery. Prerequisite

Dec 29, 2020

This is food delivery app i.e, Zomato ( React Native + Django )

This is food delivery app i.e, Zomato ( React Native + Django  )

Food-Delivery-App ( React Native + Django ) Changes you have to made to backend. In backend edit PaymentViews.py file and write your own Paytm MERCHAN

Nov 21, 2022

☕️ A coffee delivery app concept

☕️  A coffee delivery app concept

Coffee Delivery ☕️ Layout • Technologies • Getting started • License 🔖 Layout The author of this layout is Nickelfox Design. You can view the project

Nov 29, 2022

A tutorial for people that want to learn continuous delivery concepts by practicing.

Continuous delivery playground This tutorial walks you through setting up a continuous delivery pipeline from scratch. This guide is for people that w

Aug 25, 2022

Catalogist is the easy way to catalog and make your software and (micro)services visible to your organization in a lightweight and developer-friendly way.

Catalogist is the easy way to catalog and make your software and (micro)services visible to your organization in a lightweight and developer-friendly way.

catalogist 📚 📓 📒 📖 🔖 The easy way to catalog and make your software and (micro)services visible to your organization through an API You were a pe

Nov 20, 2022
Owner
Nevinha
NevinhaJs is a set of experimental projects which uses latest technologies / techniques like web 3.0 and microfrontend
Nevinha
A type speed checking website which lets you check your typing speed and shows the real-tme leaderboards with mongodb as DB and express as backend

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Sreehari jayaraj 8 Mar 27, 2022
EggyJS is a Javascript micro Library for simple, lightweight toast popups focused on being dependency-less, lightweight, quick and efficient.

EggyJS EggyJS is a Javascript micro Library for simple, lightweight toast popups. The goal of this library was to create something that meets the foll

Sam 8 Aug 7, 2022
Micro.publish is an Obsidian plugin to publish notes directly to Micro.blog, written in TypeScript

Micro.publish Micro.publish is a community maintained plugin for Obsidian to publish notes to a Micro.blog blog. Installing This plugin will be availa

Otavio Cordeiro 12 Nov 11, 2022
All in one is a CLI to make your journey in web development less painful (it makes your life way easier).

All In One CLI (Aio) The Ultimate CLI for all your needs in web development. Description This is a CLI that has all the commands you need to do anythi

Я♡M...∞ 17 Sep 25, 2022
A monorepo that uses the AWS Cloud Development Kit to deploy and configure nanomdm on AWS lambda.

NanoMDM on AWS This repo builds and configures a nanomdm server to run on AWS lambda. It uses the Cloud Development Kit and tries to follow best pract

Stevie Clifton 4 May 26, 2022
For this workshop, we're going to learn more about cloud computing by exploring how to use Pulumi to build, configure, and deploy a real-life, modern application using Docker

For this workshop, we're going to learn more about cloud computing by exploring how to use Pulumi to build, configure, and deploy a real-life, modern application using Docker. We will create a frontend, a backend, and a database to deploy the Pulumipus Boba Tea Shop. Along the way, we'll learn more about how Pulumi works.

Kat Cosgrove 8 Apr 7, 2022
Raaghu is a micro frontend design system for modern web apps

Raaghu is a micro frontend design system for modern web apps, which is an open source, Bootstrap 5.x enabled collection of reusable elements and components guided by clear standards, capable of giving the designers the necessary tools to develop beautiful, responsive and engaging product experiences. Single source of truth for truly scalable and consistent UI language for your application.

Wai Technologies 164 Nov 1, 2022
Less clicking, more creating. Navigate to your favorite actions on the websites you love with just one click.

Navigate to your favorite actions on the websites you love with just one click Web https://irtaza9.github.io/awesome-shortcuts/ Available Shortcuts Go

Irtaza Hussain 9 Aug 25, 2022
A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more

Glide.js is a dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more What can co

null 6.7k Nov 23, 2022