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.
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
Top comments (0)