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.
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.
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
.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.
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!
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.
Top comments (0)