vite-plugin-rails

vite-plugin-rails

Convention over configuration for Rails projects using Vite

Installation 💿

In the future, vite_rails might install this plugin by default.

You can install it manually by running:

npm i vite-plugin-rails # yarn add vite-plugin-rails

Usage 🚀

Add it to your plugins in vite.config.ts

// vite.config.ts
import Vue from '@vitejs/plugin-vue' // Example, could be using other plugins.
import ViteRails from 'vite-plugin-rails'

export default {
  plugins: [
    Vue(),
    ViteRails(),
  ],
};

Batteries Included 🔋

Unlike vite-plugin-ruby, which provides the minimum amount of configuration necessary to get started, this plugin takes a Rails-approach of including plugins you would normally add.

You can configure each plugin by passing options, which are fully typed. See the configuration options for reference.

If you need finer-grained control, you can opt-out and use vite-plugin-ruby instead, manually adding only the plugins you need.

Ruby

vite-plugin-ruby is added by default.

Compression

This plugin uses rollup-plugin-gzip to create gzip and brotli compressed copies of your assets after build.

You can disable each manually:

    ViteRails({
      compress: { brotli: false }
    }),

    ViteRails({
      compress: false
    }),

Environment

vite-plugin-environment is used to expose environment variables to your client code, using the import.meta.env convention from Vite.

This plugin allows you to conveniently provide defaults, or fail on required env variables:

    ViteRails({
      envVars: {
        API_KEY: null,
        OPTIONAL_KEY: '<opt-value>',
      },
    }),

Full Reload

vite-plugin-full-reload comes pre-configured to automatically reload the page when making changes to server-rendered layouts and templates, improving the feedback cycle.

You can override the default paths, or pass additional ones:

    ViteRails({
      fullReload: {
        additionalPaths: ['app/serializers/**/*']
      },
    }),

Stimulus HMR

vite-plugin-stimulus-hmr is included by default, allowing you to see changes to your Stimulus controllers instantly without refreshing the page.

You can use the stimulus option if you need to configure it.

Subresource Integrity

vite-plugin-manifest-sri is included by default, calculating a cryptographic hash for JavaScript and CSS assets, so that the browser can verify the resources it fetches.

You can use the sri option if you need to configure it.

License

This library is available as open source under the terms of the MIT License.