Comment by Jan Steinhoff on "vite-plugin-single-spa: Vite Projects Made single-spa Compatible with One Plug-In"

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!

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

Jan Steinhoff Hi! I somehow missed your comment. Yes, that is one way to set the mount position. Generally speaking, you can use a special single-spa ID in a block element: <div id="single-spa-application:mifeName"></div>, where mifeName is the name you give the application in the call to registerApplication().

Search Hashnode