Microfrontends with React: A Complete Developer's Guide
Congratulations! You've found the most popular, most complete, and most up-to-date resource online for learning how to use microfrontends! Thousands of other engineers have learned microfrontends, and you can too. This course uses a time-tested, battle-proven method to make sure you understand exactly how microfrontends work, and will get you a new job working as a software engineer or help you build that app you've always been dreaming about.
More
The difference between this course and all the others: you will understand the design patterns used by top companies to build massively popular web apps.
Microfrontends are used to divide a large app into a series of smaller apps. This provides a set of unique benefits to any frontend:
Author smaller, easier to understand codebases
Use a different set of libraries for each sub-app - bring the best tool for the job!
Deploy each portion separately - limit the chance of interrupting your users
Allow each of your engineering teams to work independently
This new architecture is popular, but there is a lot of misinformation online. This course has been developed with input from top engineers to ensure total technical accuracy. Additionally, you'll learn how to evaluate whether microservices are a good choice for your application.
What will you build?
This course features hundreds of videos with dozens of custom diagrams to help you understand how microfrontends work. No prior experience is necessary. Through tireless, patient explanations and many interesting practical examples, you'll learn the fundamentals of building dynamic and live web apps using microfrontends.
Each topic included in this course is added incrementally, to make sure that you have a solid foundation of knowledge. You'll find plenty of discussion added in to help you understand exactly when and where to use each aspect of microfrontends.
Below is a partial list of the topics you'll find in this course:
Learn design patterns used by the largest companies in the world
Understand when to use microfrontends
Link multiple apps together using a tiered routing system
Scope CSS on your page to prevent cross-app contamination
Avoid sharing state between apps to promote isolation
Deploy each portion of your app independently to avoid production bugs
Scaffold a CI/CD pipeline to automate your release process
Utilize multiple front-end frameworks in the same app
Maximize performance by using module federation
I built this course to save you hundreds of hours of self study. I've put years of my own experience into this course to save you time. Sign up today and join me in mastering microfrontends.
Watch Online Microfrontends with React: A Complete Developer's Guide
| # | Title | Duration |
|---|---|---|
| 1 | What is a Microfrontend? | 04:48 |
| 2 | Application Overview | 02:53 |
| 3 | Understanding Build-Time Integration | 04:00 |
| 4 | A Build-Time Integration | 03:00 |
| 5 | Project Setup | 02:53 |
| 6 | Generating Products | 02:39 |
| 7 | Some Background on Webpack | 05:38 |
| 8 | A Touch More on Webpack | 07:04 |
| 9 | Finishing the Product List | 01:29 |
| 10 | Scaffolding the Container | 05:58 |
| 11 | Implementing Module Federation | 08:12 |
| 12 | Understanding Module Federation | 05:49 |
| 13 | More on Module Federation | 06:11 |
| 14 | Understanding Configuration Options | 08:30 |
| 15 | Scaffolding the Cart | 06:45 |
| 16 | Cart Integration | 03:18 |
| 17 | The Development Process | 03:08 |
| 18 | Using Shared Modules | 05:52 |
| 19 | Async Script Loading | 04:01 |
| 20 | Shared Module Versioning | 04:35 |
| 21 | Singleton Loading | 04:52 |
| 22 | Sub-App Execution Context | 05:02 |
| 23 | Refactoring Products | 06:49 |
| 24 | Consuming Remote Modules | 04:09 |
| 25 | Refactoring Cart | 04:04 |
| 26 | [Optional] A Funny Gotcha | 09:27 |
| 27 | Application Overview | 05:19 |
| 28 | Tech Stack | 02:15 |
| 29 | Requirements That Drive Architecture Choices | 11:33 |
| 30 | Dependency Installation | 01:09 |
| 31 | Initial Webpack Config | 07:13 |
| 32 | Creating and Merging Development Config | 03:16 |
| 33 | Running Marketing in Isolation | 03:03 |
| 34 | Wiring Up React | 06:50 |
| 35 | Adding the Pricing and Landing Pages | 01:11 |
| 36 | Assembling the App Component | 05:15 |
| 37 | Assembling the Container | 07:22 |
| 38 | Integration of the Container and Marketing | 08:36 |
| 39 | Why Import the Mount Function? | 04:50 |
| 40 | Generic Integration | 05:45 |
| 41 | Reminder on Shared Modules | 05:06 |
| 42 | Delegating Shared Module Selection | 06:05 |
| 43 | Requirements Around Deployment | 07:32 |
| 44 | The Path to Production | 05:34 |
| 45 | Initial Git Setup | 04:07 |
| 46 | Production Webpack Config for Container | 11:46 |
| 47 | Production Webpack Config for Marketing | 04:47 |
| 48 | Understanding CI:CD Pipelines | 04:12 |
| 49 | Creating the Container Action | 09:56 |
| 50 | Testing the Pipeline | 03:18 |
| 51 | S3 Bucket Setup | 06:41 |
| 52 | Authoring a Bucket Policy | 03:00 |
| 53 | Cloudfront Distribution Setup | 03:55 |
| 54 | A Bit More Cloudfront Configuration | 02:31 |
| 55 | Creating and Assigning Access Keys | 07:48 |
| 56 | Rerunning the Build | 00:59 |
| 57 | A Small Error | 05:17 |
| 58 | Webpacks PublicPath Setting | 03:21 |
| 59 | Manual Cache Invalidations | 05:24 |
| 60 | Automated Invalidation | 06:49 |
| 61 | Successful Invalidation | 01:51 |
| 62 | Setting Up the Marketing Deployment | 03:07 |
| 63 | Reminder on the Production Domain | 05:49 |
| 64 | Running the Deployment | 00:59 |
| 65 | Verifying Deployment | 04:20 |
| 66 | [Optional] A Production-Style Workflow | 08:42 |
| 67 | Adding a Header | 03:35 |
| 68 | Issues with CSS in Microfrontends | 04:22 |
| 69 | CSS Scoping Techniques | 10:41 |
| 70 | Understanding CSS in JS Libraries | 06:30 |
| 71 | So Whats the Bug? | 06:48 |
| 72 | Fixing Class Name Collisions | 06:04 |
| 73 | Verifying the Fix | 01:45 |
| 74 | Inflexible Requirements Around Navigation | 08:26 |
| 75 | A Few Solutions | 02:46 |
| 76 | Which History Implementation? | 06:16 |
| 77 | Surveying Our Current History Setup | 02:14 |
| 78 | Using Memory History | 03:58 |
| 79 | Why the Strange Results? | 04:43 |
| 80 | Communication Between Apps | 02:54 |
| 81 | Communicating Through Callbacks | 04:10 |
| 82 | Syncing History Objects | 07:10 |
| 83 | Running Memory History in Isolation | 02:13 |
| 84 | Container to Child Communication | 07:23 |
| 85 | Using Browser History in Isolation | 03:18 |
| 86 | Starting the Auth Project | 06:26 |
| 87 | Adding Signin and Signup Forms | 03:37 |
| 88 | A Deeper Dive on PublicPath | 11:57 |
| 89 | Last Time for PublicPath | 03:46 |
| 90 | Integrating Auth into the Container | 04:33 |
| 91 | Adding Initial State to Memory History | 07:52 |
| 92 | Lazily Loading SubApps | 07:53 |
| 93 | Adding a Loading Bar | 04:42 |
| 94 | Important Notes on Authentication | 04:49 |
| 95 | Implementation Strategies | 01:31 |
| 96 | Communicating Auth Changes | 04:59 |
| 97 | Communicating Authentication State | 05:49 |
| 98 | Allowing Signout | 01:41 |
| 99 | Adding an Auth Deploy Config | 03:16 |
| 100 | Verifying Deployment | 01:37 |
| 101 | Initial Dashboard Setup | 07:14 |
| 102 | A Touch More Config | 03:15 |
| 103 | Showing the Dashboard | 05:36 |
| 104 | Integration with the Container | 06:02 |
| 105 | Protecting Access to the Dashboard | 06:01 |
| 106 | Deploying the Dashboard | 02:35 |
| 107 | Verifying Deployment | 01:09 |
| 108 | Wrapup | 03:19 |
Similar courses to Microfrontends with React: A Complete Developer's Guide
React, NextJS and NestJS: A Rapid Guide - Advanced
React - The full course
Testing React Apps with React Testing Library
Next.js and Apollo - Portfolio App (w/ React, GraphQL, Node)
Server Side Rendering with React and Redux
The interactive way to master modern React - react.gg (FULL COURSE)
Understanding React | Don’t Imitate Understand
Full-Stack React with GraphQL and Apollo Boost
React Router v4
