Module federation allows us to create micro frontends in a pretty simple way. <\/p>\n
Start off by running<\/p>\n
\r\nnpx create-mf-app\r\n<\/pre>\nYou’ll be prompted for a few things (these may change in different versions of this app. so these are current settings)<\/p>\n
Now our shell will be created. So as the prompt will state<\/p>\n
If all worked you’ll be presented by some large text stating the name of the app, framework etc.<\/p>\n
Let’s now create another app in exactly the same way, obviously give it a different name (mine’s about), this is one of your micro frontends, also give it a different port, i.e. 8081 if you stuck with the default 8080 for the shell or in my case 3001. <\/p>\n
Now go to that application and run it up using the commands below (again)<\/p>\n
If all went well we have an application (the shell) running and the about<\/em> application running as well. So nothing too exciting to see here, but it just goes to show we’re developing “standard” React apps.<\/p>\n What we will now need to do, is create a component that we’re going to expose from this application. All I’m going to do is move the App.tsx code that shows the application name etc. into a component, so if you want to follow along, let’s add a components folder to the src folder and within that add a About.tsx file and moved the code from the App.tsx into it, so it looks like this<\/p>\n Now the App.tsx looks like this<\/p>\n We need to make some changes to webpack.config.js, so locate the ModuleFederationPlugin<\/em> section.<\/p>\n We expose all the components we want via this section and the shell app can then access them.\n<\/li>\n In your shell\/container application we also need to amend the webpack.config.js and locate the remotes<\/em> section, as you’ve probably worked out, this is going to register the micro frontends to be used within the shell\/container. So mine looks like this<\/p>\n Let’s see if this work, open the shell\/container’s App.tsx and add\/change it to look like the below<\/p>\n Run the about<\/em> app and then the shell and if all went to plan you’ll see the “About” component in the shell.<\/p>\n A little more in depth ModuleFederationPlugin<\/strong><\/p>\n This is really cool and we can see much of the work is done on the ModuleFederationPlugin, so let’s look a little more in depth into some of the key features<\/p>\n <\/p>\n\r\nimport React from "react";\r\n\r\nexport const About = () => \r\n(\r\n <div className="container">\r\n <div>Name: about<\/div>\r\n <div>Framework: react<\/div>\r\n <div>Language: TypeScript<\/div>\r\n <div>CSS: Empty CSS<\/div>\r\n <\/div>\r\n);\r\n<\/pre>\n
\r\nimport { About } from ".\/components\/About";\r\n\r\nconst App = () => (\r\n <About \/>\r\n);\r\n<\/pre>\n\n
\r\nexposes: {\r\n ".\/About": ".\/src\/components\/About"\r\n},\r\n<\/pre>\n\r\nremotes: {\r\n about: "about@http:\/\/localhost:3001\/remoteEntry.js"\r\n},\r\n<\/pre>\n\r\nimport { About } from 'about\/About';\r\n\r\nconst App = () => (\r\n <div> \r\n <div className="container">\r\n <div>Name: shell<\/div>\r\n <div>Framework: react<\/div>\r\n <div>Language: TypeScript<\/div>\r\n <div>CSS: Empty CSS<\/div>\r\n <\/div>\r\n <About \/>\r\n <\/div>\r\n);\r\n<\/pre>\n\n
\r\n"app-name": "name@remote-host\/entryFilename.js"\r\n<\/pre>\n<\/li>\n
\r\n"name" : "location-within-app"\r\n<\/pre>\n<\/li>\n