Setup Foundation-Sites on Rails-7 and Vite
Tags: rails, vite
Published: 2022-09-20 13:51:38

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

**Note**

Foundation/sass slows down HMR aproximately 12 seconds. So, i use the asset pipeline for Foundation, by symlinking sass files from node_modules/, so Vite is freed from them. Custom Stylesheets, where will be the most changes, resides in frontend folder. Javascript goes the direct way, from the yarn (node_modules/) package to Vite.

(**Alternative** would be: minify the foundation CSS and add the minified version to the frontend folder. Then, Vite is clever enough for not loosing time for bundling that. On that way HMR would also rely fast and its cleaner because having only one asset pipeline)

**Prerequesites**

- [Vite](https://dev.to/chmich/setup-vite-on-rails-7-f1i)
- [jQuery](https://dev.to/chmich/setup-jquery-on-vite-598k)

**Vite**

```
$ npm i foundation-sites
```

`application.js`

```
import 'foundation-sites'

import $ from 'jquery'; //=> ATTENTION: jQuery has to be imported after foundation. Foundation would not need this, it would be satisfied with the settings in vite.config.js
window.$ = $;

// initialize the page
window.addEventListener('load', (event) => {
    initPage();
});

window.addEventListener('turbo:render', (event) => {
    initPage();
});
function initPage() {
    $(document).foundation();
    console.log('foundation ready');
}
```

**=>** Javascript should work, you should see `foundation ready` on Browser/development/console

**Asset Pipeline**

add settings file for sass variables and copy foundation

from app-root, run:

```
$ mkdir ./app/assets/stylesheets/foundation
$ touch ./app/assets/stylesheets/_settings.scss
$ cp -r ./node_modules/foundation-sites/scss ./app/assets/stylesheets/foundation
$ cp -r ./node_modules/foundation-sites/_vendor ./app/assets/stylesheets/foundation
```
Smarter it would be symlinking them instead of copying. But, at least in my case, `git` doesnt transfer symlinks to folders (unlike symlinks to files). So, you would have to exclude them with .gitignore and adding them again by a deployment task (in my case capistrano) on the server. Here is gone the easier way.  

`app/assets/stylesheets/application.scss`

make sure that the lines `//= require tree` and `//= require .` are removed

```
@import "settings";
@import "./foundation/scss/foundation";
@include foundation-everything()
```
cannot tell why, but i was not able to refer the @import directly to the nodes folder, i had to do theese symlinks.

**Vite Stylesheets**

Create folder `stylesheets` and symlink settings file

```
$ mkdir app/frontend/stylesheets
$ cd app/frontend/stylesheets
$ ln -s ../../../app/assets/stylesheets/_settings.scss .
$ cd ../../..
```

**Layout**

make sure `stylesheet_link_tag "application"` and `= vite_stylesheet_tag 'application.scss', media: :all` are present.

**Test view**

`.haml`

```
%button.button{"data-toggle" => "example-dropdown", :type => "button"} Toggle Dropdown
#example-dropdown.dropdown-pane{"data-auto-focus" => "true", "data-dropdown" => ""}
  Example dropdown.
```

`.html.erb`

```
<button class="button" data-toggle="example-dropdown" type="button">Toggle Dropdown</button>
<div class="dropdown-pane" data-auto-focus="true" id="example-dropdown">
  Example dropdown.
</div>
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ictxy2t2qnzm6d4d6kml.png)


**=>** If the Popover works and looks like this, Foundation styles and javascript is working like it should.

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