Main Spa
Container App for Micro-Frontends bootstrapped with the cra template microfrontend-typescript
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)
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.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- SCSS
SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.
- Templates & Themes
A template or theme refers to a pre-designed layout or structure that provides a basic framework for building a specific type of application or website. It typically includes good design, placeholder content and functional features, allowing developers to customize and fill in the details according to their specific needs.
- GitHub Pages
Gridsome is a Vue.js-based static site generator that makes it easy to build fast and flexible websites and applications by leveraging modern web technologies like GraphQL, Webpack, and hot reloading
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.