Introducing the new Remix Vite Plugin
If you’re a fan of Remix and Vite, then you’re in for a treat!
Remix – a React framework for building modern web applications – has recently introduced a new Vite plugin that is set to revolutionize the way developers build and optimize their web projects.
What is Remix Vite?
Remix Vite is a plugin that seamlessly integrates Vite – a build tool that focuses on speed and simplicity – with Remix applications. This integration allows developers to take advantage of Vite’s lightning-fast build times and instant hot module replacement while building their Remix projects.
Key Features
The Remix Vite plugin comes with a host of features that are designed to improve the development experience for Remix users:
- Lightning-fast build times: Vite’s highly optimized build process ensures that your Remix application builds and refreshes in a fraction of the time compared to traditional build tools.
- Instant hot module replacement: Say goodbye to manual browser refreshes – Vite’s instant hot module replacement allows you to see your changes reflected in the browser as soon as you save your files.
- Optimized production builds: Vite’s build optimizer ensures that your production builds are as lean and efficient as possible, resulting in lightning-fast load times for your users.
Getting Started
Getting started with Remix Vite is a breeze. Simply install the Remix Vite plugin using npm or yarn, and you’ll be ready to take advantage of Vite’s powerful features in your Remix projects.
npm install @remix-run/vite
Once installed, you can configure your Remix project to use the Vite plugin by adding it to your remix.config.js
file:
module.exports = {
// ...other configuration options
buildOptions: {
override: {
rollupOptions: {
// add vite plugin here
plugins: [require('@remix-run/vite')()],
},
},
},
};
Conclusion
The introduction of the new Remix Vite plugin marks an exciting development for developers who are looking to build modern web applications with the best tools available. With its focus on speed, simplicity, and seamless integration with Remix, Vite is set to become a staple for Remix users looking to optimize their development workflow.
If you’re ready to supercharge your Remix projects with the power of Vite, be sure to give the Remix Vite plugin a try – you won’t be disappointed!
Where can we deploy this?
Hot damn — the storytelling in this video is really great! Love the natural, casual but very punchy delivery. And the (maybe) staged trip-ups like "oh, my types don't work — aha, we can add this env.d.ts line". Super good stuff and Remix + Vite is very impressive!
As a nextjs user who has to to wait for the page to reload after changing a fking tailwind class it is blowing my fking mind.
Keep going ! Remix rules
Just to confirm, _index.js is quite like _app.js in NextJS right? a HOC
This is huge! ❤ Also, amazing walkthrough, Brooks!
is this meaning that you will implement vite for shopify with hydrogen any view transitioning as in astro ?
Nice
Remix is even scarier now 💪🏼
Amazingly well done ✅
Thanks so much for this. The awesomeness will be complete, if `unstable_vitePlugin` will replaced by just `vitePlugin` or maybe might as well renamed it to `remix`
Alright, I've been putting off trying Remix for long enough. This has convinced me. You guys crushed it!
Remix FTW
subarashiii
fantastic move, love vite
Wow, this is great! Love it!!!😍
Amazing!
Magic!
I remember also being blown away by the old one when watching a hello world demo, but add a thousand files using MUI and it slows to more like 5 seconds per reload.
I'd love to see a more life-like example when looking at performance.
thanks Remix team, this is good news.