Developing with Vite
In this section, we'll cover the basics to get started with Vite in Ruby web apps.
Development Server 💻
Run bin/vite dev to start a Vite development server.
app/frontend: sourceCodeDir ├── entrypoints: entrypointsDir │ # only Vite entry files here │ │── application.js │ └── typography.css │── components: │ └── App.vue │── channels: │ │── index.js │ └── chat.js │── stylesheets: │ └── my_styles.css └── images: └── logo.svg
These files will be automatically detected and passed on to Vite, all configuration is done for you.
You can add them to your HTML layouts or views using the provided tag helpers.
Import Aliases 👉
import App from '~/components/App.vue' import '@/channels/index.js'
In Vite Ruby the most common ways to add styles are:
Importing styles from JS, which will automatically inject the CSS on load:
vite_stylesheet_tagin the view templates:
<%= vite_stylesheet_tag 'styles.scss' %> # app/frontend/entrypoints/styles.scss
Even when not running the Vite development server, Vite Ruby can detect if any assets have changed in sourceCodeDir, and trigger a build automatically when the asset is requested.
This is very convenient when running integration tests, or when a developer does not want to start the Vite development server (at the expense of a slower feedback loop).
CLI Commands ⌨️
A CLI tool is provided, you can run it using bundle exec vite, or bin/vite after installation.
For information about the CLI options run bin/vite command --help.
bundle exec vite install: Install configuration files and sample setup for your web app
bin/vite dev: Starts the Vite development server
bin/vite build: Makes a production bundle with Vite using Rollup behind the scenes
bin/vite upgrade: Updates Vite Ruby gems and npm packages to compatible versions
bin/vite info: Provide information on Vite Ruby and related libraries
bin/vite clobber: Clears the Vite cache, temp files, and builds.
Also available through the
--clearflag in the
All these commands are aware of the environment. When running them locally in development you can pass
--mode production to simulate a production build.
Tag Helpers 🏷
Tag helpers are provided in the framework-specific integrations:
HMR for Integration Tests ✅
When iterating on integration tests locally, you can avoid rebuilds by starting an additional Vite dev server for tests with bin/vite dev --mode=test.
Intended for quick iteration
The trade-off is that your app might not even build correctly.
It's safe if you are running tests in a CI as it will build in production mode.
When running tests locally, you can test the production build by not starting the Vite dev server for tests, or by setting the
CI environment variable.