Using Vite to create micro front-ends

[noook]

We are decided to split our biggest front-end platform into multiple separate apps (aka micro front-ends) and as of today, many tools and many different ways to achieve this are possible but it's impossible to chose one and be sure to make the right choice..

I want to bet on Vite for this, but I strictly have no idea if that's one of the tools that will allow me to achieve this.

I had a look at multi-vite which allows using multiple Vite instances under a proxy to serve different apps on different paths, but I wonder if it is possible to just serve the components to the root App.

Meaning:

• I have a root app, with a common interface to all apps that it might include (sub-app A, sub-app B) with a Navbar, User management, apps listing...
• I want to serve the corresponding subapp under the navigation bar depending on the type of project I chose in a page that belongs to the root interface (one project will redirect to the subapp it belongs to)

I tried to imagine how it would technically look on an architectural point of view, and what I came with is:

• an Nginx server proxying the subapps under a same domain
  • app.localhost Root app
  • appA.app.localhost Subapp A
  • abbB.app.localhost Subapp B
• In the root app, imports will look like package imports (@org/subappA)
  • In production mode, a regular import of the built package as expected
  • In development mode, the root app will import from the other vite instance (is that even possible ?)

If you have any tips, or suggestions regarding the creation of an app assembling multiple micro-frontends, I would really appreciate.

If you need more clarifications, I'll update the original post to be as clear as possible.

[smallk1002]

Hello, I don’t know if you have a demo or a case for the micro-frontend