https://github.com/coderberry/jumpstart-vite
https://github.com/coderberry/jumpstart-vite
Last synced: 10 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/coderberry/jumpstart-vite
- Owner: coderberry
- License: mit
- Created: 2023-02-28T19:33:05.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-02-28T19:35:20.000Z (over 3 years ago)
- Last Synced: 2025-01-10T21:03:35.480Z (over 1 year ago)
- Language: Ruby
- Size: 23.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
Jumpstart Rails
with
Vite
[jumpstart]: https://github.com/excid3/jumpstart
[pro]: https://jumpstartrails.com
[vite_rails]: https://github.com/coderberry/vite_rails/tree/main/vite_rails
[esbuild]: https://github.com/evanw/esbuild
[significantly faster]: https://github.com/evanw/esbuild#why
[no bundling]: https://vitejs.dev/guide/why.html#the-problems
[bundling]: https://vitejs.dev/guide/why.html#why-bundle-for-production
[JS From Routes]: https://github.com/coderberry/js_from_routes
[vite-plugin-stimulus-hmr]: https://github.com/coderberry/vite-plugin-stimulus-hmr
[vite-plugin-full-reload]: https://github.com/coderberry/vite-plugin-full-reload
This repo is a fork of the [__Jumpstart Rails__][jumpstart] template, which is
like Laravel Spark, for Rails.
This fork replaces webpacker with [__Vite Rails__][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!][jumpstart]
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](https://github.com/coderberry/vite-plugin-stimulus-hmr).
## Installation 💿
```bash
rails new myapp -d postgresql -m https://raw.githubusercontent.com/coderberry/jumpstart-vite/main/template.rb
```
For the rest of the instructions, head to [Jumpstart Rails][jumpstart].
## 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][no bundling], 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][bundling] with tree-shaking, lazy-loading,
and common chunk splitting out of the box, to achieve optimal loading performance.
## Special Thanks 🙌
- [Jumpstart Rails][jumpstart]: 👉 Have in mind they have also built [Jumpstart Pro][pro] which also includes payments with Stripe & Braintree, team accounts, TailwindCSS, and much more.