[Feature]: Can remix support monorepo refresh?

[nnecec]

What is the new or updated feature that you are suggesting?

I create a monorepo repository. like

- packages
  - ui
- website(remix)

I want use remix app as documentation app. website dependencies:

"dependencies" : {
    "@remix-run/react": "1.1.1",
    "@remix-run/serve": "1.1.1",
    "@nnecec/ui": "workspace: *",
    "remix": "1.1.1"
    // ...more
}

I run cd packages/ui && yarn dev start watch ui package, and cd website run remix dev

It's work ,but when I change ui code and auto rebuild, website will not update. I guess remix treat all dependencies cacheable.

Why should this feature be included?

Support monorepo refresh.

eg. support user custom esbuild options like vite, or watchDirectory: ["../packages/ui"]

[jangerhofer]

The same watch configuration you outline, @nnecec, might also improve the development experience working with non-JS assets (e.g. MDX), if I am not mistaken!

[ronnetzer]

related to #1145.
If its worth mentioning, I'm working on an NX plugin for remix that will support this use case out of the box (in an NX workspace)

[overra]

I ran into this issue today and as a temporary workaround, I made the following patch that adds a watchGlobs option to the remix config.

diff --git a/node_modules/@remix-run/dev/compiler.js b/node_modules/@remix-run/dev/compiler.js
index d36818e..d10027a 100644
--- a/node_modules/@remix-run/dev/compiler.js
+++ b/node_modules/@remix-run/dev/compiler.js
@@ -204,6 +204,10 @@ async function watch(config$1, {
   }, 100);
   let toWatch = [config$1.appDirectory];
 
+  if (config$1.watchGlobs) {
+    toWatch = toWatch.concat(config$1.watchGlobs);
+  }
+
   if (config$1.serverEntryPoint) {
     toWatch.push(config$1.serverEntryPoint);
   }
diff --git a/node_modules/@remix-run/dev/config.d.ts b/node_modules/@remix-run/dev/config.d.ts
index 2beed79..5016a14 100644
--- a/node_modules/@remix-run/dev/config.d.ts
+++ b/node_modules/@remix-run/dev/config.d.ts
@@ -97,6 +97,10 @@ export interface AppConfig {
      * in a CJS build.
      */
     serverDependenciesToBundle?: Array<string | RegExp>;
+    /**
+     * An array of paths to watch for changes.
+     */
+    watchGlobs?: string[];
 }
 /**
  * Fully resolved configuration object we use throughout Remix.
diff --git a/node_modules/@remix-run/dev/config.js b/node_modules/@remix-run/dev/config.js
index 2a7fad4..6a87e2f 100644
--- a/node_modules/@remix-run/dev/config.js
+++ b/node_modules/@remix-run/dev/config.js
@@ -197,6 +197,7 @@ async function readConfig(remixRoot, serverMode = serverModes.ServerMode.Product
     serverBuildTargetEntryModule,
     serverEntryPoint: customServerEntryPoint,
     serverDependenciesToBundle,
+    watchGlobs: appConfig.watchGlobs || [],
     mdx
   };
 }

edit: updated for v1.2

This results in the remix watch watching both the appDirectory and the array of watchGlobs. I haven't noticed any unintended side effects and can open formal PR if this pattern is desired.

[ccssmnn]

@overra this patch has made me so much more productive in a monorepo. The location is slightly different for Remix v1.2

[andresgutgon]

@overra your patch is working for me. Thank! 👏 👏 👏

Did you opened the PR? For me is a +1 : )

[adonaicandido]

@overra Thank you! This works like a charm...

By the way, maybe this should work in conjuntion with the serverDependenciesToBundle config field?

[mxp-qk]

I had the same issue working within a monorepo.

Based on @overra patch and with the new serverDependenciesToBundle here the following patch. I did not battle test the regexp.

This helps a lot in a monorepo with a shared ui.

diff --git a/node_modules/@remix-run/dev/compiler.js b/node_modules/@remix-run/dev/compiler.js
index 9bbf9b1..e141ee0 100644
--- a/node_modules/@remix-run/dev/compiler.js
+++ b/node_modules/@remix-run/dev/compiler.js
@@ -208,6 +208,10 @@ async function watch(config$1, {
     toWatch.push(config$1.serverEntryPoint);
   }
 
+  if(config$1.serverDependenciesToBundle) {
+    toWatch.push(config$1.serverDependenciesToBundle.map(moduleName => require.resolve(moduleName).replace(/[^\/]*$/,"**")));
+  }
+
   let watcher = chokidar__default["default"].watch(toWatch, {
     persistent: true,
     ignoreInitial: true,

[nareshbhatia]

I hit the exact same issue today in my turborepo. The DX with Vite & Next.js is extremely smooth, however Remix app does not respond to changes in a UI lib without restarting the dev build. It would be great if @mxp-qk's patch can be incorporated.

[Rocinante89]

@nareshbhatia, are you using pnpm with that turborepo? I'm having a nightmare of a time deploying remix with turborepo-pnpm

[weyert]

Yeah, I have a similar issue. Not sure what's going internally with Remix. I haven't looked closer at it. Can't imagine it's a PNPM issue

[Rocinante89]

@weyert are you deploying to vercel?

[nareshbhatia]

@Rocinante89 I am using npm. Here's my repo: https://github.com/nareshbhatia/flexible-react-stack

[nareshbhatia]

I just found this turborepo example in the examples folder: https://github.com/remix-run/remix/tree/main/examples/turborepo-vercel. Unfortunately it has the same behavior - changing ui does not reflect immediately in remix app.

As a side note, yarn workspaces seems to need a version number in apps & packages to accept them as a workspace. The above example does not have version numbers in remix app or the ui lib. Had to add them to make yarn work. Same goes for create-remix - I think the templates should add a default version number like 0.0.0.

[selbekk]

What reasons are there for not including the watchGlobs fix as specified above into core Remix?

[laibulle]

#2985