A small Rails plugin that wires a Vite frontend into a Rails app. It provides a vite_tags view helper, an install generator, and rake task hooks — nothing more.
The Vite project lives in a subdirectory (e.g. frontend/) and is wired up as a yarn workspace.
In development, vite_tags emits script tags pointing at the Vite dev server. In production, it reads Vite's manifest.json and emits hashed asset tags with modulepreload links, following Vite's backend integration recipe.
bundle add petite_vite_railsCreate a Vite project within your Rails app (e.g. with yarn create vite <path/to/frontend>). I recommend putting it under the folder frontend or app/frontend. Note that vanilla is not supported (you may be able to use jsbundling-rails?).
my-rails-site
├── app
│ ├── assets
│ ├── controllers
│ ├── frontend ← *also recommended*
│ ├── models
│ └── views
├── frontend ← *most recommended*
├── Gemfile
└── ...
Then, run the install generator. This sets up required configuration in addition to editing a few key files.
rails generate petite_vite:install --frontend-root <path/to/frontend> # defaults to "frontend"Run rails generate petite_vite:install --help for all available options.
Your frontend framework will probably need a mount point — the HTML element where the frontend app would be rendered in. Run the scaffold generator to create the controller and view, and optionally to generate routes.
rails generate petite_vite:scaffold --route-root --route-allRun rails generate petite_vite:scaffold --help for all available options.
Run bin/dev (see Procfile.dev) to run both the Vite development server and the Rails server. The Vite server allows for auto-reloads.
PetiteVite integrates with rails assets:precompile. PetiteVite does NOT support running the Vite server in production.
- I like to set up a frontend router. I then create server routes for each frontend-based route. These routes just render the mountpoint, and the frontend app takes care of the rest.
The gem is available as open source under the terms of the MIT License.