Microfrontends with React A Complete Developers Guide

Build incredibly scalable apps with a microfrontend architecture
Microfrontends with React A Complete Developers Guide
File Size :
4.09 GB
Total length :
9h 7m



Stephen Grider


Last update




Microfrontends with React A Complete Developers Guide

What you’ll learn

Use microfrontends to architect an app that dozens of teams can work on at the same time
Structure your apps to scale to millions of users
Understand how to divide a monolithic app into multiple sub-apps
Coordinate data exchanged between your microfrontends
Apply a production-style workflow with a full CI/CD pipeline
Deploy your microfrontends to Amazon Web Services with CloudFront
Isolate rules styling by applying CSS-scoping techniques
Judge whether microfrontends are an appropriate choice for your application

Microfrontends with React A Complete Developers Guide


Basic understanding of React


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.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 codebasesUse 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 usersAllow each of your engineering teams to work independentlyThis 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 worldUnderstand when to use microfrontendsLink multiple apps together using a tiered routing systemScope CSS on your page to prevent cross-app contaminationAvoid sharing state between apps to promote isolationDeploy each portion of your app independently to avoid production bugsScaffold a CI/CD pipeline to automate your release processUtilize multiple front-end frameworks in the same appMaximize performance by using module federationI 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.


Section 1: The Basics of Microfrontends

Lecture 1 Join Our Community!

Lecture 2 Course Resources

Lecture 3 What is a Microfrontend?

Lecture 4 Application Overview

Lecture 5 Understanding Build-Time Integration

Lecture 6 A Run-Time Integration

Lecture 7 Important Versions Update / Boilerplate

Lecture 8 Project Setup

Lecture 9 Generating Products

Lecture 10 Some Background on Webpack

Lecture 11 A Touch More on Webpack

Lecture 12 Finishing the Product List

Lecture 13 Important Versions Update for Container

Lecture 14 Scaffolding the Container

Section 2: The Basics of Module Federation

Lecture 15 Implementing Module Federation

Lecture 16 Understanding Module Federation

Lecture 17 More on Module Federation

Lecture 18 Understanding Configuration Options

Lecture 19 Scaffolding the Cart

Lecture 20 Cart Integration

Lecture 21 The Development Process

Section 3: Sharing Dependencies Between Apps

Lecture 22 Using Shared Modules

Lecture 23 Async Script Loading

Lecture 24 Shared Module Versioning

Lecture 25 Singleton Loading

Lecture 26 Sub-App Execution Context

Lecture 27 Refactoring Products

Lecture 28 Consuming Remote Modules

Lecture 29 Refactoring Cart

Lecture 30 [Optional] A Funny Gotcha

Section 4: Linking Multiple Apps Together

Lecture 31 Application Overview

Lecture 32 Tech Stack

Lecture 33 Requirements That Drive Architecture Choices

Lecture 34 Dependency Files

Lecture 35 Dependency Installation

Lecture 36 Initial Webpack Config

Lecture 37 Creating and Merging Development Config

Lecture 38 Running Marketing in Isolation

Lecture 39 Wiring Up React

Lecture 40 Marketing Components

Lecture 41 Adding the Pricing and Landing Pages

Section 5: Generic Ties Between Projects

Lecture 42 Assembling the App Component

Lecture 43 Assembling the Container

Lecture 44 Integration of the Container and Marketing

Lecture 45 Why Import the Mount Function?

Lecture 46 Generic Integration

Lecture 47 Reminder on Shared Modules

Lecture 48 Delegating Shared Module Selection

Section 6: Implementing a CI/CD Pipeline

Lecture 49 Requirements Around Deployment

Lecture 50 The Path to Production

Lecture 51 Initial Git Setup

Lecture 52 Production Webpack Config for Container

Lecture 53 Production Webpack Config for Marketing

Lecture 54 Understanding CI:CD Pipelines

Lecture 55 Required Change in the Container Action – Do not Skip

Lecture 56 Creating the Container Action

Lecture 57 Testing the Pipeline

Section 7: Deployment to Amazon Web Services

Lecture 58 S3 Bucket Setup

Lecture 59 Authoring a Bucket Policy

Lecture 60 Minor Changes in AWS CloudFront UI

Lecture 61 Cloudfront Distribution Setup

Lecture 62 A Bit More Cloudfront Configuration

Lecture 63 Reminder on the AWS_DEFAULT_REGION

Lecture 64 Creating and Assigning Access Keys

Lecture 65 Rerunning the Build

Lecture 66 A Small Error

Lecture 67 Webpacks PublicPath Setting

Section 8: Microfrontend-Specific AWS Config

Lecture 68 Manual Cache Invalidations

Lecture 69 AWS Region with Automatic Invalidation

Lecture 70 Automated Invalidation

Lecture 71 Successful Invalidation

Lecture 72 Setting Up the Marketing Deployment

Lecture 73 Reminder on the Production Domain

Lecture 74 Running the Deployment

Lecture 75 Verifying Deployment

Lecture 76 [Optional] A Production-Style Workflow

Lecture 77 AWS Setup and Configuration Cheetsheet

Section 9: Handling CSS in Microfrontends

Lecture 78 Header Component

Lecture 79 Adding a Header

Lecture 80 Issues with CSS in Microfrontends

Lecture 81 CSS Scoping Techniques

Lecture 82 Understanding CSS in JS Libraries

Lecture 83 So Whats the Bug?

Lecture 84 Fixing Class Name Collisions

Lecture 85 Verifying the Fix

Section 10: Implementing Multi-Tier Navigation

Lecture 86 Small Required Change to historyApiFallback

Lecture 87 Inflexible Requirements Around Navigation

Lecture 88 A Few Solutions

Lecture 89 Which History Implementation?

Lecture 90 Surveying Our Current History Setup

Lecture 91 Using Memory History

Lecture 92 Why the Strange Results?

Lecture 93 Communication Between Apps

Lecture 94 Communicating Through Callbacks

Lecture 95 Syncing History Objects

Lecture 96 Running Memory History in Isolation

Lecture 97 Container to Child Communication

Lecture 98 Using Browser History in Isolation

Section 11: Performance Considerations

Lecture 99 Starting the Auth Project

Lecture 100 Component Files

Lecture 101 Adding Signin and Signup Forms

Lecture 102 A Deeper Dive on PublicPath

Lecture 103 Last Time for PublicPath

Lecture 104 Integrating Auth into the Container

Lecture 105 Adding Initial State to Memory History

Lecture 106 Lazily Loading SubApps

Lecture 107 Adding a Loading Bar

Section 12: Authentication in Microfrontends

Lecture 108 Important Notes on Authentication

Lecture 109 Implementation Strategies

Lecture 110 Communicating Auth Changes

Lecture 111 Communicating Authentication State

Lecture 112 Allowing Signout

Lecture 113 Adding an Auth Deploy Config

Lecture 114 Verifying Deployment

Section 13: Using Other Frontend Frameworks

Lecture 115 Initial Dashboard Setup

Lecture 116 A Touch More Config

Lecture 117 Component Files

Lecture 118 Showing the Dashboard

Lecture 119 Integration with the Container

Lecture 120 Protecting Access to the Dashboard

Lecture 121 Deploying the Dashboard

Lecture 122 Verifying Deployment

Lecture 123 Wrapup

Section 14: Bonus!

Lecture 124 Bonus!

Engineers looking to scale frontend apps

Course Information:

Udemy | English | 9h 7m | 4.09 GB
Created by: Stephen Grider

You Can See More Courses in the Developer >> Greetings from CourseDown.com

New Courses

Scroll to Top