vite-plugin-rails v0.5.0
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.