Remix 🚚 Vite: Migrating Remix apps to Vite ⚡️
If you’re a developer working on Remix apps, you may have heard of the Vite build tool. Vite is a next-generation frontend build tool that is designed to be fast and efficient, making it an ideal choice for building modern web applications. In this article, we’ll explore the process of migrating Remix apps to Vite, and discuss the benefits of doing so.
What is Vite?
Vite is a build tool that is designed to take advantage of native ES Module imports. It leverages modern JavaScript features like import() and import.meta to enable blazing fast development and production builds. Vite offers a dev server that uses native ES Module imports in the browser, allowing for instant hot module replacement (HMR) without the need for bundling, transforming, or even a file system watch.
Migrating Remix apps to Vite
Migrating a Remix app to Vite involves updating the project configuration to use Vite as the build tool and integrating Vite-specific optimizations. This might include updating the package.json file to use Vite as the build tool, configuring Vite plugins for features like CSS preprocessing and TypeScript, and updating the project’s scripts and build pipeline to use Vite commands instead of the previous build tool. Additionally, any custom build steps or configurations specific to the previous build tool will need to be updated to work with Vite.
Benefits of using Vite with Remix
Migrating a Remix app to Vite offers several benefits. Vite’s use of native ES Module imports and modern JavaScript features means that development and production builds are faster and more efficient. Vite’s dev server provides instant HMR without the need for bundling, enabling a quicker development experience. Additionally, Vite’s streamlined build process can result in smaller bundle sizes and reduced load times for end users.
Conclusion
Migrating Remix apps to Vite can result in a faster and more efficient development and production build process. By leveraging Vite’s native ES Module imports and modern JavaScript features, developers can benefit from faster builds, improved hot module replacement, and smaller bundle sizes. If you’re working on a Remix app, consider migrating to Vite to take advantage of these benefits.
Not working for me with Indie stack. It's quite confusing because the video is 1 month old but his IDE does not show some config that has been added 7 months ago to the repo… Anyway, I believe I followed all the steps but I'm getting the warning "Could not auto-determine entry point from rollupOptions or html files and there are no explicit optimizeDeps.include patterns. Skipping dependency pre-bundling.", and the localhost URL is giving me a 404.
How to migrate a Vite React router SPA directly to Vite + Remix? I'd like to have SSR in my react app
I’m going to have a go at this today, we’ve been using remix for our WMS platform rewrite and as much as we love how easy remix is to use, our developers (especially ones running the stack inside docker on mac) have complained at how slow things are in dev
I’m excited to see how well vite performs
I do have one question though. Previously with HMR/HDR you could specify which port the dev server opened a web socket on. Our stack runs locally via docker using traefik as an ingress controller so we don’t have to rely on mocks and spin required micro services up locally. In remix we’d configured the dev server to connect to a socket on port 8002 and then exposed this bonding with traefik to forward 8002 local into the remix container, it worked great
I’ve noticed now that because the old dev server is gone, there’s no dev block to specify a port – is this completely redundant in vite? Or is there a way to specify a port to connect back to?
Thanks again for all the amazing work and the quality of your docs, it’s been a pleasure to build our new app in remix this far!
For the indie stack example, I have faced some errors with the "npm start" script. Has anyone else faced that too?
But why?
is this the future of remix?
awesome❤
next stop! bun!
Just curious, why is he migrating Remix app to Vite?
I followed the guide yesterday! Vite is AMAZING!! You did an amazing job migrating to it, SO FAST!!
The day before I was like “I’d wish Remix was faster on dev, it’s such a great way to make apps”, the day after.. BOOM you nailed it so much!!
Awesome video, nicely done!
That background is beautiful – where can I get it! (Awesome content as well though)
I'd love to know what's the best way to handle env variables. process.env doesn't seem to have any of the variables I have inside .env.
The TS types are saying that `serverDependenciesToBundle` is not part of the Remix config object for the Vite Remix plugin. Is that deprecated because Vite can handle cjs stuff automatically?
I created a new app with "npx create-remix@latest –template remix-run/remix/templates/unstable-vite-express"
After creating a new route I have to restart the dev server, otherwise I get: "Error: No route matches URL". Is it a known issue?
Great job Pedro! Looking forward to migrating my website soon!
Is this working for js and jsx?
First