Vite Ruby
Return to top
On this page

Deployment 🚀

Deploying a Ruby web app using Vite Ruby should be quite straightforward.

assets:precompile is a standard for Ruby web apps, and is typically run automatically for you upon deployment if you are using a PaaS such as Heroku, or added in Capistrano scripts.

vite:build will be executed whenever assets:precompile is run, and the resulting assets will be placed inside the public folder.

CDN Support

Both vite_rails and vite_hanami will honor your CDN configuration, and tag helpers will render the appropriate URLs.

Vite will take RACK_ENV and RAILS_ENV into account in commands and rake tasks, using the appropriate configuration for the environment as specified in config/vite.json.

Rake Tasks ⚙️

In Rails, they are installed automatically, so you can simply use them.

In other apps, you can add them manually in your Rakefile:

require 'vite_ruby'
ViteRuby.install_tasks

The following rake tasks are available:

  • vite:build

    Makes a production bundle with Vite using Rollup behind the scenes.

    Called automatically whenever assets:precompile is called.

  • vite:clobber

    Remove the Vite build output directory.

    Called automatically whenever assets:clobber is called.

  • vite:info

    Provide information on Vite Ruby and related libraries.

Environment-aware

You can provide RACK_ENV=production to simulate a production build locally.

Development Dependencies 🔗

By default vite and vite-plugin-ruby will be added as development dependencies, and they will be installed automatically when running assets:precompile.

This allows you to skip installation in servers that won't precompile assets, or easily prune them after assets have been precompiled.

You can opt-out by setting the VITE_RUBY_SKIP_INSTALL_DEV_DEPENDENCIES environment variable to true.

Disabling node_modules installation in assets:precompile

By default, node dependencies will be automatically installed as part of the assets:precompile task.

If all dependencies that necessary for the Vite build have already been installed in a previous step, you may skip installation by setting the VITE_RUBY_SKIP_ASSETS_PRECOMPILE_INSTALL environment variable to true.

Disabling extension of the assets:precompile task

During complex migrations, it might be convenient that vite:build is not run along the assets:precompile rake task.

You can disable the extension of the assets:precompile rake task by setting the VITE_RUBY_SKIP_ASSETS_PRECOMPILE_EXTENSION environment variable to true.

Compressing Assets 📦

Most CDN and edge service providers will automatically serve compressed assets, which is why Vite does not create compressed copies of each file.

If you are not sure about whether your setup handles compression, consider using rollup-plugin-gzip to output gzip and brotli copies of each asset.

If using vite-plugin-rails, assets will be compressed using gzip and brotli out of the box.

Using Capistrano

capistrano-rails is a gem that adds Rails-specific tasks to Capistrano, such as support for assets precompilation and migrations.

While it was originally designed for sprockets, you can easily configure it for Vite Ruby, which means you get automatic removal of expired assets, and manifest backups.

It's necessary to extend the default configuration so that it detects the following files:

# config/deploy.rb

append :linked_dirs, "public/vite"
append :assets_manifests, "public/vite/.vite/manifest*.*"

See capistrano-rails for more information about relevant settings such as keep_assets and assets_roles.

Custom Output Dirs

When customizing ViteRuby.config.public_output_dir or ViteRuby.config.public_dir change "public/vite" to reflect your configuration.

Using Heroku

In order to deploy to Heroku, it's necessary to add the nodejs and ruby buildpacks.

Make sure that the ruby buildpack appears last to ensure the proper defaults are applied.

$ heroku buildpacks
=== pingcrm-vite Buildpack URLs
1. heroku/nodejs
2. heroku/ruby

If you are starting from scratch, you achieve that by running:

heroku buildpacks:set heroku/ruby
heroku buildpacks:add --index 1 heroku/nodejs

When precompiling assets in Heroku, it's better to skip pruning of dev dependencies by setting:

heroku config:set NPM_CONFIG_INCLUDE='dev' YARN_PRODUCTION=false
# or NPM_CONFIG_PRODUCTION=false in versions of npm < 7

That will ensure that vite and vite-plugin-ruby are available, along with other build tools.

If you are looking for example setups, check out this Vue app and its live demo, or this very simple app and its live demo.