Search code examples
reactjsmicro-frontendsingle-spa

single-spa Micro front End application to be consumed in legacy web application which is not based on single-spa and root config

I have created a Micro Front End application based on single-spa react. It is working fine on both as stand alone mode and in root-config mode. Since this Micro Front End application will be used/consumed in multiple other applications within enterprise. I would like to know, a standard way to, instantiate the MFE using plain JavaScript, so that existing container web application (e.g ASP .NET web Apps) can embed this MFE and mount the same to use its functionality.

Solution

  • I don't know the technicalities with ASP.Net applications since I have not encountered any myself. So my answer will be a bit more general.

    So in general it's fairly easy to integrate Single-SPA into existing Applications. The Baking recipe goes like this:

    1. Add required script tags to index.html. SystemJs, SingleSPA, and your personal Importmap.
    2. Add the single-spa start script somewhere in your application. It should look something like this:
    import { registerApplication, start } from "single-spa";

registerApplication({
  name: "@single-spa/welcome",
  app: () =>
    System.import(
      "@single-spa/welcome"
    ),
  activeWhen: ["/"],
});

start({
  urlRerouteOnly: true,
});

    Which is exactly the same as your root-config.

    You can do this at any Point in your Application. For example, if your "legacy" Application is an Angular Application you can start single-spa in a single component if you want to. For Angular I wrote an example over here.

    The bigger question is should you do this. The single-spa recommended Setup does not recommend using a script Framework as a parent App. But there might be use cases where it helps you just be cautious of the drawbacks.