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.

It will use your config/vite.json configuration, which can be used to configure the host and port, as well as other options.

Entrypoints โคต๏ธ

Drawing inspiration from webpacker, any files inside your entrypointsDir will be considered entries to your application (SPAs or pages).

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.

New in v3

additionalEntrypoints allows to configure entrypoints. See Advanced Usage.

Import Aliases ๐Ÿ‘‰

For convenience, ~/ and @/ are aliased to your sourceCodeDir, which simplifies imports:

import App from '~/components/App.vue'
import '@/channels/index.js'

When importing files outside your sourceCodeDir, make sure to check watchAdditionalPaths.

Auto-Build ๐Ÿค–

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

Enabled locally

By default, autoBuild is enabled in the test and development environments.

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 --clear flag in the dev and build commands.

Environment-aware

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: