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

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!

José Pablo Ramírez Vargas

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.

Search Hashnode