Giter VIP home page Giter VIP logo

Comments (18)

mikenewsletters avatar mikenewsletters commented on August 21, 2024 4

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!

from foundation-rails.

benlieb avatar benlieb commented on August 21, 2024 2

My first experience with foundation and this is what happens. I've been meaning to try it for a while. Sad :(

from foundation-rails.

rgarner avatar rgarner commented on August 21, 2024 1

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

from foundation-rails.

roberthead avatar roberthead commented on August 21, 2024 1

Day 286. This gem doesn't work with a fresh rails project. WTH?

from foundation-rails.

AquisTech avatar AquisTech commented on August 21, 2024 1

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'

from foundation-rails.

gczh avatar gczh commented on August 21, 2024

Facing the same issue here!

from foundation-rails.

dylanesque avatar dylanesque commented on August 21, 2024

Also having this issue!

from foundation-rails.

garrickvanburen avatar garrickvanburen commented on August 21, 2024

Also having this issue.
I'm presuming the work-around is to load Foundation into the stylesheets & javascripts directories manually.

from foundation-rails.

mikenewsletters avatar mikenewsletters commented on August 21, 2024

Same issue here too. Would welcome advice on how to get around this issue.

from foundation-rails.

garrickvanburen avatar garrickvanburen commented on August 21, 2024

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.

from foundation-rails.

mikenewsletters avatar mikenewsletters commented on August 21, 2024

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" :-

(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!).

from foundation-rails.

wanchic avatar wanchic commented on August 21, 2024

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

from foundation-rails.

autotelik avatar autotelik commented on August 21, 2024

Still seems to be an issue. Is is best to ignore this gem completely and just try manually installing

from foundation-rails.

ycrepeau avatar ycrepeau commented on August 21, 2024

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.

from foundation-rails.

arzvaak avatar arzvaak commented on August 21, 2024

Still a problem~~

from foundation-rails.

Wusinho avatar Wusinho commented on August 21, 2024

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

image
Im new in rails and I wanted to try foundation, is this correct?

from foundation-rails.

ycrepeau avatar ycrepeau commented on August 21, 2024

image
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.

from foundation-rails.

AquisTech avatar AquisTech commented on August 21, 2024

image
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.

@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.

from foundation-rails.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.