Handling Multiple Public Directories in Vite for a Monorepo Setup

[jarimustonen]

We are building a set of websites using a monorepo structure. We want to manage our public assets more efficiently by placing them in a shared package directory external to each site's root directory. Specifically, we need Vite to handle multiple locations for public assets, not just the default public folder.

Here's an outline of our directory structure:

monorepo/
├── packages/
│   └── images/
│       └── public/
│           └── (shared images here)
├── sites/
│   ├── site-a/
│   │   ├── app/
│   │   ├── public/
│   │   │   └── (site-specific images here)
│   │   ├── vite.config.ts
│   │   └── ...
│   ├── site-b/
│   │   └── ...
├── package.json
└── yarn.lock

We want Vite to recognize and serve assets from sites/site-a/public and packages/images/public directories.

Do you think this approach is sensible? If so, how can we configure Vite to support multiple public directories?

[ZhongxuYang]

Maybe you can implement your needs with a custom plugin, I have implemented similar needs in my projects.

Copy the files you want as public to publicDir during configResolved in vite.

Tips:

• It's best to have corresponding folder names for each package to avoid file conflicts when multiple publicDir's are integrated.
• Exclude these copied directories in .gitignore.

[nguyenbatranvan]

I wrote a plugin about this issue to support monorepo and micro FE. You can check it here, I think it will help to solve your problem

[jarimustonen]

Thank you. I think this solved the issue.