foundation-rails
foundation-rails copied to clipboard
foundation
rails 6.0.0.rc2 install issues
I'm having problems installing and configuring the foundation-rails gem on Rails6.0.0.rc2
$ rails g foundation:install
Running via Spring preloader in process 6943
insert app/assets/javascripts/application.coffee
The file /home/dex/RubyOnRails/vault-r6.1/app/assets/javascripts/application.coffee does not appear to exist
$
I'm not surprised that the file can not be found as the javascript folder has moved up a level so in my code extract the correct file location would be:
/home/dex/RubyOnRails/vault-r6.1/app/javascripts/application.coffee
Can anyone please advise how I can edit the install script to reflect the new paths? also coffeescript is being phased out
Also having this issue. I'm presuming the work-around is to load Foundation into the stylesheets & javascripts directories manually.
Same issue here too. Would welcome advice on how to get around this issue.
I was able to workaround by placing the css in the stylesheets dir, the js in the javascript dir and adding the appropriate markup to application.html.erb. Still need to fully test it, I'll update this thread w/ any hiccups.
I've figured out a solution (not a Gem expert so this is pretty "hacky" and will be brittle) ...
i) Find file (or equivalent location) : .rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/foundation-rails-6.5.3.0/lib/generators/foundation/install_generator.rb ii) Line 69, change "File.join("app", "assets", "javascripts")" to "File.join("app", "javascript", "packs")" (note the javascript[s] change)
Run "rails g foundation:install" ... hey presto!
ADDENDUM
So I tried to get Foundations 6's javascript goodness working in Rails 6.
Here's what eventually worked for me :-
i) Install JQuery (not via the gem) by following these steps -> https://www.botreetechnologies.com/blog/introducing-jquery-in-rails-6-using-webpacker
ii) Add "foundation.js" or "foundation.min.js" (in the Foundation downloaded zip file) into javascript/packs.
iii) Add "require("packs/foundation.js")" to applications.js in javascript/packs.
iv) Uncomment the following in "foundation_and_overrides.css" :-
- @include motion-ui-transitions;
- @include motion-ui-animations;
- @import 'motion-ui/motion-ui';
(I also found that adding "$(function () { $(document).foundation();});" to application.js caused an error in the browser console, which I spent ages trying to fix, but just removing it doesn't seem to cause any side effects that I've seen yet).
Hopefully this is helpful to someone (or my future self when I forget this!).
My first experience with foundation and this is what happens. I've been meaning to try it for a while. Sad :(
I've figured out a solution (not a Gem expert so this is pretty "hacky" and will be brittle) ...
i) Find file (or equivalent location) : .rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/foundation-rails-6.5.3.0/lib/generators/foundation/install_generator.rb ii) Line 69, change "File.join("app", "assets", "javascripts")" to "File.join("app", "javascript", "packs")" (note the javascript[s] change)
Run "rails g foundation:install" ... hey presto!
I tried this with rails 6.0.2.1, I still get the similiar issues: ./app/javascripts/packs/application.coffee does not appear to exist
I tried all of @mikenewsletters suggestions above. They were very helpful and got me past the foundation:install stage.
Later I came to needing the Dropdown JS component, and tried the @mikenewsletters addendum:
i) worked, got jQuery installed.
ii) didn't; I ended up doing yarn add foundation-sites, which may yet see me stop using this gem ;)
The last part was pivotal:
(I also found that adding "$(function () { $(document).foundation();});" to application.js caused an error in the browser console, which I spent ages trying to fix, but just removing it doesn't seem to cause any side effects that I've seen yet).
If I didn't add the $(document).foundation(), the Foundation Dropdown wouldn't work, and it wasn't there as a function. So I found a post elsewhere that suggested using Foundation.addToJquery($). My application.js now looks like:
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
require("@rails/ujs").start()
require("jquery")
require("turbolinks").start()
import { Foundation, Dropdown } from 'foundation-sites';
Foundation.addToJquery($)
$(function(){ $(document).foundation(); });
... and the Dropdown finally works. This has cost me about a day, so I don't want to be all DenverCoder9 about it... HTH 😄
So now I've got a split-brained app, with foundation-rails doing Foundation's CSS through the asset pipeline and Webpacker doing Foundations JS through Webpacker. Which means I've got Foundation 6.6.1 installed twice, but hey ... things are working
Still seems to be an issue. Is is best to ignore this gem completely and just try manually installing
There is no elegant way to fix this issue.
The root problem is that Sprocket is in its last days. The announcement of its death (deprecation) is very close. In the mean time, everything is for the new kid in the block: webpack.
Writing generator with webpack in mind is a daunting task. There are no such thing as a "standard way" to achieve this. And by the way, there is always another config file to edit. What it is true today, 27th. of May of 2020, won't work anymore in 6 months, 1 or 2 years because some config file will be moved in another location, some loader will be replaced by another one and some extra info will be required in a very obscure configuration file located very deep in the /node_modules folder hiearchy.
Convention over configuration is not in the gene pool of Webpack or Node.
I have raised a PR #300 to fix this issue.
Meanwhile before this PR approves and merges if someone want to use it or try it, can use it from my fork.
gem 'foundation-rails', git: 'https://github.com/AquisTech/foundation-rails.git', branch: 'bugfix-281-fix-js-base-dir-for-install-generator'
I have raised a PR #300 to fix this issue. Meanwhile before this PR approves and merges if someone want to use it or try it, can use it from my fork.
gem 'foundation-rails', git: 'https://github.com/AquisTech/foundation-rails.git', branch: 'bugfix-281-fix-js-base-dir-for-install-generator'
@AquisTech
Im new in rails and I wanted to try foundation, is this correct?
I have not tested this patch. But, according the output it looks ok. The best way to know for sure is to create a Test Rails project, add the patched foundation-rails gem and try to generate the basic file structure the same way the picture does. If it works without fuss, it perfectly OK.
If you plan to use foundation only for its stlylesheet part, it will be OK. If you also want to use the javascript components of foundation, you will need to test everything first, For instance, Foundation javascript uses jQuery ans jQuery is notoriously not compatible with Frontend technologies like Vuejs, React or Angular.
I have not tested this patch. But, according the output it looks ok. The best way to know for sure is to create a Test Rails project, add the patched foundation-rails gem and try to generate the basic file structure the same way the picture does. If it works without fuss, it perfectly OK.
If you plan to use foundation only for its stlylesheet part, it will be OK. If you also want to use the javascript components of foundation, you will need to test everything first, For instance, Foundation javascript uses jQuery ans jQuery is notoriously not compatible with Frontend technologies like Vuejs, React or Angular.
@ycrepeau @Wusinho Although I haven't got chance to write specs for the changes done in the PR, you can be sure about the changes as I am already using it in my running project.