Overview

This article discusses the process of getting started with Main SPA, a project that is bootstrapped with Create React App. It explains how to deploy the Container Application in GitHub Pages and integrate micro-frontends using the microfrontend-typescript template. The article also emphasizes the importance of careful control over globals in the micro-frontend architecture.

Features

• Bootstrapped with Create React App
• Deployed in GitHub Pages
• Integration of micro-frontends using the microfrontend-typescript template
• Capability to launch a React micro-frontend application
• Ability to subscribe/unsubscribe from events dispatched from the micro-frontend
• Easy and quick setup of new micro-frontends
• Support for routing in micro-frontends
• Flexibility in choosing the load type of micro-frontends (optimized or not optimized)

Installation

To get started with Main SPA and integrate micro-frontends, follow these steps:

1. Bootstrap the micro-frontend using the microfrontend-typescript template.
2. Add a new MicroFrontend component in the Microfrontends.tsx file of the container app.
3. Set up a new Route for the micro-frontend.
4. Optionally, add a new link in the menu for navigation to the micro-frontend.
5. Ensure proper setup and usage of routes in the micro-frontend app for seamless navigation.
6. Note that GitHub Pages doesn’t support routers that use the HTML5 pushState history API.

Summary

This article provides a comprehensive guide for getting started with Main SPA and integrating micro-frontends. It explains the necessary steps to deploy the Container Application, set up micro-frontends, and handle routing. The article highlights the importance of careful control over globals in the micro-frontend architecture to avoid leakage and ensure proper tear downs. With the provided instructions, developers can easily bootstrap and integrate micro-frontends into their application.