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'
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: