2

I have tried,

  1. Single SPA
  2. Web Components

But in both ways, i couldn't find a way to develop and deploy the Micro Front-ends separately and then refer those deployed micro-front ends in a wrapper web app.
In the examples i tried using the above methods, the micro front-ends are rendering in the wrapper web app but when served independently, they are not rendering as expected.

mihiran
  • 21
  • 1
  • See other options https://stackoverflow.com/questions/8702704/alternative-to-iframes-with-html5. https://css-tricks.com/the-simplest-ways-to-handle-html-includes/ – Michael Freidgeim Jul 19 '20 at 07:15

1 Answers1

0

You can't do this with a plain static site solution. You have to use some back-end. The issue is that you need to provide a list of micro-frontend-applications (mfa) dynamically, so you have to alter at least something.

The simplest way to achieve this would be:

  1. Create a script (lets name it Loader) that knows how to load scripts dynamically (see document.createElement).
  2. Create an API endpoint that will return the list of scripts, that should be loaded. (here back-end appears)
  3. Update Loader to use API to get the list of micro frontends you want to load.

Now, your the schema should be like this:

--> Index.html started
  --> Loader do fetch for the list of the mfa scripts
    --> Loader adds listed scripts dynamically
      --> Applications start working

When you need to change the list of apps, you don't need to redeploy anything. Just change the API response (by updating the DB, config, or whatever you want) and it will work.

This is not ideal (very not ideal from a performance perspective, but will work for the plain static site).

The better way (if you have a back-end) is to generate the page on the fly and embed your scripts with applications dynamically on the server-side. It is much simpler and might be faster, cause you don't need to wait for a call to the API to get the mfa list.

Hope this helps.

P.S. Using dynamic script loading might be dangerous. If you decide to do the first way, don't forget to verify that all scripts are trusted. You might use Content-Security-Policy for example.

Drag13
  • 5,859
  • 1
  • 18
  • 42