MFE

A Simple way to create and share Micro FrontEnd Applications This Micro Frontend Monorepo is suposed to be used as an example, you can clone it and host it in your own static cloud.

Host

Usage

Important : We're using Parceljs to generate static code so there's a bug where you have to have at least 2 MFES so parcel can create folder structure as expected. Please, ensure that you have at least 2 MFES and you'll be good to go.

Clone repo, install dependencies using npm or any other node module package system, and run yarn dev in order to see the samples working.

You can access them here :

• http://localhost:1234/mfe-hello-world/page : Hello World Page
• http://localhost:1234/mfe-sample/page : Sample Page

If you want to create a new MFE, there's a command for that:

1. You just have to run: yarn create:mfe some-name. This will create a new folder containing all files needed to work.
2. Run yarn dev again in order to see you MFE that should be available on: http://localhost:1234/mfe-some-name/page.

Building

You can run yarn build when you're ready. That will generate your static files in the following structure to be used externally:

mfe-some-name
  - index.html
  - index.css
  - index.js

Client

Usage

Once your MFE host is hosted, it's very simple to run them inside your application.

1. You just have to import the main.js file generated by building task, it will contain the initialization code and dependencies of your mfes.
2. Instantiate them manually in to the DOMElement you want.

<script src="https://mfe-jails.netlify.app/main.js"></script>
<script>
  window.MFE
    .add('mfe-sample', '#sample')
    .add('mfe-hello-world', '#hello-world')
    .start()
</script>

The script url needs to be present in host package.json in the host field. Ex.:

MFE/package.json

Line 7 in 8edee8b

"host": "https://mfe-jails.netlify.app",

So change it to your hosting url after your deploy.

Live Example

https://stackblitz.com/edit/jails-mfe?file=index.html