Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
setting up rails 6 with foundation, client-side validations under webpacker, not breaking UJS
Notes:
1 - Not going the full 9 yards here - I prefer to see the CSS structures and thus have them available, so not handing them off to webpacker.
2 - Autocomplete is often required. js-autocomplete has no dependencies and has a small footprint. So what's wrong with going the old route and only calling the scripts on the pages that require it?
yarn add jquery
yarn add foundation-sites
** application.js **
comment out rails generated initial and close bits, replace with single start call:
Notes.
1 - from DavyJonesLocker:
If you are using Turbolinks 5.2, use the require syntax and make sure that @client-side-validations/client-side-validations is required afterTurbolinks.start(), so ClientSideValidations can properly attach its event handlers.
Turbolinks 5.3 automatically calls start(), so you can use the import syntax.
2 - Helpful template for loading turbolinks and initialising Foundation:
https://railsbytes.com/public/templates/X6ksRW
3 - Oh yeah, about not breaking UJS
https://stackoverflow.com/questions/67773546/rails-devise-destroy-session-routing-incorrectly/67777301#67777301
```
// import Rails from "@rails/ujs"
// import Turbolinks from "turbolinks"
// import * as ActiveStorage from "@rails/activestorage"
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
import "channels"
require('@client-side-validations/client-side-validations')
require("jquery")
require("easy-autocomplete")
require("@zxing/library")
require("foundation-sites")
require("grapheme-splitter")
import("../src/foundation-datepicker")
import("../src/promotion_datespan")
import("../src/sms_counter")
import("../src/touch_table_highlight")
import { Foundation } from 'foundation-sites'
import $ from 'jquery'
document.addEventListener('turbolinks:load', () => $(document).foundation())
// Rails.start()
// Turbolinks.start()
// ActiveStorage.start()
```
config/webpack/environments.js.
Good: (ref: https://www.botreetechnologies.com/blog/introducing-jquery-in-rails-6-using-webpacker)
```
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery'
})
)
module.exports = environment
```
Seen somewhere. not so good - at least Foundation does not fire up, in my experience
const { environment } = require('@rails/webpacker')
var webpack = require('webpack');environment.plugins.append(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery',
})
)
module.exports = environment
```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment