Skip to main content

Microfrontends with React: A Complete Developer's Guide

9h 2m 34s
English
Paid

Welcome to the ultimate guide on Microfrontends with React! This course is the most comprehensive, up-to-date resource available online for learning how to effectively use microfrontends. Join thousands of engineers who have already mastered microfrontends and advance your software engineering career or realize your app-building dreams with our proven methods.

Why This Course Stands Out

Unlike other courses, you will delve into the design patterns that top companies use to develop highly successful web applications. By understanding these principles, you can transform a large application into a series of smaller, manageable sub-apps.

Benefits of Using Microfrontends

  • Author smaller, easier-to-understand codebases
  • Use distinct libraries for each sub-app—choose the best tool for each task!
  • Deploy each segment independently to reduce user disruption
  • Empower your engineering teams to work autonomously

This architecture is gaining popularity, yet misinformation abounds. Our course, developed with input from top engineers, ensures technical precision. You will also learn to assess whether microservices suit your application needs.

Course Highlights: What You'll Build

This course includes hundreds of videos and dozens of custom diagrams to demystify microfrontends. No prior experience is required. Through clear, patient explanations and engaging practical examples, you'll master building dynamic and live web apps using microfrontends.

Your knowledge will be built incrementally, providing a strong foundation. Discussions throughout will aid in understanding when and where to apply various aspects of microfrontends effectively.

Key Topics Covered

  • Design patterns employed by leading global companies
  • Recognizing the right context to use microfrontends
  • Linking apps with a sophisticated tiered routing system
  • CSS scoping to prevent cross-app contamination
  • Preventing cross-app state sharing for enhanced isolation
  • Deploying individual app segments independently to avoid production bugs
  • Setting up a CI/CD pipeline to automate release processes
  • Integrating multiple front-end frameworks in one application
  • Enhancing performance using module federation

I created this course to save you countless hours of independent study. With years of experience distilled into this content, enroll today and join me in achieving mastery over microfrontends.

About the Authors

Stephen Grider

Stephen Grider thumbnail
Stephen Grider has been building complex Javascript front ends for top corporations in the San Francisco Bay Area. With an innate ability to simplify complex topics, Stephen has been mentoring engineers beginning their careers in software development for years, and has now expanded that experience onto Udemy, authoring the highest rated React course. He teaches on Udemy to share the knowledge he has gained with other software engineers. Invest in yourself by learning from Stephen's published courses.

udemy

udemy thumbnail
By connecting students all over the world to the best instructors, Udemy is helping individuals reach their goals and pursue their dreams. Udemy is the leading global marketplace for teaching and learning, connecting millions of students to the skills they need to succeed. Udemy helps organizations of all kinds prepare for the ever-evolving future of work. Our curated collection of top-rated business and technical courses gives companies, governments, and nonprofits the power to develop in-house expertise and satisfy employees’ hunger for learning and development.

Watch Online 108 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 108 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: What is a Microfrontend?
All Course Lessons (108)
#Lesson TitleDurationAccess
1
What is a Microfrontend? Demo
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
Unlock unlimited learning

Get instant access to all 107 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription