Skip to content

v1.14.0
Compare
Choose a tag to compare
@chaance chaance released this 01 Mar 22:06
· 2421 commits to main since this release
remix@1.14.0
73fc576
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.

New Development Server with HMR 🔥

You asked for it, and now we're stoked to deliver. We've got a brand new dev server that we think will dramatically improve the experience of running your Remix apps in development.

The new dev environment includes long-anticipated Hot Module Replacement (HMR) via React Refresh, as well as something we're calling Hot Data Revalidation (HDR)

HMR allows you to make changes to your UI or style code and see them reflected in your browser without having to refresh the page. This is different from our existing <LiveReload> component, as HMR will not reset client-side state between updates. This is particularly useful for highly-interactive apps where resetting state is disruptive and slows down the development process.

Now for HDR. Think of it as HMR for data loaders. With HDR you can make changes to your server code and see those updates reflected in your UI immediately without resetting client-side state, just like HMR.

This is an early release available under the unstable_dev future flag, but we're excited to get it into your hands, gather feedback and provide a first-class developer experience for apps at any scale. As of now, there are some known limitations to be aware of:

  • We don't yet expose an API for import.meta.hot
  • All route loaders are invalidated when changes are detected on the server
  • Loader changes do not account for changes in imported dependencies
  • It's doesn't work automatically with the Remix App Server, you'll want to bring in @remix-run/express for your server. This will not be a limitation when the unstable flag is removed.

Using HMR/HDR

First, you need to enable the new dev server in your remix.config.js:

module.exports = {
  // ...
  future: {
    unstable_dev: true,
  },
};

The new dev server and HMR/HDR requires two processes, one for your build and one for your app. You can run these in separate tabs or you can use something like npm-run-all to run them in parallel via a package.json script. We are also using nodemon to auto-restart our server on build changes. It's important to note that we're setting NODE_ENV=development here which is required to enable HMR/HDR.

Using the Remix App Server:

// package.json scripts
"dev": "run-p dev:*",
"dev:build": "cross-env NODE_ENV=development remix dev",
"dev:serve": "cross-env NODE_ENV=development nodemon --watch build node_modules/.bin/remix-serve build",

Using an Express Server:

// package.json scripts
"dev": "run-p dev:*",
"dev:build": "cross-env NODE_ENV=development remix dev",
"dev:serve": "cross-env NODE_ENV=development nodemon --watch build server.js",

Other notable changes

  • entry.server and entry.client files are now optional. If excluded, Remix will use reasonable defaults at build-time. If you need customization for these files, you can run npx remix reveal and it will generate them for you.
  • For users using the v2_routeConvention flag, route conflicts will no longer throw errors. Instead, you'll see a helpful warning that points to the conflict, and the first match we find will be used. 
    ⚠️ Route Path Collision: "/dashboard"
The following routes all define the same URL, only the first one will be used
🟢️️ routes/dashboard/route.tsx
⭕️️ routes/dashboard.tsx

    ⚠️ Route Path Collision: "/"
The following routes all define the same URL, only the first one will be used
🟢️️ routes/_landing._index.tsx
⭕️️ routes/_dashboard._index.tsx
⭕️ routes/_index.tsx

Miscellaneous

Assets 2
Loading