Microfrontends with React: A Complete Developer's Guide

9h 2m 34s
English
Paid

Course description

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.

Read more about the course

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:

  1. Author smaller, easier to understand codebases

  2. Use a different set of libraries for each sub-app - bring the best tool for the job!

  3. Deploy each portion separately - limit the chance of interrupting your users

  4. 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

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

Watch Online Microfrontends with React: A Complete Developer's Guide

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Testing React Apps with React Testing Library

Testing React Apps with React Testing Library

Sources: codewithmosh (Mosh Hamedani)
Tired of piecing together disconnected tutorials or dealing with rambling, confusing instructors? This course is for you! It's perfectly structured into a series of bite-sized, ...
6 hours 48 minutes 20 seconds
React Query: Server State Management in React

React Query: Server State Management in React

Sources: udemy
React Query has become the go-to solution for server state management in React apps, and for good reason! This smart, comprehensive solution makes it easy to ke
7 hours 39 minutes 49 seconds
Magic UI Pro

Magic UI Pro

Sources: Dillion Verma
Magic UI Pro is a platform for creating modern, visually appealing landing pages with minimal effort. It offers over 50 pre-designed...
Laravel with React JS - Build Twitter Like Real Time Web App

Laravel with React JS - Build Twitter Like Real Time Web App

Sources: udemy
Do you want to use React Js with Laravel to build powerful web applications? How about building a twitter like real time web app while learning Modern JavaScrip
4 hours 56 minutes 37 seconds
Mastering Next.js - 50+ Lesson Video Course on React and Next

Mastering Next.js - 50+ Lesson Video Course on React and Next

Sources: masteringnuxt.com
The premiere video course for building static and server-side rendered applications with Next.js and React. Sign up now and get two videos instantly!
5 hours 9 minutes 45 seconds