Search code examples
javascriptreactjsfrontendmicro-frontendsingle-spa

Creating Structural Micro Frontend Using single-spa

I would like to design my frontend as a micro frontend project, and I would like to use single-spa. The problem I have is:

I would like to create an application called MF1 as a based structure, it is a react applicant and would have a header, footer, sidebar, and an empty place for main content.

Now, I would like to render other applications inside MF1's main content.

I am familiar with the single-spa layout engine, but the problem with that is the restriction of using a UI framework inside root config project. For example, the sidebar has a button to open and close and it will be handled in a React application, because of this I could not use the single-spa layout engine to make the structure I am looking for or maybe I do not know how.

How can I implement this scenario? Is single-spa a good choice for reaching this feature?

I would like to have something like the below image. header, sidebar, and footer area in the MF1, and based on which menu item is selected, the related micro frontend project would be rendered in the white area.

enter image description here

I will be grateful for any help.

Solution

  • You can perfectly achieve your goal with single-spa. On top of your description, I'll add that you can:

    • layout the microfrontends inside the root-config add add css grid layout to have the layout described in your screenshot

    • for the sidebar toggle, you have two options:

      1. make the grid layout responsive inside the root-config: so that when the sidebar collapses, the content of both the main and header fill grows.

      2. propagate an event inside the sidebar when it toggles and make the main and header microfrontends listen to that even inside their own self to modify their width.

    When in doubt, please do join our single-spa slack channel, as they recommend.