Patchwork

Patchwork is a bootstrap library that supports our micro-frontends infrastructure.

This is a proof of concept and is not production ready in any way.

Usage

Initializing a parent app.

import{registerManifest}from'@fashiontrade/patchwork';
...
constmanifest={childApp: 'http://localhost:5000/index.js',anotherChildApp: 'http://localhost:4000/index.js',};registerManifest(manifest)// called at the very top level of your parent app....

Loading a child app

importPatchworkComponentfrom'@fashiontrade/patchwork';
...
<PatchworkComponentname="childApp"basePath="/childApp"/>...

Registering a child app and it's components

...
import{registerComponent}from'@fashiontrade/patchwork';
...
functionbootstrap(){returnPromise.resolve({name: 'childApp',components: {AddToCartButton: registerComponent('AddToCartButton',AddToCartButton),},});}functionmount(node,basePath,props){// whatever you want to do when mounting here.ReactDOM.render(<AppbasePath={basePath}{...props}/>,node);returnPromise.resolve();}functionunmount(){// Whatever you want to do before unmounting here.returnPromise.resolve();}exportdefault{
bootstrap,
mount,
unmount,};if(process.env.NODE_ENV==='development'){ReactDOM.render(<App/>,document.getElementById('ft-app'));}

Rendering a child app component from the parent app

importPatchworkComponentfrom'@fashiontrade/patchwork';
...
<PatchworkComponentname="childApp"componentName="AddToCartButton"/>...

Setting up a new client app

Things to consider:

• Changing a default development PORT
• Passing app settings (incl. sentry)
• Internationalisation (passing down i18n config)
• Setting up .gitignore & environment variables
• Setting up fonts / translations on development environment

Additional info

A similar setup with Single-SPA: https://gitlab.com/TheMcMurder/single-spa-portal-example/tree/master

License

Apache 2.0