We switched to Vite and had to integrate it with existing apps, together with the new Hotwired/Turbo tools and the styling Frameworks we use. That's a collection of how to bring this all together.
Want to have a fast HMR not only means having a top engine (Vite) but even a optimization through the whole setup, especially avoiding or optimizing huge fronted libs. The result is even a better user-experience.
Impediments are between Rails-UJS and Turbo, in case of integrating older apps, by applying delete, post, patch on method of a link, and, bringing Svelte to a reusable custom element where global styles can be applied.
It's the best Rails i ever had!
The Setup divided in small parts, you can pick what you need, and each ends with a check if it works. I tried to write less text and rather link to the sources.
Setups
SASS Styles from Frontend-Frameworks slowed down Hot Module Reloading (HMR) speed up to 5 seconds (Bootstrap) and 12 seconds (Foundation) on my machine. So i implemented theyr stylesheets in the asset pipeline alongside Vite. Vite then concerns only for stylesheets where you have most changes and HMR stays super fast.
Comparitions
I spent weeks for understanding all that new frontend options around the new rails-7 and the great new enhancements, see «Rails 7.0: Fulfilling a vision», especially Turbo. From my view, rails should only have two default options on frontend: Importmaps, which doesnt depend on Node and together with Turbo is great. But, if you want to have Hot Module Reloading (HMR) with code-splitting or being able compiling javascript files like .ts, .jsx, .svelte, you need Node. But: If Node, why not Vite?
Webpacker vs Vite: See comparitions. Webpacker has more Downloads while Vite's rising faster. By installing Vite, there are landing 36 Packages in node_modules folder, on Webpacker there are 288 (8 times more!). It seems that Webpacker has done good work on the last versions, it may be possible that it will be a neck-and-neck race in some years but at the end i decided for Vite.
Jsbundling on esbuild together with a gem like rails_live_reload is working quite fast at the first glance, but why? Vite is not more setup but has this HMR (of course there are some things more that you have to be aware of but if you know them its easy). Jsbundling has no code splitting and, in case rails_live_reload, it's always triggering a page reload with all the javascript behind, even if you're just modifying styles. This was the decisive reason for me.
The development server has to do the refreshes! It pushes, while developing, style changes to the browser without triggering a page reload or Javascript-Actions. This means: You can open a javascript-toggelable popover (not a hoverable!) and it stays open while you're modifying styles and see the changes immediately on the browser. Awesome!
For me, Vite is a new kind of working. It delivers what we expected from webpacker. Yes, its unfair because webpacker is the pioneer and they will do theyr work. But now vite just works! Faster than you can look all changes are visible on the browser. That is not a nice-to-have, its a real time saver, bringing real value to our customers and is making joy!
Thanks
Inspired by Tutorial Stefan Buhrmester and thanks to ElMassimo for Gems and npm packages and thanks to the Rails team which making all that possible.
Oldest comments (0)