Search posts, tags, users, and pages
This package as well as this entire blog is revolutionary and is a core piece in the development of the single-spa framework for Vite!
Hello, Nihir. I am glad you find it useful. Indeed, when I started my journey there was little to nothing to start with. By now, vite-plugin-single-spa is in v0.5.2 supporting multiple exports, multiple parcel/micro-frontend instances and just today had a hotfix. Please drop by GitHub and give the project a star and a follow so you don't miss releases and other important information.
Cheers!
Hello, thank you for the articles
I've created root-project (Vite + Vue) & app (Vite + React) based on your example, right now trying to configure second app using (Vite + Vue) as another project module for root-project In your example there 2 active applications on route /mifea (as we can see vite + vue & vite + react)
What I'm trying to achieve is to activate only one app (that is responsible for price page) on route /price (for example) And on route /admin activate project that's responsible for admin page
Would appreciate if you could provide some advice on how to achieve that behavior?
Basically on 1 route (/price) I want to see price-app On 2nd route (/admin) I want to see admin-app
Dorov Toni Hello. There's nothing special you need to do for your scenario. Yours is just textbook scenario described by single-spa: Simply set the registration for each application to use different routes. That's it.
const spas = [
{
name: 'price',
moduleName: '@myApp/price',
activeWhen: '/price'
},
{
name: 'admin',
moduleName: '@myApp/admin',
activeWhen: '/admin'
}
];
spas.forEach( s => {
registerApplication({
name: s.name,
app: () => import(/* @vite-ignore */ s.moduleName),
activeWhen: s.activeWhen
});
});
Just like that. Separate routes for each.
José Pablo Ramírez Vargas Thank you :) also styles doesn't loaded
Dorov Toni I have an entire article that explains what needs to be done to load the micro-frontend CSS. Go through it.
Having said that, vite-plugin-single-spa can do CSS injection for you.