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

chore(remix-dev): log when using future flags that have been removed or stablized #6211

Closed
wants to merge 38 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
38 commits
Select commit Hold shift + click to select a range
85c3cb6
templates: add `css-bundle` boilerplate (#6110)
markdalgleish Apr 21, 2023
320c7ea
Fix false-positive resource route identification if a route only expo…
brophdawg11 Apr 21, 2023
e61cdc8
feat: add `@remix-run/node/install` side-effect to allow `--require` …
jacob-ebey Apr 21, 2023
e696522
chore: format
remix-run-bot Apr 21, 2023
e6067b7
feat(dev): unstable dev server improvements (#6133)
pcattori Apr 24, 2023
6fd8ee4
chore: format
remix-run-bot Apr 24, 2023
e48bdff
Fix splat route index matching (#6130)
brophdawg11 Apr 24, 2023
3709710
fix(dev): handle rebuilds that start before previous one finished (#6…
pcattori Apr 24, 2023
8a74add
feat(remix-dev): add warning for v2 "cjs"->"esm" defaults (#6154)
jacob-ebey Apr 24, 2023
1501595
chore: format
remix-run-bot Apr 24, 2023
12f224e
fix(dev): get dependencies bin path for any package manager (#6157)
pcattori Apr 25, 2023
341dd3a
fix(dev): define `process.env.REMIX_DEV_HTTP_PORT` in server build (#…
pcattori Apr 25, 2023
76598cd
fix(dev): export `devReady` from runtime packages (#6159)
pcattori Apr 25, 2023
a03c8ae
feat: revalidate loaders only when a change to one is detected (#6135)
jacob-ebey Apr 25, 2023
6295eb6
chore: format
remix-run-bot Apr 25, 2023
e4713ea
fix(dev): handle new routes gracefully (#6165)
pcattori Apr 25, 2023
37d8b7d
chore(remix-node): bump `@remix-run/web-fetch` to latest (#6120)
mcansh Apr 25, 2023
08ab24e
ci: disable tsc annotations for files changed (#6166)
mcansh Apr 25, 2023
7d73586
fix(dev): statically serve built assets from dev server (#6173)
pcattori Apr 25, 2023
4ec885b
fix(dev): reliably detect path to bin for deps (#6175)
pcattori Apr 25, 2023
6e66529
fix(dev): force NODE_ENV=development for dev server (#6176)
pcattori Apr 25, 2023
2f008d0
fix: short circuit links and meta for routes that are not rendered du…
jacob-ebey Apr 25, 2023
754d885
feat: express template outputs ESM for build (#6174)
jacob-ebey Apr 25, 2023
01dff38
chore: format
remix-run-bot Apr 25, 2023
b523450
feat(dev): dev command defaults to remix-serve (#6177)
pcattori Apr 26, 2023
73b63c0
chore: format
remix-run-bot Apr 26, 2023
16891f2
chore(remix-node): add missing files to published package (#6179)
jacob-ebey Apr 26, 2023
b2df1c7
feat: support async `getLoadContext` in all adapters (#6170)
MichaelDeBoey Apr 26, 2023
98bdd4c
feat(remix-server-runtime): pass `AppLoadContext` to `handleRequest` …
fernandojbf Apr 26, 2023
140dd0e
fix(remix-dev): use correct require context in serverBareModulesPlugi…
jacob-ebey Apr 26, 2023
0326856
chore: format
remix-run-bot Apr 26, 2023
542cfbf
feat(serve): call `devReady` for dev server compatibility (#6188)
pcattori Apr 26, 2023
45f7c2e
chore: format
remix-run-bot Apr 26, 2023
77b7fda
template: enable unstable_dev by default in the remix template (#6180)
jacob-ebey Apr 26, 2023
c8de6e3
fix(remix-react): Bump RR for removal of `useSyncExternalStore` (#6121)
brophdawg11 Apr 26, 2023
9bc598c
fix(dev): tracking of prev build even when rebuilds are interrupted (…
pcattori Apr 26, 2023
5cf86e4
chore(remix-dev): log when using future flags that have been removed …
mcansh Apr 27, 2023
945661c
chore: use a single warnOnce call
mcansh Apr 27, 2023
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions .changeset/async-load-context.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
---
"remix": patch
"@remix-run/architect": patch
"@remix-run/cloudflare": patch
"@remix-run/cloudflare-pages": patch
"@remix-run/cloudflare-workers": patch
"@remix-run/express": patch
"@remix-run/netlify": patch
"@remix-run/vercel": patch
---

feat: support async `getLoadContext` in all adapters
5 changes: 5 additions & 0 deletions .changeset/cjs-esm-warning.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@remix-run/dev": patch
---

add warning for v2 "cjs"->"esm" serverModuleFormat default change
144 changes: 144 additions & 0 deletions .changeset/dev-server.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
---
"@remix-run/dev": minor
"@remix-run/server-runtime": minor
---

Dev server improvements

- Push-based app server syncing that doesn't rely on polling
- App server as a managed subprocess
- Gracefully handle new files and routes without crashing
- Statically serve static assets to avoid fetch errors during app server reboots

# Guide

Enable `unstable_dev` in `remix.config.js`:

```js
{
future: {
"unstable_dev": true
}
}
```

## Remix App Server

Update `package.json` scripts

```json
{
"scripts": {
"dev": "remix dev"
}
}
```

That's it!

```sh
npm run dev
```

## Other app servers

Update `package.json` scripts, specifying the command to run you app server with the `-c`/`--command` flag:

```json
{
"scripts": {
"dev": "remix dev -c 'node ./server.js'"
}
}
```

Then, call `devReady` in your server when its up and running.

For example, an Express server would call `devReady` at the end of `listen`:

```js
// <other imports>
import { devReady } from "@remix-run/node";

// Path to Remix's server build directory ('build/' by default)
let BUILD_DIR = path.join(process.cwd(), "build");

// <code setting up your express server>

app.listen(3000, () => {
let build = require(BUILD_DIR);
console.log("Ready: http://localhost:" + port);

// in development, call `devReady` _after_ your server is up and running
if (process.env.NODE_ENV === "development") {
devReady(build);
}
});
```

That's it!

```sh
npm run dev
```

# Configuration

Most users won't need to configure the dev server, but you might need to if:

- You are setting up custom origins for SSL support or for Docker networking
- You want to handle server updates yourself (e.g. via require cache purging)

```js
{
future: {
unstable_dev: {
// Command to run your app server
command: "wrangler", // default: `remix-serve ./build`
// HTTP(S) scheme used when sending `devReady` messages to the dev server
httpScheme: "https", // default: `"http"`
// HTTP(S) host used when sending `devReady` messages to the dev server
httpHost: "mycustomhost", // default: `"localhost"`
// HTTP(S) port internally used by the dev server to statically serve built assets and to receive app server `devReady` messages
httpPort: 8001, // default: Remix chooses an open port in the range 3001-3099
// Websocket port internally used by the dev server for sending updates to the browser (Live reload, HMR, HDR)
websocketPort: 8002, // default: Remix chooses an open port in the range 3001-3099
// Whether the app server should be restarted when app is rebuilt
// See `Advanced > restart` for more
restart: false, // default: `true`
}
}
}
```

You can also configure via flags. For example:

```sh
remix dev -c 'nodemon ./server.mjs' --http-port=3001 --websocket-port=3002 --no-restart
```

See `remix dev --help` for more details.

### restart

If you want to manage app server updates yourself, you can use the `--no-restart` flag so that the Remix dev server doesn't restart the app server subprocess when a rebuild succeeds.

For example, if you rely on require cache purging to keep your app server running while server changes are pulled in, then you'll want to use `--no-restart`.

🚨 It is then your responsibility to call `devReady` whenever server changes are incorporated in your app server. 🚨

So for require cache purging, you'd want to:

1. Purge the require cache
2. `require` your server build
3. Call `devReady` within a `if (process.env.NODE_ENV === 'development')`

([Looking at you, Kent](https://github.com/kentcdodds/kentcdodds.com/blob/main/server/index.ts#L298) 😆)

---

The ultimate solution for `--no-restart` would be for you to implement _server-side_ HMR for your app server.
Note: server-side HMR is not to be confused with the client-side HMR provided by Remix.
Then your app server could continuously update itself with new build with 0 downtime and without losing in-memory data that wasn't affected by the server changes.

This is left as an exercise to the reader.
5 changes: 5 additions & 0 deletions .changeset/empty-taxis-call.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@remix-run/dev": patch
---

Use correct require context in bareImports plugin.
5 changes: 5 additions & 0 deletions .changeset/express-template-esm.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"create-remix": patch
---

update express template to output ESM and use the new dev command
5 changes: 5 additions & 0 deletions .changeset/hdr-revalidate-only-when-needed.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@remix-run/react": patch
---

Revalidate loaders only when a change to one is detected.
6 changes: 6 additions & 0 deletions .changeset/install-globals.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@remix-run/node": patch
"@remix-run/serve": patch
---

add `@remix-run/node/install` side-effect to allow `node --require @remix-run/node/install`
5 changes: 5 additions & 0 deletions .changeset/link-meta-short-circuit.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@remix-run/react": patch
---

short circuit links and meta for routes that are not rendered due to errors
5 changes: 5 additions & 0 deletions .changeset/pink-walls-hide.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"create-remix": patch
---

enable unstable_dev by default in the remix template
5 changes: 5 additions & 0 deletions .changeset/remove-use-sync-external-store.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@remix-run/react": patch
---

Update Remix for React Router no longer relying on `useSyncExternalStore`
5 changes: 5 additions & 0 deletions .changeset/resource-route-boundary.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@remix-run/react": patch
---

Fix false-positive resource route identification if a route only exports a boundary
5 changes: 5 additions & 0 deletions .changeset/splat-index-matching.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@remix-run/dev": patch
---

Fix a bug in route matching that wass preventing a single splat (`$.jsx`) route from matching a root `/` path
5 changes: 5 additions & 0 deletions .changeset/twelve-cheetahs-drive.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@remix-run/server-runtime": patch
---

pass `AppLoadContext` to `handleRequest`
5 changes: 5 additions & 0 deletions .changeset/two-pumpkins-roll.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@remix-run/node": patch
---

add missing files to published package
9 changes: 5 additions & 4 deletions .github/workflows/lint.yml
Original file line number Diff line number Diff line change
Expand Up @@ -24,14 +24,15 @@ jobs:
node-version-file: ".nvmrc"
cache: "yarn"

- name: 📥 Install deps
run: yarn --frozen-lockfile

- name: Disable Eslint GitHub Actions Annotations
- name: Disable GitHub Actions Annotations
run: |
echo "::remove-matcher owner=tsc::"
echo "::remove-matcher owner=eslint-compact::"
echo "::remove-matcher owner=eslint-stylish::"

- name: 📥 Install deps
run: yarn --frozen-lockfile

- name: 🔬 Lint
run: yarn lint

Expand Down
30 changes: 30 additions & 0 deletions .github/workflows/reusable-test.yml
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,12 @@ jobs:
node-version-file: ".nvmrc"
cache: "yarn"

- name: Disable GitHub Actions Annotations
run: |
echo "::remove-matcher owner=tsc::"
echo "::remove-matcher owner=eslint-compact::"
echo "::remove-matcher owner=eslint-stylish::"

- name: 📥 Install deps
run: yarn --frozen-lockfile

Expand Down Expand Up @@ -61,6 +67,12 @@ jobs:
node-version: ${{ matrix.node }}
cache: "yarn"

- name: Disable GitHub Actions Annotations
run: |
echo "::remove-matcher owner=tsc::"
echo "::remove-matcher owner=eslint-compact::"
echo "::remove-matcher owner=eslint-stylish::"

- name: 📥 Install deps
run: yarn --frozen-lockfile

Expand Down Expand Up @@ -93,6 +105,12 @@ jobs:
node-version: ${{ matrix.node }}
cache: "yarn"

- name: Disable GitHub Actions Annotations
run: |
echo "::remove-matcher owner=tsc::"
echo "::remove-matcher owner=eslint-compact::"
echo "::remove-matcher owner=eslint-stylish::"

- name: 📥 Install deps
run: yarn --frozen-lockfile

Expand Down Expand Up @@ -124,6 +142,12 @@ jobs:
node-version: ${{ matrix.node }}
cache: "yarn"

- name: Disable GitHub Actions Annotations
run: |
echo "::remove-matcher owner=tsc::"
echo "::remove-matcher owner=eslint-compact::"
echo "::remove-matcher owner=eslint-stylish::"

- name: 📥 Install deps
run: yarn --frozen-lockfile

Expand Down Expand Up @@ -155,6 +179,12 @@ jobs:
node-version: ${{ matrix.node }}
cache: "yarn"

- name: Disable GitHub Actions Annotations
run: |
echo "::remove-matcher owner=tsc::"
echo "::remove-matcher owner=eslint-compact::"
echo "::remove-matcher owner=eslint-stylish::"

- name: 📥 Install deps
run: yarn --frozen-lockfile

Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/test.yml
Original file line number Diff line number Diff line change
Expand Up @@ -22,4 +22,4 @@ jobs:
if: github.repository == 'remix-run/remix'
uses: ./.github/workflows/reusable-test.yml
with:
node_version: '["19"]'
node_version: '["latest"]'
1 change: 1 addition & 0 deletions contributors.yml
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,7 @@
- F3n67u
- federicoestevez
- fergusmeiklejohn
- fernandojbf
- fgiuliani
- fishel-feng
- francisudeji
Expand Down
6 changes: 6 additions & 0 deletions docs/pages/v2.md
Original file line number Diff line number Diff line change
Expand Up @@ -689,6 +689,12 @@ module.exports = {
};
```

## `serverModuleFormat`

The default server module output format will be changing from `cjs` to `esm`.

In your `remix.config.js`, you should specify either `serverModuleFormat: "cjs"` to retain existing behavior, or `serverModuleFormat: "esm"`, to opt into the future behavior.

## Dev Server

We are still stabilizing the new dev server that enables HMR, several CSS libraries (CSS Modules, Vanilla Extract, Tailwind, PostCSS) and simplifies integration with various servers.
Expand Down
14 changes: 5 additions & 9 deletions integration/error-data-request-test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -129,17 +129,13 @@ test.describe("ErrorBoundary", () => {
});

test("returns a 405 x-remix-error on a data fetch with a bad method", async () => {
let response = await fixture.requestData(
`/loader-return-json`,
"routes/loader-return-json",
{
expect(() =>
fixture.requestData("/loader-return-json", "routes/loader-return-json", {
method: "TRACE",
}
})
).rejects.toThrowError(
`Failed to construct 'Request': 'TRACE' HTTP method is unsupported.`
);
expect(response.status).toBe(405);
expect(response.headers.get("X-Remix-Error")).toBe("yes");
expect(await response.text()).toMatch("Unexpected Server Error");
assertConsoleError('Error: Invalid request method "TRACE"');
});

test("returns a 403 x-remix-error on a data fetch GET to a bad path", async () => {
Expand Down
Loading