Changing Luigi Core URL for micro frontends with internal navigation #2644

alexandra-simeonova · 2022-04-05T08:09:36Z

alexandra-simeonova
Apr 5, 2022

We have a use case where our micro frontends have internal navigations and we want to change the Luigi Core URL accordingly so that they are bookmarkable. Is there any way of Client to Core communication other than custom messages?

Answered by stanleychh

Apr 5, 2022

Yes, there is a dedicated mechanism for this use case. See the "Use a SPA router and keep Luigi Core URL in sync" section here:
https://docs.luigi-project.io/docs/advanced-scenarios. it is basically a combination of https://docs.luigi-project.io/docs/navigation-parameters-reference/?section=virtualtree and https://docs.luigi-project.io/docs/luigi-client-api/?section=withoutsync

View full answer

stanleychh · 2022-04-05T08:36:38Z

stanleychh
Apr 5, 2022

Yes, there is a dedicated mechanism for this use case. See the "Use a SPA router and keep Luigi Core URL in sync" section here:
https://docs.luigi-project.io/docs/advanced-scenarios. it is basically a combination of https://docs.luigi-project.io/docs/navigation-parameters-reference/?section=virtualtree and https://docs.luigi-project.io/docs/luigi-client-api/?section=withoutsync

6 replies

hardl Jun 22, 2022
Maintainer

Hi @luddwskater, where to do the calls heavily depends on what you are using for routing in your svelte app.
The navigation context is a property at a node in the node tree and is optional, so it depends on your luigi config (see https://docs.luigi-project.io/docs/navigation-parameters-reference/?section=navigationcontext).

luddwskater Jul 18, 2022

have you got routing from svelteKit to work with luigi ?

hardl Jul 19, 2022
Maintainer

Hi @luddwskater,

yes, here are the steps to reproduce:

Create a sveltekit app by following the steps here: https://kit.svelte.dev/docs/introduction#getting-started
Include luigi client script somewhere in your app, here I just used the cdn version in app.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<script src="https://unpkg.com/@luigi-project/client/luigi-client.js"></script>
		%sveltekit.head%
	</head>
	<body>
		<div>%sveltekit.body%</div>
	</body>
</html>

Connect inbound and outbound routing channels in a always present svelte component to have two-way route sync, here I simply used __layout.svelte

<script>
	import Header from '$lib/header/Header.svelte';
	import '../app.css';

	import { onMount } from 'svelte';
	import  { goto, afterNavigate } from '$app/navigation';

	
	onMount(async () => {
		// react on luigi-induced route changes
		window.addEventListener('popstate', () => {
			goto(window.location.href, { replaceState: true });
		});
	});

	afterNavigate(navigation => {
		// sync luigi route after internal navigation
		if( navigation.to && navigation.from && navigation.to.href !== navigation.from.href ) {
			let luigiRoute = navigation.to.pathname;
			if(luigiRoute === '/') {
				luigiRoute += 'home';
			}
			LuigiClient.linkManager().withoutSync().fromParent().navigate(luigiRoute);
		}
	});
</script>

...

That's basically it for the MFE.
Now you can include it e.g. in luigi fiddle, here is a example config you can paste at https://fiddle.luigi-project.io/ -> "Modify Config"

let sveltekitMFEUrl = 'http://127.0.0.1:5173/';

Luigi.setConfig({
    navigation: { 
            nodes: [{ 
                pathSegment: 'home', 
                label: 'h', 
                globalNav: true,
                hideFromNav: true, 
                children: [{ 
                    pathSegment: 'home', 
                    label: 'Home', 
                    icon: sveltekitMFEUrl + 'src/lib/header/svelte-logo.svg',
                    viewUrl: sveltekitMFEUrl,
                    viewGroup: 'svelte'
                },{ 
                    pathSegment: 'about', 
                    label: 'About', 
                    icon: sveltekitMFEUrl + 'src/lib/header/svelte-logo.svg',
                    viewUrl: sveltekitMFEUrl + 'about',
                    viewGroup: 'svelte'
                },{ 
                    pathSegment: 'todos', 
                    label: 'Todos', 
                    icon: sveltekitMFEUrl + 'src/lib/header/svelte-logo.svg',
                    viewUrl: sveltekitMFEUrl + 'todos',
                    viewGroup: 'svelte'
                }] 
            }]
        }, 
        
        routing: { 
            useHashRouting: true 
        }, 
        settings: { 
            responsiveNavigation: 'semiCollapsible',
            header: { 
                logo: 'img/luigi.png', 
                title: 'Svelte kit poc'
            }
        }
    });

Make sure sveltekitMFEUrl matches your local app.

luddwskater Jul 22, 2022

you mean that i have to add all navigation path to luigi from sveltekt app ?

hardl Jul 22, 2022
Maintainer

No, only the ones that should appear as navigation entries in luigi. For subsequent routes you can use virtualTree (https://docs.luigi-project.io/docs/navigation-parameters-reference/?section=virtualtree).

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Changing Luigi Core URL for micro frontends with internal navigation #2644

{{title}}

Replies: 1 comment 6 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Changing Luigi Core URL for micro frontends with internal navigation #2644

alexandra-simeonova Apr 5, 2022

Replies: 1 comment · 6 replies

stanleychh Apr 5, 2022

hardl Jun 22, 2022 Maintainer

luddwskater Jul 18, 2022

hardl Jul 19, 2022 Maintainer

luddwskater Jul 22, 2022

hardl Jul 22, 2022 Maintainer

alexandra-simeonova
Apr 5, 2022

Replies: 1 comment 6 replies

stanleychh
Apr 5, 2022

hardl Jun 22, 2022
Maintainer

hardl Jul 19, 2022
Maintainer

hardl Jul 22, 2022
Maintainer