unable connect to Remix dev asset server when use custom app server

[zhangfisher]

Version: 1.19.1

unable connect to Remix dev asset server when use custom app server.

The reproduction steps are as follows:

1. create remix project

npx create-remix@latest --template remix-run/indie-stack blog-tutorial

2. add myserver files

The myserver folder contains my backend business code.

blog-tutorial
  |-- app
     |-- ....
  |-- myserver
      |-- tsconfig.json
      |-- server.ts            // my custom app server
      |-- backend.ts        //  my backend business code.

backend.ts

console.log("my backend business code.")
export {}

server.ts

import path from "node:path";
import { broadcastDevReady } from "@remix-run/node";
import express from "express";
import { createRequestHandler} from "@remix-run/express";

// import my backend business code.
import "./backend"

const BUILD_DIR = path.resolve(__dirname, "../build");
const build = require(BUILD_DIR);

const app = express(); 

app.all(
  "*",
  createRequestHandler({
    build,
    mode: process.env.NODE_ENV,
  })
);

const port = 3000;
app.listen(port, () => {
  console.info("Application Server is running on port:",port)
  if (process.env.NODE_ENV === "development") {
    broadcastDevReady(build);
  }
});

3. run dev server

// package.json
{
  "dev":"remix dev  -c \"ts-node -P ./myserver/tsconfig.json ./myserver/server.ts\"",
}

• run pnpm dev
• all is ok

4. in browser

unable connect to Remix dev asset server, 404 error occurred when requesting to build the product。

• in browser console

p://localhost:3000/build/_assets/tailwind-HIGRSUZW.css net::ERR_ABORTED 404 (Not Found)
（索引）:18     GET http://localhost:3000/build/entry.client-7I3SIR4T.js net::ERR_ABORTED 404 (Not Found)
（索引）:18     GET http://localhost:3000/build/_shared/chunk-BA6NHEY4.js net::ERR_ABORTED 404 (Not Found)
（索引）:18     GET http://localhost:3000/build/_shared/chunk-H5ZE7JVG.js net::ERR_ABORTED 404 (Not Found)
（索引）:18     GET http://localhost:3000/build/_shared/chunk-NRH5LTJ7.js net::ERR_ABORTED 404 (Not Found)
（索引）:18     GET http://localhost:3000/build/_shared/chunk-RDRAUCVX.js net::ERR_ABORTED 404 (Not Found)
（索引）:18     GET http://localhost:3000/build/_shared/chunk-RGRILNOU.js net::ERR_ABORTED 404 (Not Found)
（索引）:18     GET http://localhost:3000/build/_shared/chunk-K6PKGSTD.js net::ERR_ABORTED 404 (Not Found)
（索引）:18     GET http://localhost:3000/build/_shared/chunk-O4OKU2LD.js net::ERR_ABORTED 404 (Not Found)
（索引）:18     GET http://localhost:3000/build/_shared/chunk-PNG5AS42.js net::ERR_ABORTED 404 (Not Found)
（索引）:18     GET http://localhost:3000/build/_shared/chunk-2LTVY2GU.js net::ERR_ABORTED 404 (Not Found)
（索引）:18     GET http://localhost:3000/build/root-DCMQZTHX.js net::ERR_ABORTED 404 (Not Found)

• in backend console

ErrorResponse {
  status: 404,
  statusText: 'Not Found',
  internal: true,
  data: 'Error: No route matches URL "/build/_shared/chunk-ZCVN4V2C.js"',
  error: Error: No route matches URL "/build/_shared/chunk-ZCVN4V2C.js"
      at getInternalRouterError (D:\Temp\Code\nodejs2\blog-remix\node_modules\.pnpm\@[email protected]\node_modules\@remix-run\router\router.ts:4132:5)
      at Object.query (D:\Temp\Code\nodejs2\blog-remix\node_modules\.pnpm\@[email protected]\node_modules\@remix-run\router\router.ts:2631:19)
      at handleDocumentRequestRR (D:\Temp\Code\nodejs2\blog-remix\node_modules\.pnpm\@[email protected]\node_modules\@remix-run\server-runtime\dist\server.js:170:35)
      at requestHandler (D:\Temp\Code\nodejs2\blog-remix\node_modules\.pnpm\@[email protected]\node_modules\@remix-run\server-runtime\dist\server.js:61:24)
      at D:\Temp\Code\nodejs2\blog-remix\node_modules\@remix-run\express\dist\server.js:39:28
      at processTicksAndRejections (node:internal/process/task_queues:95:5)
}
No routes matched location "/build/_shared/chunk-2LTVY2GU.js"
No routes matched location "/build/root-DCMQZTHX.js"
No routes matched location "/build/_shared/chunk-ZCVN4V2C.js"
ErrorResponse {
  status: 404,
  statusText: 'Not Found',
  internal: true,
  data: 'Error: No route matches URL "/build/routes/_index-S25COGHS.js"',
  error: Error: No route matches URL "/build/routes/_index-S25COGHS.js"
      at getInternalRouterError (D:\Temp\Code\nodejs2\blog-remix\node_modules\.pnpm\@[email protected]\node_modules\@remix-run\router\router.ts:4132:5)
      at Object.query (D:\Temp\Code\nodejs2\blog-remix\node_modules\.pnpm\@[email protected]\node_modules\@remix-run\router\router.ts:2631:19)
      at handleDocumentRequestRR (D:\Temp\Code\nodejs2\blog-remix\node_modules\.pnpm\@[email protected]\node_modules\@remix-run\server-runtime\dist\server.js:170:35)
      at requestHandler (D:\Temp\Code\nodejs2\blog-remix\node_modules\.pnpm\@[email protected]\node_modules\@remix-run\server-runtime\dist\server.js:61:24)
      at D:\Temp\Code\nodejs2\blog-remix\node_modules\@remix-run\express\dist\server.js:39:28
      at processTicksAndRejections (node:internal/process/task_queues:95:5)
}
ErrorResponse {
  status: 404,
  statusText: 'Not Found',
  internal: true,
  data: 'Error: No route matches URL "/build/manifest-B5F8C6D3.js"',
  error: Error: No route matches URL "/build/manifest-B5F8C6D3.js"
      at getInternalRouterError (D:\Temp\Code\nodejs2\blog-remix\node_modules\.pnpm\@[email protected]\node_modules\@remix-run\router\router.ts:4132:5)
      at Object.query (D:\Temp\Code\nodejs2\blog-remix\node_modules\.pnpm\@[email protected]\node_modules\@remix-run\router\router.ts:2631:19)
      at handleDocumentRequestRR (D:\Temp\Code\nodejs2\blog-remix\node_modules\.pnpm\@[email protected]\node_modules\@remix-run\server-runtime\dist\server.js:170:35)
      at requestHandler (D:\Temp\Code\nodejs2\blog-remix\node_modules\.pnpm\@[email protected]\node_modules\@remix-run\server-runtime\dist\server.js:61:24)
      at D:\Temp\Code\nodejs2\blog-remix\node_modules\@remix-run\express\dist\server.js:39:28
      at processTicksAndRejections (node:internal/process/task_queues:95:5)
}
No routes matched location "/build/routes/_index-S25COGHS.js"
No routes matched location "/build/manifest-B5F8C6D3.js"

4. Queries

• I want to run my business code, such as adding express middleware, etc

• How to solve this problem

[zhangfisher]

The problem has been resolved!

Modify server.ts file

import path from "node:path";
import { broadcastDevReady } from "@remix-run/node";
import express from "express";
import { createRequestHandler} from "@remix-run/express";

// import my backend business code.
import "./backend"

const BUILD_DIR = path.resolve(__dirname, "../build");
const build = require(BUILD_DIR);

const app = express(); 

//  add this line
app.use(  "/build",  express.static("public/build"));

app.all(
  "*",
  createRequestHandler({
    build,
    mode: process.env.NODE_ENV,
  })
);

const port = 3000;
app.listen(port, () => {
  console.info("Application Server is running on port:",port)
  if (process.env.NODE_ENV === "development") {
    broadcastDevReady(build);
  }
});