Add section on watching a monorepo

[appsforartists]

Documentation is

• [X] Missing
• [ ] Outdated
• [ ] Confusing
• [ ] Not sure?

Explain in Detail

If you have a monorepo like this:

package.json
vite.config.common.ts
workspace-a/
  packages/
    package-a-1/
      package.json
      vite.config.ts
      src
      …
workspace-b/
  packages/
    package-b-2/
      package.json
      vite.config.ts
      src      
      …

and run vite serve in one of the packages (e.g. package-a-1), only files in that package will be watched for HMR. Changes in other packages (e.g. package-b-2) require a manual server restart.

This is because the chokidar.watch options are hardcoded to {root, the config files, and envDir}:

https://github.com/vitejs/vite/blob/275ca5a6e2c4c5273acbc3374ffee9eb49e2bae9/packages/vite/src/node/server/index.ts#L406-L410

envDir is meant to be a folder for saving environment variables. Conveniently, the monorepo root is a good choice for this value, and if you specify it, the other packages in the monorepo will be watched for changes.

envDir may also have a bunch of junk that can be ignored. In my case, yarn and wireit both have caches that don't need to be watched for changes.

Thus, this snippet in vite.config.common.ts ensures that the other src files in my monorepo are being watched for changes:

      // Vite only watches the package root, config files, and envDir.  By
      // setting envDir to the monorepo root (and then exempting cached files),
      // we ensure that all our packages are watched.
      envDir: __dirname,
      server: {
        watch: {
          ignored: [
            '**/.wireit/**',
            '**/.yarn/**',
          ],
        }
      },

Your Suggestion for Changes

The only current mention of using Vite in a monorepo is about linkedDependencies. Perhaps there should be a section/guide/etc dedicated to configuring Vite for a monorepo.

Additionally, maybe Vite should:

• parse .gitignore, so it doesn't need to be manually duplicated in ignored
• provide a projectRoot option that is automatically watched (and clarify that the current root is a package root). This would remove the need to overload envDir, such that they could go in their own /env folder.

Reproduction

No response

Steps to reproduce

No response

[samvv]

The issue goes deeper than that. You need a way to tell Vite where the sources of a hypothetical library are so it can watch them too. See my recent comment on a somewhat related issue.

[forgetso]

Thus, this snippet in vite.config.common.ts ensures that the other src files in my monorepo are being watched for changes:

      // Vite only watches the package root, config files, and envDir.  By
      // setting envDir to the monorepo root (and then exempting cached files),
      // we ensure that all our packages are watched.
      envDir: __dirname,
      server: {
        watch: {
          ignored: [
            '**/.wireit/**',
            '**/.yarn/**',
          ],
        }
      },

I don't know how you got this to work but it doesn't work in my monorepo structure. I had to create a plugin for Vite, in which I pass the workspace root and dynamically work out which src files to watch based on the workspaces field in the root package.json. I use HMR to rebuild these files whenever they change and then invalidate the cache so that they reload on the page. More details in an article here, and the package is here.

Here's a video of it in action: