Routing within iframe

[gtb104]

So after reading the docs, I'm not sure how routing within Luigi is handled. Lets suppose we have the parent Luigi app. It is just a shell that handles authentication and some top-level routing. A top-level routing example could be /admin which loads an Ember UI that has it's own routing for administration sub routes (i.e. /admin/users, or /admin/domains). Or, /messages which loads a React UI that has it's own routing for messages sub routes (i.e. /messages/inbox, or /messages/saved).

How do you configure Luigi so that it handles routing between the React and Ember app, but also allows URL based routing to be passed to React/Ember so they can handle their internal routing? Right now what I see is that the Back button of the browser just navigates to the previous top-level route, ignoring and sub-routing that may have happened.

[ndricimrr]

Hi @gtb104 ,

I think part of this answer could be a good start for what you are looking for.

There is Luigi's top level routing which you already noticed that we refer to as Luigi Core and there is the Microfrontend's own routing .
The top level routing's main idea is to allow cross-microfrontend navigation at a higher level by also allowing the browser history back and forth navigation.

However, the internal routing of say your Ember/React application keeps working as it normally would within its own iFrame but you need to coordinate it with the parent Luigi routing so that the history is not lost as you mentioned in Browser history back.

So if you need to have your React/Ember Microfrontend app use its own internal navigation this is possible with the virtualTree and withoutSync features.

For example you want to be able to navigate from your React Microfrontend to your Ember Microfrontend or within the Ember/React apps routing themselves. Normally we offer the LuigiClient API navigate call to make the synchronisation with the parent Luigi app easier:

LuigiClient.linkManager().navigate('/admin/users')

(Check here how to include LuigiClient in your Microfrontend)

An example Luigi node configuration for that would be:

....
nodes: [{ 
                pathSegment: 'admin', 
                label: 'Admin Page', 
                children: [
                      { 
                         pathSegment: 'users', 
                         label: 'Users Page (Ember)', 
                         viewUrl: '/home/users',
                      },
                      { 
                         pathSegment: 'domains', 
                         label: 'Domains Page (React)', 
                         viewUrl: '/home/domains',
                      }, 
                      { 
                         pathSegment: 'messages', 
                         label: 'Message Inbox (React)', 
                         viewUrl: '/messages',
                      }
                 ]
 ...

However, if you would need to navigate to /messages/inbox which is a route inside your React app you would use the following:

LuigiClient.linkManager().withoutSync().navigate('/admin/messages/inbox')

The withoutSync option here will tell the parent core app that this is an internal routing scenario, and the parent app will not touch the routing or do any page refresh etc. The Browser URL however is reflected to /admin/messages/inbox/. This route is also then added to browsers history so you can navigate back an forth without losing history.

As the parent Luigi app also needs to know how to build the route in such scenario you need to set the parent "messages" node virtualTree parameter to true.

As you need to make this sync quite often, to avoid repeating these calls, you can add a route change listener on your React/Ember app with the withoutSync enabled call from above. A similar example in an angular POC we did some time ago looks like this:

 router.events.subscribe(
      (event: NavigationEvent) => {
        if(event instanceof NavigationEnd) {
          LuigiClient.linkManager().withoutSync().withParams({url: this.sURL}).navigate(event.url.substring(1));
        }
      });

Let us know if this helps

[gtb104]

luigi-config.js

Luigi.setConfig({
  navigation: {
    nodes: [
      {
        hideSideNav: true,
        label: 'React',
        pathSegment: 'react',
        viewUrl: '//localhost:3000/',
        virtualTree: true,
      },
      {
        hideSideNav: true,
        label: 'Ember',
        pathSegment: 'ember',
        viewUrl: '//localhost:4200/',
        virtualTree: true,
      }
    ]
  }
});

In the React app, I used the linkManager to make Luigi aware of the internal URL changes
App.js

  let location = useLocation();

  useEffect(() => {
    // Broadcast all route changes to Luigi so that it can update the URL
    LuigiClient.linkManager().fromVirtualTreeRoot().withoutSync().navigate(location.pathname);
  }, [location]);

This ties Luigi into location changes spawned by React Router.

• fromVirtualTreeRoot() helps set the parent route react on the URL
• withoutSync() tells Luigi not to actually do anything besides update the URL
• navigate(location.pathname) tells Luigi to navigate to pathname