Micro Front-end react apps created by Create-React-App
Micro-frontend architecture is a design approach in which a front-end app is decomposed into individual, semi-independent “microapps” working loosely together.
Th applications are loaded into a micro-frontend container. The container runs it as of the micro frontend is its own component and provides seamless workflow to users.
- Launch container app.
- Launch sub-app1 and sub-app2 applications on specific ports.
- Based on the URL, the Container will route to one of the micro front-ends.
- The selected micro front-end goes to the specific port to fetch the application’s asset-manifest.json. From this JSON file, the included main.js is put on a script tag and loaded.
- A manifest file contains a mapping of all asset filenames.
- Container app passes the containerId and history for its micro front-ends to be rendered.
- Install "react-app-rewired" — This allows customizing the app without ejecting app.
npm i --save react-app-rewired- Modify package.json to set port and use "react-app-rewired" in sub-apps.
"scripts": { "start": "PORT=4001 react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-app-rewired eject" },- Add config-overrides.js to disable code splitting. By default, code splitting is enabled. An application is split into several chunks that can be loaded onto the page independently. You can see http://localhost:4001/asset-manifest.json before adding react-app-rewired. It clearly shows the app has been chunked.
//config-overrides.js module.exports = { webpack: (config, env) => { config.optimization.runtimeChunk = false; config.optimization.splitChunks = { cacheGroups: { default: false, }, }; return config; }, };- Make changes in src/index.js to define render and unmount functions.
import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; import * as serviceWorker from "./serviceWorker"; // render micro frontend function window.rendersubapp1 = (containerId, history) => { ReactDOM.render( <App history={history} />, document.getElementById(containerId) ); serviceWorker.unregister(); }; // unmount micro frontend function window.unmountsubapp1 = containerId => { ReactDOM.unmountComponentAtNode(document.getElementById(containerId)); }; // Mount to root if it is not a micro frontend if (!document.getElementById("subapp1-container")) { ReactDOM.render(<App />, document.getElementById("root")); } // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.unregister();- If an app is running independent, it will be rendered to root element. If it is a micro front-end, it will be rendered to containerId by window.rendersubapp1.
- Use src/setupProxy.js to set up CORS rule.
module.exports = app => { app.use((req, res, next) => { res.header('Access-Control-Allow-Origin', '*'); next(); }); };- Configure Your .env File to Set Up a Host for Each Micro-Frontend Application in Container app.
REACT_APP_SUBAPP1_HOST=http://localhost:4001 REACT_APP_SUBAPP2_HOST=http://localhost:4002- Add Microfront.js file in sec directory, It picks up a manifest file from a running application and launches the application through a script and link tag.
import React from 'react'; class MicroFrontend extends React.Component { componentDidMount() { const { name, host, document } = this.props; const scriptId = `micro-frontend-script-${name}`; if (document.getElementById(scriptId)) { this.renderMicroFrontend(); return; } fetch(`${host}/asset-manifest.json`) .then(res => res.json()) .then(manifest => { manifest["entrypoints"].map((entry => { if (typeof manifest["files"][entry] !== "undefined" && manifest["files"][entry] !== "undefined") { if (entry.endsWith('.css')) { const link = document.createElement('link'); link.id = scriptId; link.href = `${process.env.NODE_ENV === "production" ? host.slice(0, host.lastIndexOf('/')) : host}${manifest["files"][entry]}`; link.onload = this.renderMicroFrontend; link.rel = "stylesheet" document.head.appendChild(link); } const script = document.createElement('script'); script.id = scriptId; script.crossOrigin = ''; script.src = `${process.env.NODE_ENV === "production" ? host.slice(0, host.lastIndexOf('/')) : host}${manifest["files"][entry]}`; script.onload = this.renderMicroFrontend; document.head.appendChild(script); } }) ) const script = document.createElement('script'); script.id = scriptId; script.crossOrigin = ''; script.src = `${process.env.NODE_ENV === "production" ? host.slice(0, host.lastIndexOf('/')) : host}${manifest["files"]["main.js"]}`; script.onload = this.renderMicroFrontend; document.head.appendChild(script); const link = document.createElement('link'); link.id = scriptId; link.href = `${process.env.NODE_ENV === "production" ? host.slice(0, host.lastIndexOf('/')) : host}${manifest["files"]["main.css"]}`; link.onload = this.renderMicroFrontend; link.rel = "stylesheet" document.head.appendChild(link); }); } componentWillUnmount() { const { name, window } = this.props; window[`unmount${name}`] && window[`unmount${name}`](`${name}-container`); } renderMicroFrontend = () => { const { name, window, history } = this.props; window[`render${name}`] && window[`render${name}`](`${name}-container`, history); }; render() { return <main id={`${this.props.name}-container`} />; } } MicroFrontend.defaultProps = { document, window, }; export default MicroFrontend;- In Container App Create a Micro-Frontend Component for each micro-frontend application and Use a route to invoke it.
import React from "react"; import { NavLink, BrowserRouter, Route, Switch } from "react-router-dom"; import MicroFrontend from "./MicroFrontend"; const { REACT_APP_SUBAPP1_HOST: subapp1, REACT_APP_SUBAPP2_HOST: subapp2 } = process.env; const SubApp2 = ({ history }) => ( <MicroFrontend history={history} host={subapp2} name="subapp2" /> ); const SubApp1 = ({ history }) => ( <MicroFrontend history={history} host={subapp1} name="subapp1" /> ); const Home = () => ( <> <p>Rendered by Container</p> </> ); const App = props => { return ( <BrowserRouter> <div style={{ padding: 25, display: "flex" }}> <div style={{ padding: "0px 15px" }}> <NavLink style={{ textDecoration: "none", fontWeight: "bold", color: "#282c34", fontSize: 20 }} to="/home" > Home </NavLink> </div> <div style={{ padding: "0px 15px" }}> <NavLink style={{ textDecoration: "none", fontWeight: "bold", color: "#282c34", fontSize: 20 }} to="/subapp1" > SubApp1 </NavLink> </div> <div style={{ padding: "0px 15px" }}> <NavLink style={{ textDecoration: "none", fontWeight: "bold", color: "#282c34", fontSize: 20 }} to="/subapp2" > SubApp2 </NavLink> </div> </div> <Switch> <Route path="/home" component={Home} /> <Route path="/subapp1" render={() => <SubApp1 />} /> <Route path="/subapp2" render={() => <SubApp2 />} /> </Switch> </BrowserRouter> ); }; export default App;Container App: http://localhost:3000 SubApp1: http://localhost:4001 SubApp2: http://localhost:4002