![]() If you want to deploy them, you would deploy each app separately to their CDN or hosting service and configure the webpack definitions to use environment variables or some other way to update the URLs in the ModuleFederationPlugin definitions. We only covered running the Micro Frontend locally. You can simplify the development flow by configuring yarn workspaces at the root level: Deployment Now if we run npm start in both the host/ and remote/ directories we should see the Host app running on localhost:3000 and the remote app running on localhost:4000.Ĭongratulations! You've now configured a Micro Frontend app using React. Now the Remote app is fully configured and if you run npm start you should see a blank page with "Hello from the other side." Putting it all together Since we now have some knowledge of Module Federation, let’s use it from the get-go: This means our host app is configured, but our remote app is not exposing anything yet. Now, if we run npm start in the host app we should see something like: We are also importing all of our other dependencies from package.json and including them here, so we minimize the number of duplicate dependencies between our modules. As long as it satisfies the requiredVersion we define. ![]() To achieve this in our architecture, we are telling webpack to treat React and ReactDOM as singletons, so the first version loaded from any modules is used for the entire app. This is very important for React because it has a global state, meaning you should only ever run one instance of React and ReactDOM in any given app. shared is how we share dependencies between modules.The module's name is Remote, it is hosted on localhost:4000 and its module definition is moduleEntry.js. But we also define the location where the remote's module definition is hosted: This URL tells us three important things. You'll notice we specify Remote as the internal name so we can load the components using import("Remote/"). remotes is where we define the federated modules we want to consume in this app.Ideal for using YouTube or other streaming services. This revolutionary application for iOS devices is developed by ControlMeister. This allows you to control your Samsung TV with your phone or tablet. It is not as important here because we are not exposing anything, but it is vital in the Remote app. First of all, the best thing to do is to download the free Samsung TV remote app. name is used to distinguish the modules.We're going to use create-react-app to simplify the initial steps. Module Federation does support treating the host as a remote and making the architecture peer-to-peer if it fits your use case. The host app is the "main" app and remote is a sub-app plugging into it. We are building two applications: host and remote. You can follow along with the final code found here: ![]() ![]() Micro-frontends help us break large frontend applications into smaller independent applications or modules that can be built and deployed at their cadence.ĭoing this using Module Federation allows us to combine the applications at run time in the client’s browsers and eliminate build-time dependencies and coordination, allowing the teams building these applications to develop at scale. I will show you how to use it in a step-by-step guide to building a Host-Remote pattern micro-frontend in React. Module Federation is an excellent tool for constructing a micro-frontend architecture in React applications. How to Use Webpack Module Federation in React ☕ 8 min read ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |