Microfrontends with React: A Complete Developer’s Guide
-
The Basics of MicrofrontendsJoin Our Community!Course ResourcesWhat is a Microfrontend?0sApplication Overview0sUnderstanding Build-Time Integration0sA Run-Time Integration0sProject Setup0sGenerating Products0sSome Background on Webpack0sA Touch More on Webpack0sFinishing the Product List0sScaffolding the Container0s
-
The Basics of Module Federation
-
Sharing Dependencies Between Apps
-
Linking Multiple Apps TogetherApplication Overview0sTech Stack0sRequirements That Drive Architecture Choices0sDependency FilesDependency Installation0sInitial Webpack Config0sCreating and Merging Development Config0sRunning Marketing in Isolation0sWiring Up React0sMarketing ComponentsAdding the Pricing and Landing Pages0s
-
Generic Ties Between Projects
-
Implementing a CI/CD PipelineRequirements Around Deployment0sThe Path to Production0sInitial Git Setup0sProduction Webpack Config for Container0sProduction Webpack Config for Marketing0sUnderstanding CI:CD Pipelines0sRequired Change in the Container Action – Do not SkipCreating the Container Action0sTesting the Pipeline0s
-
Deployment to Amazon Web ServicesS3 Bucket Setup0sAuthoring a Bucket Policy0sMinor Changes in AWS CloudFront UICloudfront Distribution Setup0sA Bit More Cloudfront Configuration0sKey Creation Update + Reminder on AWS_DEFAULT_REGIONCreating and Assigning Access Keys0sRerunning the Build0sA Small Error0sWebpacks PublicPath Setting0s
-
Microfrontend-Specific AWS ConfigManual Cache Invalidations0sAWS Region with Automatic InvalidationAutomated Invalidation0sSuccessful Invalidation0sSetting Up the Marketing Deployment0sReminder on the Production Domain0sRunning the Deployment0sVerifying Deployment0s[Optional] A Production-Style Workflow0sAWS Setup and Configuration Cheetsheet
-
Handling CSS in Microfrontends
-
Implementing Multi-Tier NavigationSmall Required Change to historyApiFallbackInflexible Requirements Around Navigation0sA Few Solutions0sWhich History Implementation?0sSurveying Our Current History Setup0sUsing Memory History0sWhy the Strange Results?0sCommunication Between Apps0sCommunicating Through Callbacks0sSyncing History Objects0sRunning Memory History in Isolation0sContainer to Child Communication0sUsing Browser History in Isolation0s
-
Performance ConsiderationStarting the Auth Project0sComponent FilesAdding Signin and Signup Forms0sA Deeper Dive on PublicPath0sSmall Required Change to historyApiFallbackLast Time for PublicPath0sIntegrating Auth into the Container0sAdding Initial State to Memory History0sLazily Loading SubApps0sAdding a Loading Bar0s
-
Authentication in Microfrontends
-
Using Other Frontend Frameworks
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 codebases
Use 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 users
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.
What's included
- 9 hours on-demand video
- 16 articles
- 57 downloadable resources
- Access on mobile and TV
- Certificate of completion