Microfrontend Core
$ yarn # Prepare
$ yarn build # Build all packages
$ yarn test # Test all packages
$ yarn workspace @redneckz/microfront-core build # Build specific package
$ yarn workspace @redneckz/microfront-core test # Test specific packagehttps://yarnpkg.com/features/release-workflow
$ yarn version check --interactiveMicro Frontend Core Library for React
Micro Frontend Core Library for Vue2
Webpack Module Federation Utils
Remote modules should be isolated from each other in terms of DOM/CSS/JS/API.
Shadow DOM can be used to isolate DOM/CSS. API isolation could be achieved by means of iframe (sandbox). But iframe approach comes with a bunch of drawbacks.
Support of different isolation levels is the major feature of this lightweight framework ;)
Currently, only Shadow DOM isolation level is supported.
Webpack 5 utils:
$ npm install --save-dev @redneckz/module-federation-utils
Micro frontend core:
$ npm install --save @redneckz/microfront-core
https://webpack.js.org/migrate/5/
To share micro frontends across containers, Webpack Module Federation Plugin should be configured.
More info here https://webpack.js.org/concepts/module-federation/
Host container is a kind of orchestrator. It loads remote modules by means of Module Federation and places every module into a dedicated slot of the layout.
const webpack = require('webpack');
const { moduleFederationOptions } = require('@redneckz/module-federation-utils');
module.exports = {
output: {
...
uniqueName: 'host',
// "publicPath" is required and should depend on environment
publicPath: 'https://host-domain/'
},
...
plugins: [
...
new webpack.container.ModuleFederationPlugin(
moduleFederationOptions({
name: 'host',
// Remote containers
remotes: [
['foo', 'https://foo-domain'],
['bar', 'https://bar-domain']
]
})
),
],
};Also, please, move the root module into the separate bootstrap module to load it asynchronously.
For example:
bootstrap.tsx:
// This line is required to configure core library isolation container
import '@redneckz/microfront-core/lib/configure';
import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './components/App';
ReactDOM.render(<App />, document.getElementById('root'));index.ts:
import('./bootstrap');publicPath (from webpack.output section) is required to be configured. It should point out the actual origin of the MF container to make it remotely accessible.
In the case of multiple environments (dev, pre-prod, prod, etc.) additional entry should be configured and named according to the MF container name.
const webpack = require('webpack');
const { moduleFederationOptions } = require('@redneckz/module-federation-utils');
const { insertStyle } = require('@redneckz/microfront-core');
module.exports = {
entry: {
foo: resolve(__dirname, './src/setPublicPath.js'),
...
},
output: {
...
uniqueName: 'foo',
publicPath: '/'
},
...
plugins: [
...
new MiniCssExtractPlugin({
filename: '[name].css',
// Custom insert can be declared in order to isolate micro frontends from each other
// In context of host container styles should be inserted into mounting root
// ! But this is not required anymore if your target browsers support MutationObserver API (all modern and IE11+)
insert: insertStyle
}),
...
new webpack.container.ModuleFederationPlugin(
moduleFederationOptions({
name: 'foo',
// These modules can be loaded by any host container
exposes: {
'./foo-page': './src/pages/foo-page/foo-page.tsx',
'./other-page': './src/pages/other-page/other-page.tsx'
}
})
),
],
};setPublicPath.js contains only one line of code which sets up the global webpack variable:
__webpack_public_path__ = new URL(document.currentScript.src).origin + '/';Also, please, move the root module into the separate bootstrap module to load it asynchronously. See "Host Container Configuration"
import React from 'react';
import { Redirect, Switch, Route } from 'react-router-dom';
import { register } from '@redneckz/microfront-core';
import { MicroFrontContainer } from '@redneckz/microfront-core-react';
const bootstrapFoo = register(
'foo', // remote module name according to Module Federation config
() => import('foo/foo-page') // remote module
);
export const App: React.FC = () => (
<Switch>
<Route path="path/to/foo">
<MicroFrontContainer route="path/to/foo" bootstrap={bootstrapFoo}>
{mountingRootRef => <div ref={mountingRootRef}>Loading...</div>}
</MicroFrontContainer>
</Route>
...
</Switch>
);import React from 'react';
import { render, unmountComponentAtNode } from 'react-dom';
import { Router } from 'react-router-dom';
import { container, MicroFrontModuleBootstrap } from '@redneckz/microfront-core';
import { Container } from '@redneckz/microfront-core-react';
// Each and every micro frontend should implement async "bootstrap" function
export const bootstrap: MicroFrontModuleBootstrap = async ({ route: rootRoute }) => {
// Global stuff can be lazily loaded here
const { App } = await import('./App');
const { createBrowserHistory } = await import('history');
// Relative to MF root route
const history = createBrowserHistory({ basename: rootRoute });
return {
mount: async mountingRoot => {
render(
<Container instance={container()}>
<Router history={history}>
<App />
</Router>
</Container>,
mountingRoot
);
},
unmount: async mountingRoot => {
unmountComponentAtNode(mountingRoot);
}
};
};It's very important to set up proper Url for backend endpoints. This Url isn't known while application is building.
So it should be defined at runtime. The approach is identical to the previously used for publicPath.
const backendRoot = document.currentScript && new URL((document.currentScript as HTMLScriptElement).src).origin;In most cases host container and micro frontends are distributed across different domains. To make communication between host container and micro frontends more secure we need to configure Content Security Policy and Cross-Origin Resource Sharing.
For example, https://svoefermerstvo.ru aggregates https://retail.rshb.ru
Requests from https://svoefermerstvo.ru to https://retail.rshb.ru (including API requests) should be blocked by the browser according to the default security policy.
It is necessary to configure security on both the host container side and the micro frontend side.
To explicitly allow any content from https://retail.rshb.ru configure Content-Security-Policy for https://svoefermerstvo.ru
https://svoefermerstvo.ru/index.html example:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' retail.rshb.ru;" />To make the browser happy, configure CORS for https://retail.rshb.ru
https://retail.rshb.ru NGINX config example:
add_header 'Access-Control-Allow-Origin' 'https://svoefermerstvo.ru';
add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, HEAD, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'X-Custom-Header';
add_header 'Access-Control-Expose-Headers' 'X-Custom-Header';
add_header 'Access-Control-Allow-Credentials' 'true';In case of multiple host containers accessing the same micro frontend, Origin echoing approach could be used:
if ($http_origin ~* '^https://(svoefermerstvo|svoedom|svoe-selo|svoe-rodnoe|svoe-zagorodom)\.ru$') {
add_header 'Access-Control-Allow-Origin' $http_origin;
}