DEV Community

Christian Sedlmair
Christian Sedlmair

Posted on • Updated on

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
Enter fullscreen mode Exit fullscreen mode

--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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Vite Stylesheets

  • Add entrypoint file application.scss and add sass
$ touch app/frontend/entrypoints/application.scss
$ npm i sass
Enter fullscreen mode Exit fullscreen mode

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' 
Enter fullscreen mode Exit fullscreen mode

Foreman Runner

Add

$ bundle add foreman --group=development
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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}),
      ],
  })
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)