bout

Bout

Tiny framework for micro frontend installation and communication. Creates simple way to inject a microfrontend pattern into existing SPA application.

Framework	Parent App	Microfrontend
Vue2
Vue3	*
React	*
Angular	*
Svetle	*

* - Framework should work flawlessly for any framework in the parent app, but not everywhere this was tested

Name

Bout /bu/ means in french a scrap of something, a very small piece.

Installation

$ yarn add bout

Getting started

Parent App

In your parent app, you need to initialize the library:

import { initMicroApps } from 'bout'

initMicroApps()

Child App

On the other hand, in your child app, you need to initialize the microfrontend:

// main.ts
import { createApp } from 'vue'
import { createVue3MicroApp, registerMicroApp } from 'bout'

const appFactory = () => {
  return createApp(App)
}

const microApp = createVue3MicroApp('ExampleApp', appFactory)
registerMicroApp(microApp)

Second importation is to make sure, that child app creates the public asset-manifest.json file. It should be available in the public folder.

For Vite, you should do this mannualy, with following settings in vite-config.ts:

import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
  // Other properties here...
  build: {
    manifest: false,
    cssCodeSplit: false,
    lib: {
      name: 'Test',
      entry: './src/main.ts',
      fileName: 'bundle',
    },
  },,
})

asset-manifest.json will look like this:

{
  "main.js": "bundle.umd.js",
  "style.css": "style.css"
}

Connecting the apps

When your setup is complete, all you have to do is to call installApp(appHost) in the parent app. This will automatically install the microfrontend, and prepare it to mount. After installation you can call .mount(containerID) on the app to mount it.

Example:

const host = 'http://example.com'
const app = await installApp(host)
app.mount('container-id')

App should be properly rendered!

Communication between apps

TODO