Create Rails-7 app with Vite
Tags: rails, vite
Published: 2022-09-20 13:51:56

[Overview](https://dev.to/chmich/setup-vite-svelte-inertia-stimulus-bootstrap-foundation-on-rails-7-overview-1bk1)

---


## 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](https://stackoverflow.com/questions/68735025/yarn-erased-my-node-modules-folder-every-time). 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](https://github.com/ElMassimo/vite_ruby/issues/250) 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](https://github.com/sergii/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](https://dev.to/chmich/setup-vite-svelte-inertia-stimulus-bootstrap-foundation-on-rails-7-overview-1bk1)

---

**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](https://github.com/ElMassimo/vite_ruby/discussions/198)
do not append `tmp/cache/`
see [Potential issues when deploy with capistrano](https://github.com/ElMassimo/vite_ruby/discussions/198)