vite-single-spa-example

This is a vite application generated by npx create vite which is then turned into a single-spa web application .

Every single-spa application has to implement single-spa lifecycle functions and this is performed by making use of the helper lib single-spa-preact.

This has the advantage that you can develop locally using a normal vite development flow (e.g. npm run dev), and then test and integrate with single-spa using the build and preview vite scripts.

Note: This example config is set to build a module in SystemJS format.

Local dev

Run the following:

npm run dev

and the application will be available locally at http://localhost:5173

To integrate with single-spa

Run the following:

• npm run build
• npm run preview

This will serve the build at http://localhost:4173

In the root-config of your single-spa root application, you can then register this application via:

// Register a preact web app running through vite
registerApplication({
  name: "preact",
  app: () =>
  System.import('http://127.0.0.1:4173/src/application-root-config.js'),
  activeWhen: ["/"],
});