3

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.

Reza
  • 493
  • 5
  • 14

1 Answers1

4

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.

exaucae
  • 2,071
  • 1
  • 14
  • 24
  • Thank you very much for your information. Also, I would like to ask that is it best practice to use RxJS in the root-config project? I asked in order to clear the doubt. – Reza Nov 26 '21 at 15:42
  • 1
    @Reza, Ideally, no. You would rather setup a utility module/library with your rxjs logic and import it inside each microfrontend thaat needs it. Doing so is called sharing state between microfrontends, and a detailed code repo example can be found here: https://github.com/filoxo/single-spa-example-rxjs-shared-state – exaucae Nov 26 '21 at 17:37
  • thank you very much again, also I faced another problem if I would like to use material-UI for designing the header, sidebar, and footer in root-cofing, what should I do? material-UI needs react. – Reza Nov 27 '21 at 12:22
  • You should wrap it in a utility microfrontend usually called styleguide, see here for further explanation : https://single-spa.js.org/docs/ecosystem-css/#third-party-design-system. Besides, I suggest youopen another question since your main concern is already addressed. Subquestions do not help other people facing the same trouble. – exaucae Nov 27 '21 at 12:28
  • sure, sure, thank you again for your fast reply and information, thanks a lot. – Reza Nov 27 '21 at 12:29
  • You are welcome. Here is the slack group of single spa where community can help further more and faster: https://join.slack.com/t/single-spa/shared_invite/zt-yxfqpl2u-PNx3uZtS3pgAXbOBWsdwOA – exaucae Nov 27 '21 at 12:30