This project aims to provide a formal specification to describe Microfrontends exposed by a server. Think of it as OpenAPI for Microfrontends.

The specification includes:

• Basic metadata like name, title, description
• The assets (js, css) and how to load them
• The schema of the config object that can be provided when starting the Microfrontend
• The schema of messages the Microfrontend sends and receives (pub/sub)
• API proxies that are required to access (protected) backends
• Security hints

OpenMicrofrontends is not a framework, nor is it owned by any company. It is a community effort to provide a way to describe Microfrontends and how to integrate them in a standardized way. All code we provide is free and open source, and will be forever.

The specification makes it possible to decouple Microfrontend development from their integration into applications, and to treat Microfrontends exactly like Microservices with only a different formal description.

Terminology

Here is an overview of the terminology and component names used in the specifications and in the documentation of this project.

Components for a complete setup with Host Backend integration:

And here for a simplified, Browser Standalone, setup:

Note

With the simplified setup, all components (Microfrontend Server, APIs, ...) must be publicly accessible and CORS must be enabled. Furthermore, some API security requirements (e.g., BASIC), user permissions and server-side rendering are not available.

• Microfrontend: A Microfrontend is a JavaScript frontend bundled into JS and CSS files.
• Microfrontend Server: A Microfrontend Server serves the Microfrontend assets according to the OpenMicrofrontend Description. Additionally, it should expose the OpenMicrofrontend Description itself, so Host Backend can dynamically register Microfrontends and react to changes.
• Host Backend: The backend part of the Host Application, which can be used to provide security, proxying of Backend APIs and Server-Side Rendering (SSR).
• Host Frontend: The frontend part of the Host Application, which is used to start Microfrontends and provide means to interact with them.
• Backend API: The API a Microfrontend uses to fetch data or perform actions. This can be a REST API, GraphQL, or any other type of API that the Microfrontend770 needs to function correctly.

Getting Started

The first step is to create a Description of your new (or existing) Microfrontend. The Description acts as a contract between the Host Application and the Microfrontends Server. A definition can be written as YAML or JSON and can contain multiple Microfrontends.

Things you have to take into consideration for the Description:

• What are my initial assets and which module system do/will I use?
• Does my Microfrontend require proxying of APIs and assets (because it is not publicly accessible or the APIs require security)
• Does my Microfrontend require a configuration at startup?
• Will my Microfrontend send or receive messages from other Microfrontends on a page?
• Does my Microfrontend has functionality that depend on the users permissions?
• Does/should my Microfrontend provide Server-Side Rendering (SSR)?

Here is a simple example of a Description:

$schema: 'https://open-microfrontends.org/schemas/1-0-0.json'
openMicrofrontends: 1.0.0
servers:
- url: 'http://localhost:7890'
  description: Local Test Server
microfrontends:
- name: My First Microfrontend
  assets:
    basePath: /public
    js:
      moduleSystem: ESM
      initial:
        - Microfrontend.js
  rendererFunctionName: startMyFirstMicrofrontend
  config:
    schema:
      type: object
      properties:
        welcomeMessage:
          type: string
      required: ["welcomeMessage"]
    default:
      welcomeMessage: Hello World!
  messages:
    ping:
      publish: true
      subscribe: true
      schema:
        type: object
        properties:
          ping:
            const: true
        required: ["ping"]

The next step is to generate type-safe code from the Description. You can use the OpenMicrofrontends Generator or any other OpenMicrofrontends generator.

The following needs to be generated:

• A Renderer interface on the Microfrontend side
• A Starter and (if necessary) Host Backend Integrations for the Host Application

Here is an example Renderer implementation based on an interface generated by OpenMicrofrontends Generator:

import {MyFirstMicrofrontendRenderer, MyFirstMicrofrontendRendererFunctionName} from './_generated/microfrontendsRenderers';

const renderer: MyFirstMicrofrontendRenderer = async (host, context) => {
  const {config, messageBus} = context;
  host.innerHTML = `
    <div>
      <h2>${config.welcomeMessage}</h2>
    </div>
  `;
  const onPing = () => { /* do something */ };
  // Type safe!
  messageBus.subscribe('ping', onPing);
  return {
    onRemove: () => {
      host.innerHTML = '';
      messageBus.unsubscribe('ping', onPing);
    }
  }
}

// If you bundle your code to ESM oder SystemJS
export default {
  [MyFirstMicrofrontendRendererFunctionName]: renderer,
};
// Or otherwise (this always works)
// window[MyFirstMicrofrontendRendererFunctionName] = renderer;

All you need to do now is to put the code above into your index file, bundle it and add a server that provides it at /public/Microfrontend.js (because the basePath is /public).

On the Host Application side, you can start the Microfrontend like this with a generated Starter:

import {startMyFirstMicrofrontend} from './_generated/microfrontendStarters';

const hostElement = document.getElementById('root');

const {close, messages} = await startMyFirstMicrofrontend('https://my-microfrontend-server.com', hostElement, {
    id: '1',
    // lang: 'en',
    // user,
    config: {
        welcomeMessage: 'Microfrontend Demo!',
    },
    messageBus: globalMessageBus, 
});


// Send a message to the Microfrontend - type-safe!
messages.publish('ping', { ping: true });

Specification

• Version 1.0.0

Documentation

• Homepage

Examples

• Example Microfrontend Descriptions
• Example Implementations of Microfrontends and Host Applications

Related Projects

None yet.

If you want to be listed here, create a pull request.

Servers supporting OpenMicrofrontends

None yet.

If you want to be listed here, create a pull request.

Contributing

Any contribution is highly welcome!

You can contribute by

• Requesting new features
• Creating issues
• Discussing ideas
• Submitting pull requests
• Spreading the word ;-)