Create Rails-7 app with Vite

Overview

Prerequisites

Vite relies on Node and its included npm which comes with node installation. So, check that Node is up to date on development machine and production server.

⚠️ Since 2.x, yarn, by default, deletes the node_modules folder, see Stackoverflow. For Vite it means that Vite breaks. So i'm going completely without yarn. If Yarn is referenced you can delete all yarn files in project, delete node_modules folder and rebuild it by npm i.

Create Rails App

$ rails new vite-app --skip-javascript && cd vite-app

--skip-javascript is necessary for avoiding conflicts on the next steps. In case of bootstrap/foundation-sites the asset pipeline is helpful so --skip-asset-pipeline is not applied.

Add the packages

see: GitHub/vite_rails

$ bundle add vite_rails haml-rails sassc-rails
$ bundle exec vite install

Asset Pipeline

• Rename app/assets/stylesheets/application.scss to .scss
• Remove *= require_tree . and *= require_self from application.scss

$ mv ./app/assets/stylesheets/application.css ./app/assets/stylesheets/application.scss
$ echo "" > ./app/assets/stylesheets/application.scss

Vite Stylesheets

• Add entrypoint file application.scss and add sass

$ touch app/frontend/entrypoints/application.scss
$ npm i sass

Add the vite_stylesheet_tag («+») to layout so that its loaded alongside the asset pipeline

    = stylesheet_link_tag "application" 
+   = vite_stylesheet_tag 'application.scss', media: :all // => extension .scss is necessary here
    = vite_client_tag
    = vite_javascript_tag 'application' 

Foreman Runner

Add

$ bundle add foreman --group=development

within the development group.

Run the app

On the console, run the app by foreman start -f Procfile.dev, on RubyMine by the Runner.

Pitfall: Call your app by localhost and not by 0.0.0.0 / 127.0.0.0 e.g.. Otherwise the browser cannot access the vite dev server and HMR would not work.

=> You should see your app at http://localhost:5100 and Hot Module Reloading (HMR) should work, but only for files inside frontend folder. Check: Modify a file and check console output.

Full Hot Module Reloading (HMR)

$ npm i --save-dev vite-plugin-full-reload

on vite.config.ts add the lines with the «+»

  import {defineConfig} from 'vite'
  import RubyPlugin from 'vite-plugin-ruby'
+ import FullReload from 'vite-plugin-full-reload'

  export default defineConfig({
      plugins: [
          RubyPlugin(),
+         FullReload([
+             'app/views/**/*',
+             // => add paths you want to watch
+         ], {delay: 0}),
      ],
  })

Restart the server

Test Code

create a scaffold or two views and connecting them by link

=> HMR should work even for views, regarding configuration.

Overview

P.S.
Deploy

I'm working on Capistrano, so some notes:

deploy.rb

append :linked_dirs, 'public/vite'

do not append tmp/cache/

see Vite/Discussions/potential issues when deploy with capistrano
do not append tmp/cache/
see Potential issues when deploy with capistrano