turbo v2 preffered node watch approach

[pieterjandebruyne]

Summary

I used nodemon + tsc before to watch and serve my node backend code. Now with watch introduced in turbo v2 I tried to run it with the turbo watch dev command.
I do have some issues, first one is when I set turbo.json config for a task like this:

"dev": {
      "cache": false,
      "persistent": true,
        "dependsOn": [
            "^build"
        ]
    },

I have 2 apps: create react app frontend & node backend
I also have a package "shared-utils"

Because they both have shared-utils as a dependency, I would expect both watchers to re-run when I make changes to the shared package.
At the moment though only the frontend is reloading and the backend does not rerun when making changes to the shared package.

What is the preffered way in turbo v2 to watch for node code ?
Backend script:
"dev": "nodemon",
nodemon config:

{
  "watch": ["src", "../../node_modules/database"],
  "ignoreRoot": [".git"],
  "ext": "ts,json,js",
  "ignore": ["src/**/*.spec.ts", "src/tests/**/*"],
  "exec": "ts-node ./src/index.ts"
}

The frontend uses:
"dev": "react-scripts start"

The shared-utils uses:
"dev": "tsup src/index.ts --format cjs,esm --dts --watch",

Both have shared-utils as dependency.

Is nodemon compatible with the watch of turbo v2?
What tools / scripts would be advised to work with node + turbo v2 watch ?

Additional information

when I run turbo watch dev

• changes to the backend does trigger the reload of nodemon
• changes to the frontend triggers reload
• changes to shared-utils only triggers shared-utils & frontend reload (but not backend)

[anthonyshew]

There is some commentary here and below there that I think might help you along. Let me know if there's more I can do to help.

[pieterjandebruyne]

I tried a lot of combinations, also from the linked ticket but I was unable to find anything that works for my use case up until now..

My full project structure is 2 apps (frontend/backend) + 8 packages (used in other packages or the apps)

This is my turbo.json now:

"dev": {
      "inputs": ["src/**", "tsconfig.json"],
      "outputs": ["dist/**"],
      "dependsOn": [
        "^dev"
      ]
    },
    "frontend#dev": {
      "persistent": true,
      "inputs": ["src/**", "tsconfig.json"],
      "outputs": ["dist/**"],
      "dependsOn": [
        "^dev"
      ]
    },
    "backend#dev": {
      "persistent": true,
      "inputs": ["src/**", "tsconfig.json"],
      "outputs": ["dist/**"],
      "dependsOn": [
        "^dev"
      ]
    }

I changes all my dev scripts in the packages to no longer include the --watch flags so now I have:
packages/x/package.json

"build": "tsup src/index.ts --format cjs,esm --dts",
"dev": "npm run build",

apps/frontend/package.json

"dev": "react-scripts start",
"build": "react-scripts build",

apps/backend/package.json

`"dev": "nodemon"` (see config in first post)

With this setup I am able to run
turbo watch dev -> which triggers updates for the package if I make changes. I also see these changes reflected in my IDE. For example one of the packages is exporting enums, if I use that enum in the frontend and remove one, it gives an error in the IDE but the react script watcher does not do a hot reload. Same for the backend.

I also tried with the "dev": "tsc && node build/src/index.js", approach in backend and removed the persistent but this then doesn't even trigger the task for the backend itself on backend changed.

As I understood from the linked post it might not be possible to have these scripts that serve an application / server to reload when one of their dependant packages are changing or am I still missing something ?

[pieterjandebruyne]

It also seems, even though I define the apps to depend on the ^dev tasks of the dependencies, it already starts running the apps dev tasks before all the package dev tasks are finished, resulting in errors on first run. I'm guessing that is ignored because it is marked as persistent but I think dependance packages should still be awaited.

[anthonyshew]

Do you have a repository I can check out? What you're describing sounds close but hard to grok without having the code in hand.

[pieterjandebruyne]

Unfortunately I do not have a public repo for this project I'm able to share

[pieterjandebruyne]

I might have found a work around for now. Since the packages are now being watched and rebuild by turbo I was able to add these to the nodemon watch array:

{
  "watch": [
    "src",
    "../../node_modules/package1",
    "../../node_modules/package2",
    "../../node_modules/package3",
    "../../node_modules/package4",
  ],
  "ignoreRoot": [".git"],
  "ext": "ts,json,js",
  "ignore": ["src/**/*.spec.ts", "src/tests/**/*"],
  "exec": "ts-node ./src/index.ts"
}

By including all the packages that are defined in the dependency array, nodemon now triggers rebuilds when a package was updated.

This is ofcourse not ideal since we have to keep nodemon in sync with the dependencies but it looks like the only solution I could find.

Would love to know what would be the prefered way to have a node app watching for package changes and rebuild / serve on update.

[r-rayns]

I'm also interested in a solution for this. I have settled on a similar workaround but I'm using tsup as opposed to nodemon.

The dev script in my app's package.json is defined as such:

"dev": "tsup --onSuccess \"node dist/app.js\"",

The tsup.config.js includes this important line:

watch: [".", "../../node_modules/@myrepo/**/**.js"]

By configuring tsup to watch ../../node_modules/@myrepo/**/**.js it will rebuild the app when I make changes to any of my supporting packages. It's not ideal but it gets the job done for now.

Also just to note. You can see in the create-turbo kitchen-sink example:

• Setup the kitchen sink example: npx create-turbo@latest --example kitchen-sink
• Run dev: npm run dev
• Make a change to the logger package: my-turborepo/packages/logger/src/index.ts
• The change is detected and the logger package rebuilds 👍
• The "api" app does not get rebuilt 👎

This is the behaviour I'm looking for, I would like the "api" app (and any other app importing the logger package) to rebuild when a change is made to the logger. At risk of speaking for them, I believe this is also what @pieterjandebruyne is after. Perhaps the solution is just to configure our bundler like we've done and it's not really something Turborepo should be solving. I don't know but I hope my example has clarified things a little.

[theogravity]

I built a tool called hash-runner designed to prevent unnecessary re-builds when using turbo. Even if turbo runs a build command because an external dependency changed, hash-runner will prevent the build from happening if the files that would be used for building has not changed.