Search code examples
reactjssingle-spasingle-spa-react

Mount a Single SPA MFE to DOM of a NON Single SPA application

I have a React application that is quite mature which has been developed using React version 16.14.0. Recently, there has come a need to Plugin some of the MFEs developed using Single SPA to this application. As I have tried out converting the current application to Single SPA seems to be quite far fetched given the breaking changes that the application has to go through. Therefore, I would like to know whether it is possible to mount those MFEs as DOM elements into my current application and interact them as React components. I would like to know the feasibility of such approach and any suggestions are appreciated.

Solution

  • Yes, strictly speaking it is possible to mount MFE's in your existing project. The single-spa team will tell you to create a root config project, then mount your current application as MFE, and in turn, make your MFE mount the others.

    While perfectly OK route, I dislike it because it is not as simple. Furthermore, root config projects use SystemJS modules and not native ES Modules. If you want ES modules, you'll have to reconfigure.

    So, for the record: Seriously consider going the path recommended.

    My Answer

    Now, personally speaking, I prefer to do exactly what you say you want to do: Just mount stuff in my existing project.

    To do this, in a nutshell:

    1. Install single-spa.
    2. Decide where to put the calls to registerApplication() and start() in your current project.
    3. Obtain URL's for your micro-frontends and program them when register the applications. Make sure you use the correct import() function according to the type of module in use (System.import() for SystemJS modules, or import() for native ES modules).
    4. Add markup (empty <div> elements, most of the time) in the places where the MFE's will be mounted. They require the id attribute set to single-spa-application:<mfe Name>, where <mfe Name> is the name given to the MFE in the call to registerApplication().

    Optionally, you could assign bare specifiers (or aliases) to the URL's of the MFE's and also include an import map in your current application's index page. This is another conversation, so I'll just stop here.