Jumpstart Rails with Vite

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 vite-plugin-stimulus-hmr for instant feedback on changes to your Stimulus controllers, vite-plugin-full-reload 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.

This feature is powered by vite-plugin-stimulus-hmr.

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.

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.

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.

Vite ⚡️

Installing the Jumpstart template with Vite takes 1 minute.

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.

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.

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.