Skip to content

⚡️ Jumpstart a new Rails app with Vite.js + Turbo + Stimulus, and more

License

Notifications You must be signed in to change notification settings

ElMassimo/jumpstart-vite

 
 

Repository files navigation

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.

Screen Shot 2021-02-15 at 13 27 22

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.

Screen Shot 2021-02-12 at 10 03 51

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.

jumpstart-webpacker-node-sassjumpstart-webpacker-installation

Once it's installed, and we have run bin/rake db:create db:migrate, we'll start it twice:

Screen Shot 2021-02-11 at 17 21 03

Cold start is particularly slow, and it locks Rails rendering.


Vite ⚡️

Installing the Jumpstart template with Vite takes 1 minute.

jumpstart-vite-installation

Once it's installed, and we have run bin/rake db:create db:migrate, we'll start it twice:

Screen Shot 2021-02-11 at 17 21 25

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.

About

⚡️ Jumpstart a new Rails app with Vite.js + Turbo + Stimulus, and more

Topics

Resources

License

Stars

Watchers

Forks

Languages

  • Ruby 48.1%
  • HTML 41.9%
  • JavaScript 5.8%
  • SCSS 4.1%
  • Procfile 0.1%