• 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

Course Content:

Module1: Basics of Microfrontends

• What is Microfroneends
• A Run-Time Integration
• Build-Time vs Run-Time Integrations
• Important Versions Update / Boilerplate
• Project Setup
• Generating Products
• Some Background on Webpack
• A Touch More on Webpack
• Finishing the Product List
• Important Versions Update for Container
• Scaffolding the Container

Module4: Linking Multiple Apps Together

• 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

Module5: Generic Ties Between Projects:

• 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

Module6: Implementing a CI/ CD Pipeline

• 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

Module7: Deployment to Amazon Web Services

• 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 Public Path Setting

Module8: Microfrontend -Specific AWS Config

• 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

Module9: Handling CSS in Microfrontends

• 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

Module10: Implementing Multi -Tier Navigation

• Small Required Change to history Api Fallback
• 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

Module11: Performance Consideration

• Starting the Auth Project
• Component Files
• Adding Signin and Signup Forms
• A Deeper Dive on PublicPath
• Last Time for PublicPath
• Integrating Auth into the Container
• Adding Initial State to Memory History
• Lazily Loading SubApps
• Adding a Loading Bar

Module12: Using Other Frontend Frameworks

• Important Notes on Authentication
• Implementation Strategies
• Communicating Auth Changes
• Communicating Authentication State
• Allowing Signout
• Adding an Auth Deploy Config
• Verifying Deployment

Who this course is for:

Engineers looking to scale frontend apps

Course Prerequisite: