The new dev server

[pcattori]

Approach

Running the new dev server does the following:

1. Builds an initial build
2. Watches for changes to app source code and rebuilds when changes occur
3. Waits for the app server (i.e. server.js) to be ready
4. Sends a RELOAD message over the websocket

For step (3), the dev server polls GET <app server>/__REMIX_ASSETS_MANIFEST and compares the build hash received from the app server with the latest build hash produced by the compiler run within the dev server.

Benefits

1 No more require cache purge

App server is now only restarted when a rebuild happens, not on every request.
That means that in-memory persistence is fixed. So no need to use the global trick anymore when dealing with DB connections, in-memory caches, etc..

In fact app server might not need to restart at all if the app server supports some sort of server-side HMR.

2 Supports any app server

Previously, dev mode only worked for @remix-run/serve, not for custom servers like server.{js,ts}.
Now any custom server is compatible with the new dev server.

3 Support ESM mode for Node server?

Previously, we needed fine-grain control of the require cache, which prevented Remix servers from being run in ESM mode.
Since the new dev server does not need to purge the require cache at all, this limitation has been removed.

I think this means we could support ESM-mode Remix servers now if we wanted to.

Future work

• Stop compiling/bundling custom app servers into build/index.js
• Deprecate / remove the virtual module for the server build. Just import from ./build/index.js manually.
• Give back control to users for how they want to compile/run their server. E.g. if using TS, just run ts-node ./server.js

TODO

• Changeset

---

Closes: #

• Docs
• Tests

Testing Strategy:

[changeset-bot]

🦋 Changeset detected

Latest commit: 86eb50e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 17 packages

Name	Type
remix	Minor
@remix-run/dev	Minor
@remix-run/react	Minor
@remix-run/serve	Minor
@remix-run/server-runtime	Minor
create-remix	Minor
@remix-run/testing	Minor
@remix-run/cloudflare	Minor
@remix-run/deno	Minor
@remix-run/node	Minor
@remix-run/cloudflare-pages	Minor
@remix-run/cloudflare-workers	Minor
@remix-run/architect	Minor
@remix-run/express	Minor
@remix-run/netlify	Minor
@remix-run/vercel	Minor
@remix-run/eslint-config	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

🤖 Hello there,

We just published version v0.0.0-nightly-45ba8d6-20230119 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[kiliman]

@pcattori I just tried the new dev server, and it doesn't appear to be working for me. Perhaps I misunderstood what it's supposed to do.

Here's my config

module.exports = {
  ignoredRouteFiles: ["**/.*"],
  future: {
    unstable_dev: {
      appServerPort: 3000,
    },
  },
};

I ran npx remix dev in one terminal, and npx remix-serve build in another. I also added some console.logs to see what was happening.

❯ npx remix dev
starting new dev server
devServer2.serve
starting livereload on port 3001...
starting watch...
💿 Built in 349ms
ending watch...

❯ npx remix-serve build
Remix App Server started at http://localhost:3000

Anyway, it looks like it simply returns from await watch.watch(). It just builds and then exits. It doesn't connect to the app server at all.

[pcattori]

@kiliman thanks for trying it out! I just merged a couple fixes and improvements a couple hours ago (#5137) that should fix this for you. Also the expectation is that your app server is running behind nodemod or something else that will pick up the changes. Once we get into JIT compilation of routes or HMR or anything else, that will likely change, but for now that's how it works.