IIRF Online > Development > Web Development > React JS > Microfrontends with React: A Complete Developer's Guide
Microfrontends with React: A Complete Developer's Guide by Udemy
Build incredibly scalable apps with a microfrontend architecture
Course Highlights
- 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
Skills you will learn!
Curriculum
13 Topics
Join Our Community!
Course Resources
What is a Microfrontend?
Application Overview
Understanding Build-Time Integration
A Run-Time Integration
Build-Time vs Run-Time Integrations
Project Setup
Generating Products
Some Background on Webpack
A Touch More on Webpack
Finishing the Product List
Scaffolding the Container
8 Topics
Implementing Module Federation
Understanding Module Federation
More on Module Federation
Module Federation Terminology
Understanding Configuration Options
Scaffolding the Cart
Cart Integration
The Development Process
9 Topics
Using Shared Modules
Async Script Loading
Shared Module Versioning
Singleton Loading
Sub-App Execution Context
Refactoring Products
Consuming Remote Modules
Refactoring Cart
[Optional] A Funny Gotcha
11 Topics
Application Overview
Tech Stack
Requirements That Drive Architecture Choices
Dependency Files
Dependency Installation
Initial Webpack Config
Creating and Merging Development Config
Running Marketing in Isolation
Wiring Up React
Marketing Components
Adding the Pricing and Landing Pages
7 Topics
Assembling the App Component
Assembling the Container
Integration of the Container and Marketing
Why Import the Mount Function?
Generic Integration
Reminder on Shared Modules
Delegating Shared Module Selection
9 Topics
Requirements Around Deployment
The Path to Production
Initial Git Setup
Production Webpack Config for Container
Production Webpack Config for Marketing
Understanding CI:CD Pipelines
Required Change in the Container Action - Do not Skip
Creating the Container Action
Testing the Pipeline
10 Topics
S3 Bucket Setup
Authoring a Bucket Policy
Minor Changes in AWS CloudFront UI
Cloudfront Distribution Setup
A Bit More Cloudfront Configuration
Key Creation Update + Reminder on AWS_DEFAULT_REGION
Creating and Assigning Access Keys
Rerunning the Build
A Small Error
Webpacks PublicPath Setting
10 Topics
Manual Cache Invalidations
AWS Region with Automatic Invalidation
Automated Invalidation
Successful Invalidation
Setting Up the Marketing Deployment
Reminder on the Production Domain
Running the Deployment
Verifying Deployment
[Optional] A Production-Style Workflow
AWS Setup and Configuration Cheetsheet
8 Topics
Header Component
Adding a Header
Issues with CSS in Microfrontends
CSS Scoping Techniques
Understanding CSS in JS Libraries
So Whats the Bug?
Fixing Class Name Collisions
Verifying the Fix
13 Topics
Small Required Change to historyApiFallback
Inflexible Requirements Around Navigation
A Few Solutions
Which History Implementation?
Surveying Our Current History Setup
Using Memory History
Why the Strange Results?
Communication Between Apps
Communicating Through Callbacks
Syncing History Objects
Running Memory History in Isolation
Container to Child Communication
Using Browser History in Isolation
10 Topics
Starting the Auth Project
Component Files
Adding Signin and Signup Forms
A Deeper Dive on PublicPath
Small Required Change to historyApiFallback
Last Time for PublicPath
Integrating Auth into the Container
Adding Initial State to Memory History
Lazily Loading SubApps
Adding a Loading Bar
7 Topics
Important Notes on Authentication
Implementation Strategies
Communicating Auth Changes
Communicating Authentication State
Allowing Signout
Adding an Auth Deploy Config
Verifying Deployment
10 Topics
Initial Dashboard Setup
A Touch More Config
Component Files
Showing the Dashboard
Integration with the Container
Protecting Access to the Dashboard
Deploying the Dashboard
Verifying Deployment
Wrapup
Bonus!
Microfrontends with React: A Complete Developer's Guide
Related React JS Courses
Thank You!
Your review has been submitted successfully.