cra-template-microfrontend-typescript

This is the Micro-Frontend TypeScript template for Create React App.

It's using React App Rewired and React Router (with nested routes) to create a very simple and lightweight Micro-Frontend app to be loaded into a Container App. Check out the demo Container App (aka Main SPA).

What is a micro-frontend approach?

The term micro front-ends came up the last couple of years, check out this article from the ThoughtWorks Technology Radar. It extends the concepts of microservices to front-end development. The approach is to split the browser-based code into micro front-ends by breaking down application features. By making smaller and feature-centered codebases, we achieve the software development goal of decoupling. Although the codebases are decoupled, the user experiences are coherent. In addition, each codebase can be implemented, upgraded, updated, and deployed independently.

Image credit to Jennifer Fu. Check out the great article Jennifer wrote about how to turn a react app into a micro-frontend.

Note: In the micro-frontend architecture, globals have to be carefully controlled. Globals doesn’t only refer to variables or state, but it can also include things such as window/document event handlers, persistent network connections, anything that can be actively running despite the app no longer being in the DOM. It can be incredibly easy to forget that these things can leak, and that they require proper tear downs.

So, pay special attention to the global nature of the web, all the script and styles are attached to the same DOM, you could face issues if this is not handled gracefully. For example, in order to avoid collisions in styles it's recommended to use sass (with a root container element) or some css-in-js approach (material-ui or styled components). This is out of the scope and you can use whatever you find better for your project.

Mechanism

In order to integrate a micro-frontend, some changes must be done in the react app, basically expose two function that will be called from the container app:

• render(containerId, history, data): this function will call ReactDOM.render to render the root app component.
• unMount(containerId): this function will call ReactDOM.unmountComponentAtNode to unmount the root app component and perform any needed cleanup.

It is possible to subscribe/unsubscribe from the Container App to events dispatched from the micro-frontend with the functions listed below:

• subscribe(event, eventHandler)
• unSubscribe(event, eventHandler)

Take a look to the microfrontend.tsx file in the project src folder.

To be able to execute the functions listed above, it's necessary to change the entry point of the react app, in order to achieve it there is a file config-overrides.js in the project root required by React App Rewired.

const path = require('path');

module.exports = {
  webpack: (config) => {
    config.optimization.runtimeChunk = false;
    config.optimization.splitChunks = {
      cacheGroups: {
        default: false,
      },
    };
    config.entry = {
      main: [path.resolve('.', 'src', 'microfrontend.tsx')],
    };
    config.output.library = 'YourBrandNewMicrofrontend';
    config.output.libraryTarget = 'window';
    return config;
  },
};

Here you can setup some options like:

• The entry point with the property config.entry.
• To generate an optimized or not optimized build with the property config.optimization.runtimeChunk and config.optimization.splitChunks.
• The Id and build mode of the micro-frontend with the property config.output.library and config.output.libraryTarget (needed in the Container App). If you don't want to use this mode, you have to expose specific named functions in the microfrontend.tsx file instead of generic ones to be called from the Container App, for example renderYourNewMicrofrontend(...) instead of just render(...). Then, of course, you have to setup the Container App accordingly to load the micro-frontend depending on what is the chosen mode here.

Note: You don't have to use React App Rewired if you don't need or don't want to override the default configuration. Of course, there are advantages and disadvantages on doing that. Check out the commented code in the index.tsx file for more info.

Usage

To use this template, add --template microfrontend-typescript when creating a new app.

For example:

npx create-react-app my-app --template microfrontend-typescript

# or

yarn create react-app my-app --template microfrontend-typescript

Run the microfrontend

Development mode (localhost:3000 by default). This is the regular react script command. Not need to have the Container App running since the app will be loaded in standalone mode.

npm start

Microfrontend mode (localhost:4000 by default). Use this mode to load the app into the Container App which has to be running.

npm run start:micro

Build the microfrontend

npm run build:micro

For more information, please refer to:

• Getting Started – How to create a new app.
• User Guide – How to develop apps bootstrapped with Create React App.
• Main SPA - How to create a Container App.