Microphone and Architecture Lecture Notes

Overview

• Discussion on application architecture using Microservices.
• Focus on using nginx to route requests.
• Decoupled applications with independent deployment by teams.

Current Architecture Challenges

• Problem: Each page navigation reloads the entire application, degrading user experience.
• Example: Navigating to /home or /checkout reloads the app each time.
• Impact: Unnecessary API requests and reduced responsiveness.

Proposed Solution: Webpack Module Federation

• Objective: Achieve a Single Page Application (SPA) experience by orchestrating multiple applications.
• How it Works: A single container app loads modules/components dynamically without full page reloads.
• Benefits: Improved user experience and efficiency.

Implementation Steps

1. Setup Applications

   • Create two applications: Main and Shop.
   • Main app contains shared components.
   • Use different ports for each app (Main: 3000, Shop: 3001).

2. Configure Webpack Module Federation

   • Import and configure the module federation plugin in next.config.js for both applications.
   • Main App Configuration: Connect to Shop app and expose shared components (header and footer).
   • Shop App Configuration: Connect to Main app and set up to dynamically import shared components.

3. Dynamically Import Components

   • Use dynamic imports to include components from Main in Shop.
   • Ensure styles are applied correctly to avoid duplication.

4. Create and Expose Additional Pages

   • Create a catalog page in both apps and expose it through module federation.
   • Enable navigation between Main and Shop without reloading.

5. Deploying Static Assets to S3

   • Build the Shop application for static asset export.
   • Upload build files to an S3 bucket.
   • Configure S3 for static website hosting.
   • Adjust Main app to pull components from the S3 URL instead of local host.

Final Notes

• Ensure cross-application communication works seamlessly.
• Monitor the network requests to verify remote entry points.
• Testing loading from S3 confirms successful deployment.

Conclusion

• Emphasis on improving SPA experiences through modular architecture.
• Future potential for further optimizations by leveraging module federation.