Jan Steinhoff

Business Developer turned (primarly) Front-End Engineer. 5-6 year experience with mainly React, TypeScript based applications.

Sep 27, 2023

Hi José Pablo Ramírez Vargas, super helpful series. Especially since there has not been much out there around single-spa that is really up to date. Really like the thoughtful, in-depth approach and you explain very well, I find.

You state in this article that Furthermore, we concluded that it is wasteful to create a UI-less root.

However, following along with the code we do not get to a point where the root is actually a UI, say a Main Navigation for example.

Have you explored this further? I only got started with playing around with it, and there are a few behaviours to do with the routing that are still a bit unclear to me.

So anything you are able to share would be helpful.

Thanks again. And keep up the good work!

José Pablo Ramírez Vargas

Senior Software Developer @ Intel

Sep 27, 2023

Hello, Jan! I am glad you find this helpful. Indeed, from the looks of the search results in Google and Bing, I'm kind of the foremost authority in the subject for now, hehe. So I'll do my best to live up to the expectation.

I have indeed created roots with UI. I haven't played with routers, though. I realize routers may be a pain point, and I bet it is very difficult to reconcile a single-spa project that loads routers from multiple frameworks, like a router in React with a router in Vue. Vue routers seem tricky.

I do have, however, a "play" project in GitHub with a navbar-like UI in Svelte: github.com/webJose/single-spa-and-svelte

Feel free to look at it. Again, no router stuff yet in my research, but I have it present. Follow the series as this is not yet over.

Hi again José,

thanks for the swift reply.

The main missing piece in fact was the mount point of the microfrontend.

Which I figured out can be passed to for example singleSpaReact like so: domElementGetter: () => document.getElementById('react-mifo-container')

[other framework helpers have similar options I believe]

That way the mount point can be nested easily wherever in your component tree you need it.

And as long as the router of the apps is a browser history based router, it all works great.

i.e. the single-spa setup determines which app handles which paths generally and then the individual apps' figure out which content to display exactly based on the precise url path (+ params).

Cheers, Jan

Search Hashnode