Convert existing product
The existing React, Angular, or Vue app works under Open OS only if a certain interaction format is followed. The app must be converted into a micro-frontend library that exports a few lifecycle methods necessary for single-spa. Implementing Bootstrap, Mount, and Unmount is required, but Unload is optional.
As demonstrated in our boilerplates, single-spa provides helper libraries to facilitate this process. Boilerplates serve as examples for converting existing React, Vue, or Angular apps to operate within Open OS and forming the required bundle.
After converting, the core app structure remains the same. However, instead of fully rendering the page with index.html, the app simply exports methods that will mount it into a specific container. The goal is to transform the app from a standalone page-rendering app to a library that exports methods that are compliant with single-spa.
Fundamental requirements for converting an app to work under Open OS also include avoiding global impacts, such as adding unscoped CSS styles with non-unique identifiers that could conflict with Open OS styles or other micro-apps. Therefore, we recommend using unique identifiers that are used only by a specific micro-app. This also applies to routing: in the context, Open OS provides a base URL for the app; and the app has the right to build its internal routing only based on this base URL.
The app shouldn’t affect any global objects or the DOM outside its container. The exception is when it's necessary to add some high-level elements like tooltips, modals, etc. When something is added globally, the micro-app should remove it by the time it’s unmounted via the Unmount lifecycle method. Unmount should clean up all DOM elements, DOM event listeners, leaked memory, globals, and observable subscriptions that were created at any point when the registered application was mounted.
Use these helper libraries to implement the required format for your app: