Skip to content

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:clean[keep,age]

    Remove previous Vite builds.

    Called automatically whenever assets:clean 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.

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 your hosting service or server setup does not handle compression, you can use a Rollup plugin such as rollup-plugin-gzip to output gzip and brotli versions of each asset.

Check this discussion for an example setup.

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.

# config/deploy.rb

# Must match `ViteRuby.config.public_output_dir`, which by default is 'vite'
set :assets_prefix, 'vite'

The default value for :assets_manifests should already backup both:

  • manifest.json: generated by Vite for entrypoints
  • manifest-assets.json: generated by Vite Ruby

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

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.

Deployment ๐Ÿš€ has loaded