Why does Remix.run doesn't pick up server file changes, and I need to reload the server manually? (There are times that I need to rebuild)

[superjose]

I'm following a modular DDD approach in my Remix project (Currently version 1.15.0).

I extract all the backend logic into Commands and Queries, which are then exposed through a mediator pattern in a file called register.server.ts (Everything lies inside the server folder)

See:

Everything works. The only problem is that every time I make a change in development while I have the dev build server running, it doesn't detect any changes.

Additionally, there are times in which I need to run dev:build and build manually to detect the changes.

Why is that?

I can't find any documentation whatsoever, and appending the files with .server.ts makes no difference.

Here's my package.json:

{
  "name": "edge-remix",
  "private": true,
  "sideEffects": false,
  "scripts": {
    "build": "run-s build:*",
    "build:css": "npm run generate:css -- --minify",
    "build:remix": "remix build",
    "build:server": "esbuild --platform=node --format=cjs ./server.ts --outdir=build --bundle",
    "dev": "run-p dev:*",
    "dev:build": "cross-env NODE_ENV=development npm run build:server -- --watch",
    "dev:css": "cross-env NODE_ENV=development npm run generate:css -- --watch",
    "dev:remix": "cross-env NODE_ENV=development remix watch",
    "dev:server": "cross-env NODE_ENV=development node --inspect --require ./node_modules/dotenv/config --require ./mocks -r tsconfig-paths/register ./build/server.js",
    "docker": "docker-compose up -d",
    "format": "prettier --write .",
    "generate:css": "tailwindcss -o ./app/styles/tailwind.css",
    "icons": "npx @svgr/cli  --out-dir  app/assets/generated/icons -- app/assets/images/icons",
    "icons:watch": "npm-watch icons",
    "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .",
    "setup": "prisma generate && prisma migrate deploy && prisma db seed",
    "seed": "prisma db seed",
    "prisma:generate": "prisma generate",
    "prisma:migrate": "prisma migrate dev",
    "start": "cross-env NODE_ENV=production node ./build/server.js",
    "start:mocks": "cross-env NODE_ENV=production node --require ./mocks --require dotenv/config --require tsconfig-paths/register ./build/server.js",
    "test": "vitest",
    "test:e2e:dev": "start-server-and-test dev http://localhost:3000 \"npx cypress open\"",
    "pretest:e2e:run": "npm run build",
    "test:e2e:run": "cross-env PORT=8811 start-server-and-test start:mocks http://localhost:8811 \"npx cypress run\"",
    "typecheck": "tsc -b && tsc -b cypress",
    "validate": "run-p \"test -- --run\" lint typecheck test:e2e:run",
    "postinstall": "patch-package && prisma generate",
    "generate-seed-profile": "ts-node ./prompts/transform-scripts/to-db-manual"
  },
  "prettier": {},
  "eslintIgnore": [
    "/node_modules",
    "/build",
    "/public/build",
    "/postgres-data"
  ],
  "dependencies": {
    "@aws-sdk/client-s3": "^3.192.0",
    "@aws-sdk/lib-storage": "^3.194.0",
    "@aws-sdk/s3-request-presigner": "^3.192.0",
    "@aws-sdk/util-endpoints": "^3.192.0",
    "@casl/ability": "^6.3.3",
    "@casl/prisma": "^1.3.3",
    "@growthbook/growthbook": "^0.21.2",
    "@headlessui/react": "^1.7.2",
    "@heroicons/react": "^2.0.11",
    "@hookform/resolvers": "^2.9.10",
    "@paypal/react-paypal-js": "^7.8.1",
    "@prisma/client": "^4.11.0",
    "@remix-run/express": "1.15.0",
    "@remix-run/node": "1.15.0",
    "@remix-run/react": "1.15.0",
    "@remix-run/server-runtime": "1.15.0",
    "@remix-run/vercel": "1.15.0",
    "@remix-validated-form/with-zod": "^2.0.5",
    "@sentry/remix": "^7.30.0",
    "@supabase/supabase-js": "^2.0.0",
    "@tailwindcss/typography": "^0.5.7",
    "@vercel/remix-entry-server": "^0.1.0",
    "bcryptjs": "^2.4.3",
    "clsx": "^1.2.1",
    "compression": "^1.7.4",
    "cross-env": "^7.0.3",
    "daisyui": "^2.31.0",
    "domain-functions": "^1.5.1",
    "exceljs": "^4.3.0",
    "express": "^4.18.1",
    "http-status-codes-by-hutu": "^0.0.5",
    "i18next": "^21.9.2",
    "i18next-browser-languagedetector": "^6.1.5",
    "i18next-fs-backend": "^1.1.5",
    "i18next-http-backend": "^1.4.4",
    "immer": "^9.0.16",
    "isbot": "^3.5.3",
    "mime-types": "^2.1.35",
    "morgan": "^1.10.0",
    "neverthrow": "^5.0.0",
    "patch-package": "^6.4.7",
    "postinstall-postinstall": "^2.1.0",
    "react": "^18.2.0",
    "react-colorful": "^5.6.1",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.38.0",
    "react-i18next": "^11.18.6",
    "react-icons": "^4.7.1",
    "react-image-crop": "^10.0.8",
    "react-timer-hook": "^3.0.5",
    "remix-forms": "^1.5.0",
    "remix-i18next": "^4.1.1",
    "remix-params-helper": "^0.4.10",
    "remix-utils": "^3.3.0",
    "remix-validated-form": "^4.6.7",
    "resend": "^0.16.0",
    "tiny-invariant": "^1.2.0",
    "uuid": "^9.0.0",
    "validator": "^13.7.0",
    "vcard-creator": "^0.5.0",
    "webp-converter-browser": "^1.0.3",
    "zod": "^3.20.2"
  },
  "devDependencies": {
    "@babel/core": "^7.19.3",
    "@faker-js/faker": "^7.5.0",
    "@remix-run/dev": "1.15.0",
    "@remix-run/eslint-config": "1.15.0",
    "@svgr/cli": "^6.5.1",
    "@svgr/plugin-jsx": "^6.5.1",
    "@svgr/plugin-prettier": "^6.5.1",
    "@svgr/plugin-svgo": "^6.5.1",
    "@testing-library/cypress": "^8.0.3",
    "@testing-library/dom": "^8.18.1",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^14.4.3",
    "@types/bcryptjs": "^2.4.2",
    "@types/compression": "^1.7.2",
    "@types/eslint": "^8.4.6",
    "@types/express": "^4.17.14",
    "@types/i18next-fs-backend": "^1.1.2",
    "@types/mime-types": "^2.1.1",
    "@types/morgan": "^1.9.3",
    "@types/node": "^18.7.18",
    "@types/papaparse": "^5.3.7",
    "@types/react": "^18.0.20",
    "@types/react-dom": "^18.0.6",
    "@types/uuid": "^8.3.4",
    "@types/validator": "^13.7.7",
    "@vitejs/plugin-react": "^2.1.0",
    "@vitest/coverage-c8": "^0.29.7",
    "autoprefixer": "^10.4.11",
    "babel-plugin-macros": "^3.1.0",
    "c8": "^7.12.0",
    "cookie": "^0.5.0",
    "cypress": "^10.8.0",
    "dotenv": "^16.0.2",
    "esbuild": "^0.15.8",
    "eslint": "^8.23.1",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-cypress": "^2.12.1",
    "eslint-plugin-import": "^2.27.5",
    "happy-dom": "^6.0.4",
    "msw": "^0.47.3",
    "npm-run-all": "^4.1.5",
    "npm-watch": "^0.11.0",
    "papaparse": "^5.4.1",
    "postcss": "^8.4.21",
    "prettier": "^2.7.1",
    "prettier-plugin-tailwindcss": "^0.1.13",
    "prisma": "^4.11.0",
    "start-server-and-test": "^1.13.0",
    "tailwindcss": "^3.3.2",
    "ts-node": "^10.9.1",
    "tsconfig-paths": "^4.1.0",
    "typescript": "^4.9.4",
    "vite": "^3.1.3",
    "vite-tsconfig-paths": "^3.5.0",
    "vitest": "^0.29.7"
  },
  "engines": {
    "node": ">=14"
  },
  "prisma": {
    "org:seed": "ts-node --require tsconfig-paths/register --compiler-options {\"module\":\"CommonJS\"}  prisma/seed.ts",
    "seed": "ts-node --require tsconfig-paths/register --compiler-options {\"module\":\"CommonJS\"}  prisma/seed-organization.ts"
  },
  "resolutions": {
    "@prisma/client": "^4.11.0",
    "prisma": "^4.11.0"
  }
}

remix.config.js

/**
 * @type {import('@remix-run/dev').AppConfig}
 */
module.exports = {
  cacheDirectory: "./node_modules/.cache/remix",
  ignoredRouteFiles: ["**/.*", "**/*.css", "**/*.test.{js,jsx,ts,tsx}"],
  devServerPort: 8002,
  serverBuildTarget:
    process.env.NODE_ENV === "development" ? "node-cjs" : "vercel",
  // When running locally in development mode, we use the built in remix
  // server. This does not understand the vercel lambda module format,
  // so we default back to the standard build output.
  server: process.env.NODE_ENV === "development" ? undefined : "./server.js",
  // publicPath: "/build/",
  // serverBuildPath: "api/index.js",
  // serverMainFields: ["main", "module"],
  // serverModuleFormat: "cjs",
  // serverMinify: false,
  serverDependenciesToBundle: [/^validator*/, /^prisma/, /^@prisma\/client/],
  future: {
    v2_normalizeFormMethod: true,
    v2_meta: true,
    // v2_routeConvention: true,
    v2_errorBoundary: true,
  },
};

[superjose]

Any ideas?

[sergiodxa]

Is thaT server folder inside the app folder? If not, you should add it to watchPaths in your remix.config https://remix.run/docs/en/1.18.1/file-conventions/remix-config#watchpaths

[superjose]

Thank you very much @sergiodxa

It is inside the app folder! In fact, it's being picked up by the file watcher, but somehow it won't show the changes.

I've manually included it in the remix.config.js

/**
 * @type {import('@remix-run/dev').AppConfig}
 */
module.exports = {
  cacheDirectory: "./node_modules/.cache/remix",
  ignoredRouteFiles: ["**/.*", "**/*.css", "**/*.test.{js,jsx,ts,tsx}"],
  devServerPort: 8002,
  serverBuildTarget:
    process.env.NODE_ENV === "development" ? "node-cjs" : "vercel",
  // When running locally in development mode, we use the built in remix
  // server. This does not understand the vercel lambda module format,
  // so we default back to the standard build output.
  server: process.env.NODE_ENV === "development" ? undefined : "./server.js",
  // publicPath: "/build/",
  // serverBuildPath: "api/index.js",
  // serverMainFields: ["main", "module"],
  // serverModuleFormat: "cjs",
  // serverMinify: false,
  serverDependenciesToBundle: [/^validator*/, /^prisma/, /^@prisma\/client/],
  future: {
    v2_normalizeFormMethod: true,
    v2_meta: true,
    // v2_routeConvention: true,
    v2_errorBoundary: true,
  },
  watchPaths: ["./app/server/**/*.ts"],
};

I don't know why, but somehow it tells me that esbuild isn't picking it up.