Microfrontends with React: A Complete Developer's Guide

Designate a host and remote, configure the webpack module federation plugin in both container and products, expose the remote index, and bootstrap loading to render remote content in the host.

Demonstrate how the module federation plugin emits remoteEntry.js and associated files, enabling the container to load product code like src_index.js and faker from the products project.

Explore how the module federation plugin, via index.js, fetches remote code from the products project and loads bootstrap.js only after Webpack resolves dependencies.

Learn how to configure webpack module federation in a host container, including remotes, exposes, and the remoteEntry.js, with aliasing and name controls for ProductsIndex imports.

Scaffold a cart micro frontend in a React setup by creating a cart folder and configuring module federation, then render faker-generated text showing cart items on its dev server.

Integrate the cart into a container by loading the remote cart entry via Webpack federation, importing cart show, and rendering the cart-dev div alongside product lists on localhost:8080.

Demonstrates developing a microfrontends app by isolating products and cart teams, using the module federation plugin, running apps on local hosts, and composing them in a container for production.

Use the webpack Module Federation plugin to share the faker module between cart and products, then restart webpack to resolve the eager consumption error in isolation.

Learn to load scripts asynchronously in microfrontends by structuring Bootstrap files, importing Bootstrap modules, and letting Webpack resolve dependencies like faker to ensure modules load in the correct order.

Explore how the module federation plugin loads separate copies of a shared module when cart and products require different versions. Learn how major versions and caret notation influence sharing.

Learn how webpack's shared option and singleton true enforce a single copy of faker, even when loaded multiple times, and how version mismatches trigger a warning about 5.1.0 vs 4.1.0.

Refactor the product bootstrap to support running micro-frontends in isolation or inside a container, addressing missing dom elements and context-aware rendering for development and container scenarios.

Create a mount function that renders the products app into an HTML element. Export mount for container use and include development mode checks with a dev-products marker to support isolation.

Consume remote modules by exporting a mount function from a microfrontend, render the product list into a host element, and coordinate with webpack module federation.

Refactor the cart by adding a mount function that renders into a provided element, enabling isolated micro frontend development and container-driven rendering via the bootstrap file and updated webpack config.

Take a behind-the-scenes look at module federation remote entry bug, where a DOM id collides with a global cart variable, and learn how to avoid this naming conflict in microfrontends.

Learn to wire multiple frameworks and navigate a landing page, pricing, authentication, and a dashboard for microfrontends. Use mockups with fake data to emphasize deployment and team structure.

Design a microfrontend architecture with marketing, authentication, and dashboard front ends, coordinated by a container, using React for marketing and authentication, Vue for the dashboard, and generic interfaces for swaps.

Explore five inflexible requirements that drive microfrontends architecture: zero coupling between child projects, container and child interface isolation, css isolation, and deployment versioning choices.

Extract the mfp.zip file, navigate to mfp/packages/auth and the other sub-project folders, and run npm install to install dependencies for each project; proceed to the next video after setup.

Wire up webpack configurations from scratch for multiple sub-projects, creating common, development, and production configs and integrating babel with React support to run in isolation.

Merge development webpack config with the common config using webpack-merge, and apply the HTML webpack plugin to inject scripts for the dev server on port 81 with history API fallback.

Set up marketing app with src and public folders, add index.html and index.js, run webpack dev server with a custom config, and verify localhost:8081 logs 'hi there'.

Set up a basic react app scaffold, create a bootstrap flow, and implement a mount function to render content in isolation or inside a container, using react-dom.

Extract the marketing components zip, drag the components folder into src to add the landing and pricing pages, then wire them up in the next video.

Wire up the app by creating an app.js component that renders Landing and Pricing, wire it into bootstrap.js with react-router-dom's BrowserRouter, Switch, and Route, and introduce StylesProvider.

Set up a container with a basic React app, mirror marketing's webpack config, wire bootstrap and app components, and run separate dev servers to explore micro frontends and container integration.

Join the marketing and container apps using the module federation plugin, configuring webpack dev.js and remoteEntry.js to expose and load the marketing app as a remote host.

Explore why we use a generic mount function to render content into an HTML element, avoiding React component exports and keeping container and marketing coupling minimal in microfrontends.

Explore how to mount MarketingApp inside a container by using React with useRef and useEffect to render it into a div, enabling framework-agnostic cross-app integration.

See how module federation loads two copies of React and ReactDOM across container and marketing app. Configure shared modules for React and ReactDOM, restart, and ensure only one copy remains.

Use a webpack.dev.js shortcut to auto-share dependencies from package.json, replacing manual shared module arrays. This reduces maintenance as dependencies evolve and shows impact on development bundle size.

Discover deployment requirements for microfrontends with React, including independent per-subproject deployments, build-time remoteEntry.js URLs, and production workflow with module federation and caching considerations.

Push a git monorepo with four sub-projects to GitHub, then selectively build and deploy changed parts to production on S3 via CloudFront, using webpack and a change-detection script.

Initialize a local git repo with git init, create a new GitHub mfe repository, ignore node_modules and dist with .gitignore, commit, and push to origin.

Merge common and prod webpack configs to build a container app, define ModuleFederationPlugin remotes with a production domain from PRODUCTION_DOMAIN, and enable contenthash filenames for caching.

Produce a production webpack config for marketing by merging common and prod settings, configuring ModuleFederationPlugin with MarketingApp exposes and remoteEntry.js, then build and prepare CI/CD deployment.

Set up a ci/cd pipeline with GitHub actions to automatically build and deploy subprojects to aws s3, with four workflows for container, marketing, authentication, and dashboard.

Create a container deployment workflow in GitHub Actions by adding a container.yml under .github/workflows, install dependencies, build, and sync the build to an S3 bucket via AWS CLI.

Test and validate the git hub action by pushing changes, monitoring the deploy-container workflow, and confirming npm install and npm run build, while noting webpack output and aws deployment.

Create and configure an Amazon S3 bucket in the AWS management console, enable static website hosting with index.html and an error document, and prepare for public access via CloudFront.

Generate an S3 bucket policy with the policy generator to allow cloud front to get object from the bucket, then copy the bucket ARN into the policy and save.

Create a web CloudFront distribution from your S3 bucket, configure the origin, redirect http to https, and use the default cloudfront.net domain; monitor deployment until deployed.

Update the CloudFront distribution by setting the default root object to /container/latest/index.html and add a 403 error response that returns that file with a 200 status, then sync to S3.

Create and assign AWS access keys for a GitHub action by generating an IAM user, granting s3 and cloudfront access, and storing keys as encrypted GitHub secrets.

Rerun the GitHub action to rebuild and upload the project files to Amazon S3 after loading secrets, review the workflow in the actions tab, and confirm the successful transfer.

Test the deployed microfrontend app on AWS S3 and CloudFront, diagnose production errors such as unexpected token and access issues, and adjust the HTML webpack plugin to reference container/latest main.js.

Set the webpack production publicPath to container/latest so HTML plugin generates correct URLs for main.js in the S3 bucket, then commit and push to origin master to trigger GitHub actions.

Identify and fix CloudFront caching issues after deploying a new version by inspecting S3 assets, verifying index.html, and creating an invalidation to serve the latest main.js.

Automate CloudFront invalidation for index.html using GitHub workflows and AWS CLI, store distribution id as a secret, and test via automated builds to ensure the latest index.html loads.

Learn how to manage CloudFront cache invalidations for microfrontends by invalidating each remoteEntry.js file after deployment and integrating invalidation steps into GitHub workflows.

Set up a marketing deployment by creating a marketing.yml workflow, deploying dist files to s3 under marketing/latest, and configuring cloudfront invalidation for remoteEntry.js.

Set up the production domain secret in GitHub, expose it as an environment variable for the container build, and configure webpack prod and public path for the marketing remote entry.

Execute deployment by committing changes, pushing to master, and monitoring GitHub Actions. Inspect the Actions and build tabs to verify container and marketing deployments complete successfully.

Verify deployment by reviewing the CloudFront site, confirming content loads from the marketing remoteEntry in the correct S3 path, and understanding shared modules for multi-team workflows.

Emphasize a production-style workflow with feature branches like container-dev, pull requests for code review, merge into master, and GitHub Actions deployments to production.

Drag the Header.js component into the container, import and render it in App.js with BrowserRouter, then push to production to observe deployment differences between development and production.

Explore how CSS conflicts arise in micro-frontends as you navigate between the pricing page and sign-in page. See why styles from one sub-application can affect another in a single-page app.

Explore css scoping techniques for micro frontends using css-in-js, framework auto-scoping, and manual namespaces; learn how to manage external libraries like Bootstrap and avoid global css conflicts.

Explore how CSS in JS libraries like Material UI generate dynamic class names with makeStyles and useStyles, and why class name collisions across projects cause production bugs.

Learn how production builds generate shorter class names like jss1, causing css-in-js collisions across separate projects that share the same css-in-js library, and why this produces unexpected styling.

Configure production prefix for class names to prevent collisions by using create generate class name and styles provider, assigning prefixes ma for marketing and co for container for each sub-project.

Verify the fix for class name collisions by inspecting headers and hero sections, and learn how css-in-js libraries, like Material UI, generate random class names and how to customize them.

Define routing requirements for container and subapplications to navigate between home, pricing, signup, and signin. Use off-the-shelf routing libraries and plan for hosted and isolated modes, with generic cross-app communication.

Learn how a container and sub apps host independent React Router instances, implement two tier routing to load the right micro frontends from the URL, and plan for multiple frontends.

Discover how routing libraries use history objects and routers, compare browser, memory, and hash histories, and why browser history in the container avoids race conditions with child histories.

Audit current React Router usage in the container and marketing apps, then plan to replace Browser Router with Memory History to ensure synchronized navigation and a seamless user experience.

Explore replacing browser router with a memory history router in a React microfrontends setup, creating a memory history in bootstrap.js, passing it to app, and debugging navigation and URL updates.

Explain how browser history and memory history initialize and update during navigation, causing mismatched urls, and outline syncing strategies across container and marketing routers.

Coordinate two-way history syncing between the Marketing and Container apps by using simple event-based communication to update each app's memory and browser history, avoiding direct exchange of complex objects.

Illustrates communicating between a container and a marketing microfrontend using an onNavigate callback. The marketing app calls history.listen to notify the container of path changes like /pricing.

Learn to sync navigation between marketing and container apps using onNavigate, the location pathname, and nextPathname with history.push, while preventing infinite loops.

Provide an empty options object to mount and guard history.listen with onNavigate to fix isolation errors, ensuring memory history runs correctly for the microfrontend.

Implement container-to-child communication in microfrontends by returning onParentNavigate from the MarketingApp mount, listening to the container history, and syncing navigation paths across apps.

Use a browser history in isolation to see the current URL during development, replacing memory history and updating the mount logic to accept a default history.