Awesome
<h1 align="center"> <a href="https://vite-ruby.netlify.app/"> <img src="https://raw.githubusercontent.com/ElMassimo/vite_ruby/main/logo.svg" width="200px"/> </a> <br><a href="https://github.com/excid3/jumpstart">Jumpstart Rails</a> with <a href="https://vite-ruby.netlify.app/">Vite</a>
<p align="center"> <a href="https://github.com/ElMassimo/vite_ruby/blob/master/LICENSE.txt"> <img alt="License" src="https://img.shields.io/badge/license-MIT-428F7E.svg"/> </a> </p> </h1>This repo is a fork of the Jumpstart Rails template, which is like Laravel Spark, for Rails.
This fork replaces webpacker with Vite Rails, and extends the basic setup to include a working Stimulus example and Hotwire integration.
Features ⚡️
- 💡 Instant server start
- ⚡️ Blazing fast hot reload
- 🚀 Stimulus + Turbo Hotwire
- 🛤 Path and API Helpers: JS From Routes
- And more!
It adds <kbd>vite-plugin-stimulus-hmr</kbd> for instant feedback on changes to your Stimulus controllers, <kbd>vite-plugin-full-reload</kbd> to automatically refresh the page when editing the Rails layout or templates, and JS From Routes to automatically generate path and API helpers from the routes.
Demo 🎥
Changes to Stimulus controllers don't require a full page refresh.
<a href="https://user-images.githubusercontent.com/1158253/107971586-6deb2480-6f91-11eb-8919-100ca36f3683.mp4" rel="noreferrer" target="_blank"> <img width="836" alt="Screen Shot 2021-02-15 at 13 27 22" src="https://user-images.githubusercontent.com/1158253/107971695-8e1ae380-6f91-11eb-9ef7-9fed47d4d3be.png"> </a>This feature is powered by <kbd>vite-plugin-stimulus-hmr</kbd>.
Installation 💿
rails new myapp -d postgresql -m https://raw.githubusercontent.com/ElMassimo/jumpstart-vite/master/template.rb
For the rest of the instructions, head to Jumpstart Rails.
<br/>Video Comparison 🎥
Webpacker on the left, Vite on the right. I run foreman start, wait until the page loads, then kill the process and run it a second time.
Webpacker
Installing the vanilla Jumpstart template takes 5 minutes, be prepared to watch
node-sass spin for a while, along with all the webpack dependencies.
<img width="350" alt="jumpstart-webpacker-node-sass" src="https://user-images.githubusercontent.com/1158253/107692177-2e6bc200-6c8b-11eb-8943-c03a2f3a5023.png"><img width="480" alt="jumpstart-webpacker-installation" src="https://user-images.githubusercontent.com/1158253/107692176-2e6bc200-6c8b-11eb-9511-69124f6bf844.png">
Once it's installed, and we have run bin/rake db:create db:migrate, we'll start it twice:
Cold start is particularly slow, and it locks Rails rendering.
<br/>Vite ⚡️
Installing the Jumpstart template with Vite takes 1 minute.
<img width="359" alt="jumpstart-vite-installation" src="https://user-images.githubusercontent.com/1158253/107692180-2f045880-6c8b-11eb-9fbe-8289100d22b8.png">Once it's installed, and we have run bin/rake db:create db:migrate, we'll start it twice:
Loads only 9 seconds after foreman start, and is also running a Stimulus example.
Subsequent loads are significantly faster.
<br/>How does it work? 🤔
Vite is powered by esbuild, which can process files significantly faster than Webpack.
Vite does not bundle your code during development, which means as your app grows, the dev server will still start fast, and your changes will continue be updated instantly.
In production, Vite bundles your code with tree-shaking, lazy-loading, and common chunk splitting out of the box, to achieve optimal loading performance.
<br/>Special Thanks 🙌
- Jumpstart Rails: 👉 Have in mind they have also built Jumpstart Pro which also includes payments with Stripe & Braintree, team accounts, TailwindCSS, and much more.