Practice Labs
Micro Frontends Hands-on Practice Labs
Apply micro frontend theory in specialized client sandboxes. Configure Module Federation plugin settings, share React dependencies as singletons, and setup boundary error handling.
Host and Remote Setup
IntermediateAvailable
Goal: Create one shell app and one remote app using Module Federation.
HostRemoteremoteEntry.jsRuntime loading
Shared Dependency Lab
IntermediateAvailable
Goal: Share React and React DOM as singleton dependencies.
Shared dependenciesSingletonVersion alignmentBundle duplication
Remote Failure Fallback
SeniorAvailable
Goal: Show fallback UI when remote loading fails.
Error boundaryFallback UIGraceful degradationRuntime failure
Event Communication Lab
IntermediateAvailable
Goal: Send cart count update from Cart Remote to Shell Header.
Custom eventsEvent contractCart stateCross-app communication
Deployment Lab
ArchitectAvailable
Goal: Deploy shell and remote independently.
CI/CDCDN hostingRemote manifestRollback