The project is in a healthy, maintained state
A petite Vite integration for Rails
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
 Dependencies

Runtime

>= 8.0.0
 Project Readme

A Petite Vite integration Rails

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.

Installation

bundle add petite_vite_rails

Usage

1. Setup Vite Project

Create 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
└── ...

2. Install PetiteVite

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.

3. Setup a controller

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-all

Run rails generate petite_vite:scaffold --help for all available options.

4. Start your app with bin/dev

Run bin/dev (see Procfile.dev) to run both the Vite development server and the Rails server. The Vite server allows for auto-reloads.

5. Production deploys

PetiteVite integrates with rails assets:precompile. PetiteVite does NOT support running the Vite server in production.

Tips

  • 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.

Similar projects

License

The gem is available as open source under the terms of the MIT License.