How load app within another app in single-spa

userhIW2 0
Viewed 25

I'm currently using a single-spa. And here is an example of the layout I currently have:

<html>
  <head>
    <template id="single-spa-layout">
      <single-spa-router>
        <nav class="topnav">
          <application name="@organization/nav"></application>
        </nav>
        <div class="main-content">
          <route path="settings">
            <application name="@organization/settings"></application>
          </route>
          <route path="clients">
            <application name="@organization/clients"></application>
          </route>
        </div>
        <footer>
          <application name="@organization/footer"></application>
        </footer>
        <application name="@organization/app1"></application>
        <application name="@organization/app2"></application>
      </single-spa-router>
    </template>
  </head>
</html>

Here as you can see I am loading app1 and app2 along with settings or clients. But What I really want is to load app1 only when settings are loaded, and app 2 only when clients are loaded.

Now I've been reading about how to implement this using parcels, but I can't wrap my head around how to load these apps dynamically depending on the loaded app, since this only works by matching the route with the app.

Is there anybody that has any idea on how I could do this? or if someone can point me in the right direction?

single-spa
1 Answers

One of the ways you can Achieve this using the activityFn of the registerApplication API, by identifying the route on which you don't want your respective micro frontends to load.

Adding pseudo code for loading app1 only when settings are loaded.

<yourApplications>.forEach(application => {
     registerApplication("", "", (location) => {
      // load app1 only when settings are loaded
      if (location.pathname !== '<yourSettingsRoute>')) {
        if (application.name === 'App1')
          return false;
        else
          return application.activeWhen.some(func => func(location));
      }
      else{
        ...
        ...
      }
    });
  });
Prakash Saripaka0
Related