Skip to content

Introduction

Vite Ruby is an umbrella project that provides full Vite.js integration in Ruby web apps.

  • vite_rails provides similar functionality as webpacker does for webpack, without all the configuration overhead and dependencies.

  • vite_ruby can be used in plain Rack apps, and is all you need when using HTML entrypoints.

  • There are also integrations for Jekyll, Hanami, and Padrino.

Read an introduction blog post.

Why Vite? ๐Ÿค”

Vite does not bundle your code during development, which means the dev server is extremely fast to start, and your changes will be updated instantly.

In production, Vite bundles your code with tree-shaking, lazy-loading, and common chunk splitting out of the box, to achieve optimal loading performance.

It also provides great defaults, and is easier to configure than similar tools like webpack.

Check this video comparison with webpack which demonstrates the difference in boot time, or this one with the difference in speed during development.

Why Vite Ruby? ๐Ÿค”

Vite is great on its own, but configuring it correctly to work for a Ruby app structure requires knowledge of its internals.

By following existing Rails and Rack conventions, and adding a few of its own, it becomes possible for everyone to leverage Vite and its wonderful features!

Interested in hearing more? Read an introduction blog post, learn how it works, or read about my personal motivation.

Features โšก๏ธ

Everything Vite provides, plus:

๐Ÿค– Automatic entrypoint detection

Simply place your code under app/frontend/entrypoints, and the entrypoints will be configured automatically.

โšก๏ธ Lightning-fast hot reload

Because it does not bundle your code in development, only the scripts and styles that are running need to be processed, which enables Vite to have significantly faster HMR than webpack.

๐Ÿš€ Integrated with assets:precompile

Rake tasks for building and cleaning Vite assets are automatically integrated with assets:precompile and assets:clean, so deploying is straightforward.

๐Ÿ— Auto-build when not running Vite

When the development server is not running, it will automatically detect changes and recompile assets for you. Makes it seamless to run integration tests.

๐Ÿท Smart tag helpers

Tag helpers for script and link tags are provided, and will automatically output preload tags in production to optimize load time.

Introduction has loaded