Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The new dev server #5133

Merged
merged 5 commits into from
Jan 18, 2023
Merged

The new dev server #5133

merged 5 commits into from
Jan 18, 2023

Conversation

pcattori
Copy link
Contributor

@pcattori pcattori commented Jan 18, 2023

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
Copy link

changeset-bot bot commented Jan 18, 2023

🦋 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

@pcattori pcattori mentioned this pull request Jan 18, 2023
13 tasks
@pcattori pcattori changed the title Pedro/new dev server The new dev server Jan 18, 2023
@pcattori pcattori mentioned this pull request Jan 18, 2023
2 tasks
@pcattori pcattori marked this pull request as ready for review January 18, 2023 22:16
@pcattori pcattori merged commit 45ba8d6 into dev Jan 18, 2023
@pcattori pcattori deleted the pedro/new-dev-server branch January 18, 2023 22:41
@github-actions github-actions bot added the awaiting release This issue has been fixed and will be released soon label Jan 18, 2023
@github-actions
Copy link
Contributor

🤖 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
Copy link
Collaborator

kiliman commented Jan 19, 2023

@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
Copy link
Contributor Author

pcattori commented Jan 19, 2023

@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.

andrelandgraf pushed a commit to andrelandgraf/remix that referenced this pull request Jan 22, 2023
* refactor(dev): builds return the updated assets manifest

* refactor(dev): inject live reload port during build

* feat(dev): new dev server via future flag

* test(dev): update tests for new dev server

* Create mean-clocks-bow.md
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants