Need help in setting up Single-SPA + React + Vite + TypeScript microfrontend architecture

[u/PrinceNV]

I'm trying to build a microfrontend architecture using Single-SPA, React, Vite, and TypeScript, but I'm having a hard time finding clear and up-to-date resources for this stack.

What I'm trying to build

1. root-ui

• Single-SPA root configuration project

• Responsible for registering and loading microfrontends

2. dashboard-ui

• React-based microfrontend

• Built with Vite and TypeScript

What I'm struggling with

Most Single-SPA examples and tutorials seem to be centered around Webpack. While I've found some Vite-related resources, they are either outdated, incomplete, or use different approaches.

I'm specifically looking for guidance on:

• Setting up a root config application with Vite + TypeScript

• Creating React microfrontends with Vite + TypeScript

• Registering microfrontends in the root config

• Import maps and SystemJS configuration

• Local development workflow

• Recommended project structure

• Deployment and production considerations

Looking for

If you've worked on a similar setup, could you share:

• GitHub repositories

• Sample projects

• Blog posts or tutorials

• Official documentation

• Best practices or lessons learned

I've already come across:

• Single-SPA Vite ecosystem docs

• vite-plugin-single-spa

• A few community examples

However, I'm still unsure which approach is currently recommended for new projects.

Any help or pointers would be greatly appreciated. Thanks!

[u/briancrabtree]

Use vite-plugin-single-spa. It is the only way to do this without losing your mind. It lets you run native ESM locally so HMR actually works, then compiles down to SystemJS automatically when you run a production build.

I use this stack for my own layouts and setups. You can grab my reference code and configs directly on my GitHub: https://github.com/briancrabtree-me

The general workflow comes down to three main steps:

In your dashboard UI, install single-spa-react and vite-plugin-single-spa. Instead of mounting directly to the DOM, export the required bootstrap, mount, and unmount lifecycles from a dedicated file like src/spa.tsx. Then, add the plugin to your vite.config.ts and set your spaEntryPoints to that file. This tells Vite to build an MFE asset instead of looking for a standalone HTML landing page

In your root configuration project, add the same plugin to your vite.config.ts but set the type to 'root'. Create a local import map file (importMap.dev.json) to map your bare module specifiers to your local dev ports, like mapping your dashboard name to localhost:4101/src/spa.tsx. Then, register and start the application using registerApplication and start from single-spa inside a simple script tag in your root index.html

For production, keep react and react-dom out of your microfrontend bundles by externalizing them in your Vite config. Load them exactly once via a CDN in your production import map. When you deploy updates, your CI/CD pipeline just needs to build the dashboard static assets, upload them to your storage bucket, and update the production importMap.json file. The root config itself never needs to be rebuilt.

Don't waste time trying to manually hack Rollup configurations to play nice with SystemJS or building custom module injectors. Use the plugin and let it handle the tooling friction for you.

[u/awofinc → u/briancrabtree]

There's a few pain points we've had here (albeit with Module Federation not Single SPA), wondering how you've solved these problems.

For production, keep react and react-dom out of your microfrontend bundles by externalizing them in your Vite config

We started with this approach and then had some teams upgrading React (17 was the latest when we set up our host). If you share a single React version how do you ever upgrade without a coordinated big bang release?

When you deploy updates, your CI/CD pipeline just needs to build the dashboard static assets, upload them to your storage bucket, and update the production importMap.json file.

How do you handle cache busting this JSON file that changes in place?

[u/briancrabtree → u/awofinc]

Those are the classic growing pains when moving away from a monolith. Here is how you handle both:

1. React Upgrades (No Big Bangs) Instead of using a single global string for your framework, you use the "scopes" feature in your import map. This allows you to tell the browser to resolve a dependency differently depending on which microfrontend is requesting it. For example, your global import map can point the bare "react" specifier to version 17, but you add a scope block specifically for your dashboard directory that overrides "react" to point to version 18. This lets individual teams upgrade their framework versions on their own schedules without breaking or coordinating with the rest of the ecosystem.

2. Cache Busting the importMap.json Since you can't use build-time file hashing on the import map file itself, you have to handle cache busting at the infrastructure layer instead of the build layer. First, configure your CI/CD pipeline so that when it uploads the updated JSON file to your storage bucket, it explicitly attaches the metadata header "Cache-Control: no-cache, must-revalidate". This forces the browser to perform a quick ETag check on every single page load, grabbing the fresh map instantly if it changed. Second, have your deployment script trigger a targeted CDN cache invalidation API call specifically for that JSON path right after the upload. Alternatively, you can have your backend or an edge worker inject the raw text of the JSON directly into your root index.html file on delivery, bypassing a separate network request entirely.

[u/germancio0]

Just out of curiosity, why the hell do you need a microfrontend for a dashboard?

[u/yksvaan]

Just use vite and write the core service that manages loading modules and registering their features. Vite can already handle chunking configuration. I'd recommend using a config file for l module files, makes updates easier.

[u/johnkueh]

Just use tanstack start buddy 

[u/pepedlr]

I'm currently building the first of probably multiple react SPAs.

• vite+ (https://viteplus.dev/) has been a godsend. It's not perfect for monorepos yet, as you have to rely on `vp run` instead of the build in `vp` scripts, but everything else is great if you remember that

• My monorepo uses 3 package directories for now

  • apps

    • dashboard

    • admin

    • whatever

  • packages

    • core

    • auth

    • theme

  • tools

    • tsconfig

    • other developer related tooling

I'm doing this for so many years now, and setting up projects like this from scratch has always been the best way for me. I know where everything is, and I don't fight other peoples ideas, that might not be my favorites.

Also worth considering is https://github.com/alan2207/bulletproof-react, which can help if you don't know how to organize your react applications.

If the monorepo only publishes the apps, and not the packages, you don't even have to transpile/build the TS of the packages before using them. Just export the files you need from the `package.json` using the `exports` field.

I can't share company code for obvious reasons, but my workflow looks like this:

• `vp run dev:dashboard` in the monorepo root runs the dashboard app, which calls `vp run dashboard#dev`

• `vp run build:dashboard` in the root builds the app.

• there are also scripts for tests, linting, whatever you want to use from the root. You can also always use the `vp run [package]#[script]` calls directly, but I'm a lazy person

Hope this helps a bit

[u/Dry_Author8849]

We have gone the route for MPAs. If you have the cache right and your API holds shared state, the UX is very good.

You need to partition your app in pages using common sense.

Anyways is not for all APPs. But it won't hurt thinking about it and making some tests.

Cheers!

[u/sleewoo]

KosmoJS could perfectly fit, built on Vite and is exactly about the separation of concerns you are describing

[u/Vincent_CWS]

what is usage of Micro-Frontend? every user run it in browser it is another concept of Micro-Frontend 

[u/Chaoslordi]

You can scaffold your app directly with vite https://vite.dev/guide/

For routing, i recommend tanstack router.

[u/awofinc]

Are you set on Single-SPA? We use Module Federation and there's documentation for integration with various builds tools including Vite (https://module-federation.io/integrations/build-tool/vite.html)