CF

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 is one of the longest-running and most prolific instructors on Udemy, with a catalog covering essentially every major JavaScript framework, plus Docker, Kubernetes, AWS, and the broader full-stack development landscape. His teaching style is patient and project-oriented — most of his courses are structured around building a substantial application from scratch rather than working through disconnected tutorial examples.

The catalog covers React, Redux, Next.js, Vue, Angular, GraphQL, Node.js, Docker / Kubernetes, AWS infrastructure, React Native and Flutter for mobile, the algorithm / data-structure interview prep track, and the modern TypeScript / Bun / Rust adjacent material that working JavaScript developers increasingly encounter. Few independent instructors have maintained Stephen's breadth this consistently for this long.

The CourseFlix listing under this source carries over 25 Stephen Grider courses spanning that range. Material is paid; Stephen Grider courses are typically sold individually on Udemy. Courses are aimed primarily at developers picking up a specific technology through working through a complete project.

Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

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

Related courses

Frequently asked questions

What prior knowledge do I need before enrolling in this course?
No prior experience is required to enroll in this course. The course is designed to guide you through the concepts of microfrontends from the ground up. Lessons such as 'What is a Microfrontend?' and 'Understanding Build-Time Integration' provide foundational knowledge. The instructor ensures that even beginners can follow along with engaging examples and clear explanations.
What kind of projects will I build during this course?
Throughout the course, you will work on building dynamic and live web applications using microfrontends. You'll learn to transform a large application into a series of smaller, manageable sub-apps. Key lessons include 'Generating Products', 'Scaffolding the Container', and 'Cart Integration', which guide you in developing functional sub-applications with a focus on modular and scalable design.
Who is the target audience for this course?
This course is ideal for software engineers and developers looking to advance their skills in web application architecture. It's particularly suited for those interested in microfrontends and modular application design. Whether you're a beginner or have some experience, the course provides valuable insights and practical examples to enhance your understanding and application of microfrontends.
How does this course compare in depth and scope to other similar courses?
The course offers an extensive exploration of microfrontends, covering both foundational and advanced topics. Unlike other courses, it includes lessons on 'Implementing Module Federation', 'Singleton Loading', and 'Shared Module Versioning', ensuring a thorough understanding of modular application development. This depth makes it a comprehensive resource for mastering microfrontends with React.
What specific tooling and platforms are covered in the course?
The course covers various tools and platforms essential for microfrontend development. Key lessons address 'Webpack Configurations', 'Understanding CI:CD Pipelines', and 'Cloudfront Distribution Setup'. These topics equip you with the skills to handle build processes, deployment, and continuous integration using industry-standard tools and platforms.
What topics are not covered in this course?
While the course provides a thorough guide to microfrontends, it does not cover server-side rendering or backend development in detail. The focus is primarily on frontend architecture using microfrontends, particularly with React and Webpack, and does not delve into other frontend frameworks or backend technologies.
How much time should I expect to commit to this course?
The course comprises 108 lessons, featuring hundreds of videos and dozens of custom diagrams. While the total runtime is unspecified, prospective students should prepare to invest a significant amount of time to work through the lessons, projects, and practical examples. The comprehensive content requires a dedicated time commitment to fully grasp the concepts and apply them effectively.