Microfrontends with React | Microfrontend Tutorial #microfrontends #react

Microfrontends with React | Microfrontend Tutorial #microfrontends #react
#besttutorial #microfrontendswithreact #whatismicrofrontend #reacttutorial #microfrontendandreact

** LECTURES **
01 Basics of Microfrontends
00:00:00 - 001 What is Microfrontend
00:04:47 - 002 Overview
00:07:39 - 003 Build Time Integration
00:11:38 - 004 A Build Time Integration
00:14:38 - 005 Project Setup
00:17:30 - 006 Generating Products
00:20:09 - 007 Background on Webpack
00:25:47 - 008 More on Webpack
00:32:50 - 009 Finishing Product List
00:34:18 - 010 Scaffolding Container
02 Basics of Module Federation
00:40:16 - 011 Implementing Module Federation
00:48:27 - 012 Understanding Module Federation
00:54:16 - 013 More on Module Federation
01:00:26 - 014 Understanding Configuration Options
01:08:55 - 015 Scaffolding Cart
01:15:39 - 016 Cart Integration
01:18:57 - 017 Development Process
03 Sharing Dependencies Between Apps
01:22:05 - 018 Using Shared Modules
01:27:56 - 019 Async Script Loading
01:31:57 - 020 Shared Module Versioning
01:36:31 - 021 Singleton Loading
01:41:23 - 022 Sub App Execution Context
01:46:24 - 023 Refactoring Products
01:53:13 - 024 Consuming Remote Modules
01:57:21 - 025 Refactoring Cart
02:01:24 - 026 A Funny Gotcha
04 Linking Multiple Apps Together
02:10:51 - 027 Overview
02:16:09 - 028 Tech Stack
02:18:23 - 029 Requirements That Drive Architecture Choices
02:29:56 - 030 Dependency Installation
02:31:05 - 031 Initial Webpack Config
02:38:17 - 032 Creating and Merging Development Config
02:41:32 - 033 Running Marketing in Isolation
02:44:35 - 034 Wiring Up React
02:51:24 - 035 Adding Pricing and Landing Pages
05 Generic Ties Between Projects
02:52:35 - 036 Assembling App Component
02:57:49 - 037 Assembling Container
03:05:10 - 038 Integration of Container and Marketing
03:13:46 - 039 Why Import Mount Function
03:18:36 - 040 Generic Integration
03:24:20 - 041 Reminder on Shared Modules
03:29:26 - 042 Delegating Shared Module Selection
06 Implementing a CICD Pipeline
03:35:31 - 043 Requirements Around Deployment
03:43:02 - 044 Path to Production
03:48:36 - 045 Initial Git Setup
03:52:42 - 046 Production Webpack Config for Container
04:04:27 - 047 Production Webpack Config for Marketing
04:09:14 - 048 Understanding CICD Pipelines
04:13:25 - 049 Creating Container Action
04:23:20 - 050 Testing Pipeline
07 Deployment to Amazon Web Services
04:26:38 - 051 S3 Bucket Setup
04:33:19 - 052 Authoring a Bucket Policy
04:36:18 - 053 Cloudfront Distribution Setup
04:40:12 - 054 Cloudfront Configuration
04:42:42 - 055 Creating & Assigning Access Keys
04:50:30 - 056 Rerunning Build
04:51:28 - 057 A Small Error
04:56:44 - 058 Webpacks PublicPath Setting
08 Microfrontend Specific AWS Config
05:00:05 - 059 Manual Cache Invalidations
05:05:29 - 060 Automated Invalidation
05:12:18 - 061 Successful Invalidation
05:14:09 - 062 Setting Up Marketing Deployment
05:17:15 - 063 Reminder on Production Domain
05:23:03 - 064 Running Deployment
05:24:01 - 065 Verifying Deployment
05:28:21 - 066 Production Style Workflow
09 Handling CSS in Microfrontends
05:37:03 - 067 Adding a Header
05:40:37 - 068 Issues with CSS in Microfrontends
05:44:59 - 069 CSS Scoping Techniques
05:55:39 - 070 CSS in JS Libraries
06:02:09 - 071 So Whats Bug
06:08:57 - 072 Fixing Class Name Collisions
06:15:00 - 073 Verifying Fix
10 Implementing Multi Tier Navigation
06:16:44 - 074 Inflexible Requirements Around Navigation
06:25:10 - 075 A Few Solutions
06:27:56 - 076 Which History Implementation
06:34:11 - 077 Surveying Our Current History Setup
06:36:24 - 078 Using Memory History
06:40:21 - 079 Why Strange Results
06:45:04 - 080 Communication Between Apps
06:47:57 - 081 Communicating Through Callbacks
06:52:06 - 082 Syncing History Objects
06:59:16 - 083 Running Memory History in Isolation
07:01:28 - 084 Container to Child Communication
07:08:50 - 085 Using Browser History in Isolation
11 Performance Considerations
07:12:08 - 086 Starting Auth Project
07:18:34 - 087 Adding Signin and Signup Forms
07:22:10 - 088 A Deeper Dive on PublicPath
07:34:07 - 089 Last Time for PublicPath
07:37:52 - 090 Integrating Auth into Container
07:42:25 - 091 Adding Initial State to Memory History
07:50:16 - 092 Lazily Loading SubApps
07:58:09 - 093 Adding a Loading Bar
12 Authentication in Microfrontends
08:02:51 - 094 Notes on Authentication
08:07:40 - 095 Implementation Strategies
08:09:11 - 096 Communicating Auth Changes
08:14:09 - 097 Communicating Authentication State
08:19:58 - 098 Allowing Signout
08:21:38 - 099 Adding Auth Deploy Config
08:24:54 - 100 Verifying Deployment
13 Using Other Frontend Frameworks
08:26:31 - 101 Initial Dashboard Setup
08:33:44 - 102 More on Config
08:36:58 - 103 Showing Dashboard
08:42:33 - 104 Integration with Container
08:48:35 - 105 Protecting Access to Dashboard
08:54:35 - 106 Deploying Dashboard
08:57:09 - 107 Verifying Deployment