Remix ❤️ Vite
Today we’re excited to announce that unstable support for Vite is available in Remix v2.2.0! Now you get all the benefits of Vite’s lightning fast DX ⚡️ out-of-the-box when using Remix.
Try it out now!
# minimal server
npx create-remix@latest --template remix-run/remix/templates/unstable-vite
# custom Express server
npx create-remix@latest --template remix-run/remix/templates/unstable-vite-express
Check out the new docs for how to use Vite with Remix
So how fast is lightning fast ⚡️? Well, we did some quick testing on the Indie Stack with a M1 Max MacBook Pro and here’s what we found:
- 10x faster HMR 🔥
- 5x faster HDR 🔥
But we didn’t switch to Vite just for the speed. Unlike traditional build tools, Vite is specifically designed for building frameworks.
In fact, with Vite, Remix is no longer a compiler. Remix itself is just a Vite plugin:
// vite.config.ts
import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
export default defineConfig({
plugins: [remix()],
});
With this you’ll also get access to the entire ecosystem of Vite plugins.
This lets us focus on making the core of Remix the best that it can be while letting Vite plugins handle the rest.
Want to import SVGs as React components? There’s a Vite plugin for that.
Using tsconfig path aliases? Vite plugin.
Prefer to use Vanilla Extract? Vite plugin.
Want to use MDX? Vite-compatible Rollup plugin.
Need something custom? Write your own plugin!
Here are even more benefits you’ll get when using the Remix Vite plugin:
- Near-instant dev startup. Vite lazily compiles your app code on-demand, so the dev server can boot immediately.
- Pre-bundled dependencies. Vite only processes dependencies once, so large libraries like Material UI and AntD don’t become bottlenecks for rebuilds nor hot updates.
- Incremental hot updates. Vite keeps track of dependencies so it only needs to reprocess app code that depends on the changes.
- Greatly reduced memory usage. Vite understands
importstatements and can invalidate stale modules on the server efficiently without relying on memory-hungry tricks to bypass theimportcache. This should eliminate existing out-of-memory errors during development. - Automatic route-based CSS splitting. Vite’s CSS splitting only loads the styles needed for the current page.
- Better browser state preservation during HMR. Vite’s built-in HMR runtime and error overlay ensure that browser state stays intact even in the presence of server errors.
- Automatic hot server updates. Code changes that affect the server are immediately reflected in your running server without restarting and without any
globaltricks - ESM & CJS interop. You author ESM, Vite outputs ESM. Your dependencies can be ESM or CJS. Vite handles the rest.
- TypeScript for all your files. No more
.jsor.mjsfiles needed at the root of your project. Usevite.config.tsand even run your custom server viatsx server.tsornode --loader tsm server.ts. - Workspaces. Improved workspace compatibility for monorepos. Use with any package manager supported by Vite:
npm,yarn,pnpm, etc. - Browser compatibility targets. Use Vite’s
build.targetor grab a plugin for browserslist support.
Why now?
Let’s start at the beginning. Why didn’t Remix start off using Vite? The short answer is that a stable release of Vite didn’t exist yet!
Remix development began in July 2020, but Vite’s first stable release wasn’t until February 2021. Even then, there were three blockers for adopting Vite:
- Stable SSR support
- Non-Node runtime support (Deno, Cloudflare)
- Server-aware, fullstack HMR
In the meantime, the Remix compiler switched from Rollup to esbuild in March 2021.
In July 2022, Vite stabilized SSR support and just a few months later in September 2022 Deno became Vite-compatible. Making progress, but Vite was still missing Cloudflare support and server-aware HMR.
Meanwhile at the end of 2022, we were focused on helping users migrate from Create React App and Webpack to Remix. Then in March 2023, React stopped recommending CRA and officially recommended fullstack frameworks, including Remix. We began 2023, ready to tackle server-aware HMR and in May 2023 we finally cracked it with Hot Data Revalidation.
At this point, half of the Remix team was heads down working on compiler improvements for polyfills and optimizing rebuilds. For many users, the main bottleneck was reprocessing large component libraries like Material UI and AntD, so we started looking into pre-bundling dependencies. When prototyping a solution, we realized we would need to reimplement module caching, dependency tracking, and transformation pipelining from scratch on top of esbuild’s low-level plugin system. In short, we’d effectively be building a worse version of Vite. So in June 2023, we started prototyping a Vite plugin for Remix.
That left Cloudflare support in Vite as the last missing piece. Today, we’re working directly with the CF core team and are confident that we can deliver best-in-class CF support before the Remix Vite plugin stabilizes.
We’d love your feedback
You know what they say: if your unstable release is bug-free, you shipped too late. 😅 But seriously, we want to hear from you.
We’ve got a couple known issues, so be sure to look at those (both open and closed) before filing a bug report. Does it work the way you expect? Is there anything missing? Did you find the migration guide helpful? Let us know!
Thanks Vite!
Our users say that Remix made web development fun again. For us, Vite made framework development fun again. We're excited to join the extensive and welcoming Vite ecosystem, and proud to announce that Remix and Shopify will now be sponsoring Vite!
Vite is an amazing project and we’re grateful to the Vite team for their work. Special thanks to Matias Capeletto (patak), Arnaud Barré, and Bjorn Lu from the Vite team for their guidance.
The Remix community was quick to explore Vite support and we’re grateful for their contributions:
Finally, we were inspired by how other frameworks implemented Vite support:
