ViteJS and Rails

I recently had to set up a React frontend for a Rails app, and I decided to use ViteJS instead of Webpack. What’s interesting about ViteJS is that in development, it uses ES modules instead of smashing all your Javascript into a single file because that’s expensive and unnecessary during development. When building for production, it uses ESBuild for generating a bundle. Unlike the traditional Webpack setup that uses Babel, ESBuild is significantly faster because it’s implemented in Go.

I have to say the process of setting it up was pretty straightforward thanks to vite_ruby, a Ruby Gem that eases the process of integrating the tool into Rails’s asset pipeline. Moreover, it provides helpers to add the necessary helpers to load the generated Javascript and CSS files. The resulting configuration is leaner than its Webpacker counterpart and easier to reason about. Vite is not as mature as Webpack, but it’s already got a good community of plugins around it. For example, the legacy plugin takes the role of @babel/preset-env to polyfill our Javascript to support old browsers. The React plugin can reload your component changes instantly to make your development experience smooth.

I really like the amount of utilities one gets when building for the web. You can choose the one that works best for your project, and accommodate it thanks to the numerous APIs that they expose.