I found online resources for how to add jQuery itself into a rails 6 app, but I was having trouble finding out how to require in the jquery code that exists inside of a rubygems.org gem.
I am trying to require in the jQuery code from the nested_form_fields gem.
Here is how I did it in Rails 5:
Add the gem within the Gemfile:
gem 'nested_form_fields
Run bundle install to install the gem:
Add the following line within app/assets/javascripts/application.js to require in jquery code from the third party gem:
//= require nested_form_fields
And that is it.
Here is how I attempted to do it in Rails 6:
Add the following line into app/javascript/packs/application.js to load in jquery:
require("jquery")
Add the gem within the Gemfile:
gem 'nested_form_fields'
Run bundle install to install the gem:
Add the following line within app/javascript/packs/application.js to bring in the javascript code which exists inside the nested_form_fields gem:
require("nested_form_fields")
When I boot up my app and look at web inspector it says the following:
Error: Cannot find module 'nested_form_fields'
I didn't expect it to work via yarn either because nested_form_fields isn't a package within yarn. Instead: I'm simply trying to require in the javascript code that happens to exist inside of a ruby gem. But for good measure I attempted it anyways just to rule that out:
yarn add nested_form_fields
...
=> error An unexpected error occurred: "https://registry.yarnpkg.com/nested_form_fields: Not found".
I know this is going to be one of those things where I forgot to do something simple, but I've been at this for a while and another pair of eyes might be able to catch it quickly.
The design of Rails 6 is steering developers away from the asset pipeline and towards webpack. It appears that this means gems used in rails, which contain javascript, will likely need to be updated.
Specifically: instead of hardcoding the javascript into the ruby gem, the ruby gem would only reference the dependent javascript. That dependent javascript would exist separately in the npm repository. I'm no expert, but I believe this is the idea.
My solution was to swap out nested_form_fields for cocoon which essentially provides the same nested-form-handling behavior.
The funny thing is that cocoon is in the exact same predicament as nested_form_fields. However, cocoon is more popular and likewise has more community looking for the best way to solve this puzzle. Issue #555 captures this particular problem.
I eventually decided to implement the temporary work around described in this comment. Essentially what I did was I copy/pasted the jQuery code from the cocoon gem into my rails app, and then I required that code into webpack.
Steps to get Cocoon Up and Running in Rails 6
Add cocoon to the Gemfile
gem "cocoon"
Run bundle install to install the gem.
Copy/paste the cocoon javascript code located here into a new file at: app/javascript/src/cocoon.js
Add the following two lines into javascript/packs/application.js. Cocoon depends on jquery so we need to require that in, and then of course require in the cocoon javascript that we copy/pasted in step #3:
require("jquery")
require("src/cocoon.js")
That is the best temporary strategy that I am aware of.
I'm trying to wrap the bootstrap-sass gem inside another gem (let's call it my-engine). Along the way, I'm building a small Rails application to test things out. As a first step, I wanted to make sure I could get bootstrap-sass working directly in my Rails application. The Gemfile for the Rails app looks like this:
gem 'bootstrap-sass', '3.3.1.0'
gem 'my-engine, path: "~/dev/my-engine"
This works fine. The bootstrap assets are loaded into my Rails application and everything looks good. Now, I want to take bootstrap-sass out of my Rails app and let it load through my-engine. So, my Rails application Gemfile now looks like:
gem 'my-engine, path: "~/dev/my-engine"
The .gemspec for my-engine has:
spec.add_runtime_dependency 'bootstrap-sass', '3.3.1.0'
I can re-bundle the my-engine gem with no problems. I can re-bundle the Rails application with no problems. However, when I refresh the page of the Rails app, I get the following error:
File to import not found or unreadable: bootstrap-sprockets.
That break occurs when sprockets is trying to build the application.css file. Sometimes this will pass and I'll get a different error about missing the bootstrap.js javascript file when the application.js is being built.
Why is this happening? I'm wondering if it has something to with the fact that I'm developing the gems locally and haven't published them, although I'm not sure why that would affect bootstrap-sass which is published. I'm using bundler 1.5.3.
Make sure 'bootstrap-sass' is required in your engine. One sensible place to do this is in your lib/my-engine.rb file:
require 'bootstrap-sass'
Adding the bootstrap-sass gem as a runtime dependency in the .gemspec isn't enough when you're trying to wrap gems.
As you want to use more and more scss/js/coffeescript libraries, you may want to consider moving to bower vs gemfiles as the source for bootstrap-sass-official. We use bower-rails for rake tasks and auto-configuration. It's a really lite config/rake task layer over standard bower.
Addressing your answer, bootstrap problems via the gem was one of the reasons I switched our engine over to just bower assets. We now import bootstrap-sass-official and have full control, note however that for sass files you will need to import the longer path to the source file, i.e. in our engine _application.scss:
# our custom variable overrides
#import 'overrides/variables';
#import 'bootstrap-sass-official/assets/stylesheets/bootstrap-sprockets';
#import 'bootstrap-sass-official/assets/stylesheets/bootstrap';
NOTE: if you want your app sass variables to override engine and sass variables, make sure your engine has _application.scss not application.scss, the leading underscore is critical for variable context/scope.
Thinking ahead, you may need to ignore bower transitive dependencies as we did.
(i.e. some dependencies may use 'bootstrap' while others use 'bootstrap-sass-official' etc)
We use it like this in our .bowerrc such as the following:
{
"ignoredDependencies": [
"bootstrap",
"bootstrap-sass",
"bootstrap-sass-official"
]
}
In conclusion
We have been using this for several months with success. bower-rails will install the dependencies in /vendor/assets and if referenced in your engine, you won't need to reference them at all in your application project. It has been fast and easy to maintain/add/update libraries and know exactly how files are included.
I am using the fullcalendar rails gem. I just downloaded the zip file for the calendar which contains the js and css files for the fullcalendar plugin. For all the tutorials on the fullcalendar gem I have not seen anyone doenload the zip file and use these files in their code (they use the CDN links but those don't appear to be working) where is the best folder to place these zipped assets into so that I can get the desired results on my calendar?
If you use the gem you do not need download any file.
You have to:
install gem
add in the application.js file the instruction //= require fullcalendar
And to can use it.
Read the README of the gem https://github.com/bokmann/fullcalendar-rails
Because you also need moment.js
Don't install from the zip file.
Follow the instructions at https://github.com/bokmann/fullcalendar-rails#installation for installation; you will have an easy time managing the dependencies.
The steps as specified there are:
Add gem 'fullcalendar-rails' to Gemfile
Add gem 'momentjs-rails' to Gemfile if you want to use 2.1.1.0 or higher version of fullcalendar-rails gem.
Run bundle install to install the gems.
Add //= require fullcalendar (and //= require moment) in application.js
Add *= require full calendar in application.css
I'm trying to install Bootstrap 3.0 on my Rails app. I recently finished Michael Hartl's tutorial and am now trying to build my own system using this new version of Bootstrap, but I have a few questions that I'm not sure about.
My system specs:
OS X Mountain Lion on MBP
Rails 4.0
Ruby 2.0
Questions I have:
What is the best gem to use in my Gemfile? I have found a few of them.
What do I import on my custom.css.scss? I read somewhere that it's different from 2.3.2.
Is there anything else I have to do to get Bootstrap to work, or are the remaining steps identical to the ones I followed for Bootstrap 2.3.2?
Edit
Here is what the bootstrap-rails project on GitHub first says to do:
gem 'anjlab-bootstrap-rails', :require => 'bootstrap-rails',
:github => 'anjlab/bootstrap-rails'
Then it says to do:
gem 'anjlab-bootstrap-rails', '>= 3.0.0.0', :require => 'bootstrap-rails'
Do they do the same thing, or do you have to do them both?
Actually you don't need gem for this, here is the step to install Bootstrap 3 in RoR
Download Bootstrap
Copy:
bootstrap-dist/css/bootstrap.css and bootstrap-dist/css/bootstrap.min.css
To: vendor/assets/stylesheets
Copy:
bootstrap-dist/js/bootstrap.js and bootstrap-dist/js/bootstrap.min.js
To: vendor/assets/javascripts
Update: app/assets/stylesheets/application.css by adding:
*= require bootstrap.min
Update: app/assets/javascripts/application.jsby adding:
//= require bootstrap.min
With this you can update bootstrap any time you want, don't need to wait gem to be updated. Also with this approach assets pipeline will use minified versions in production.
As many know, there is no need for a gem.
Steps to take:
Download Bootstrap
Direct download link Bootstrap 3.1.1
Or got to http://getbootstrap.com/
Copy
bootstrap/dist/css/bootstrap.css
bootstrap/dist/css/bootstrap.min.css
to: app/assets/stylesheets
Copy
bootstrap/dist/js/bootstrap.js
bootstrap/dist/js/bootstrap.min.js
to: app/assets/javascripts
Append to: app/assets/stylesheets/application.css
*= require bootstrap
Append to: app/assets/javascripts/application.js
//= require bootstrap
That is all. You are ready to add a new cool Bootstrap template.
Why app/ instead of vendor/?
It is important to add the files to app/assets, so in the future you'll be able to overwrite Bootstrap styles.
If later you want to add a custom.css.scss file with custom styles. You'll have something similar to this in application.css:
*= require bootstrap
*= require custom
If you placed the bootstrap files in app/assets, everything works as expected. But, if you placed them in vendor/assets, the Bootstrap files will be loaded last. Like this:
<link href="/assets/custom.css?body=1" media="screen" rel="stylesheet">
<link href="/assets/bootstrap.css?body=1" media="screen" rel="stylesheet">
So, some of your customizations won't be used as the Bootstrap styles will override them.
Reason behind this
Rails will search for assets in many locations; to get a list of this locations you can do this:
$ rails console
> Rails.application.config.assets.paths
In the output you'll see that app/assets takes precedence, thus loading it first.
This answer is for those of you looking to Install Bootstrap 3 in your Rails app without using a gem. There are two simple ways to do this that take less than 10 minutes. Pick the one that suites your needs best. Glyphicons and Javascript work and I've tested them with the latest beta of Rails 4.1.0 as well.
Using Bootstrap 3 with Rails 4 - The Bootstrap 3 files are copied into the vendor directory of your application.
Adding Bootstrap from a CDN to your Rails application - The Bootstrap 3 files are served from the Bootstrap CDN.
Number 2 above is the most flexible. All you need to do is change the version number that is stored in a layout helper. So you can run the Bootstrap version of your choice, whether that is 3.0.0, 3.0.3 or even older Bootstrap 2 releases.
Twitter now has a sass-ready version of bootstrap with gem included, so it is easier than ever to add it to Rails.
Simply add to your gemfile the following:
gem 'sass-rails', '>= 3.2' # sass-rails needs to be higher than 3.2
gem 'bootstrap-sass', '~> 3.1.1'
bundle install and restart your server to make the files available through the pipeline.
There is also support for compass and sass-only: https://github.com/twbs/bootstrap-sass
I use https://github.com/yabawock/bootstrap-sass-rails
Which is pretty much straight forward install, fast gem updates and followups and quick fixes in case is needed.
gem bootstrap-sass
bootstrap-sass is easy to drop into Rails with the asset pipeline.
In your Gemfile you need to add the bootstrap-sass gem, and ensure that the sass-rails gem is present - it is added to new Rails applications by default.
gem 'sass-rails', '>= 3.2' # sass-rails needs to be higher than 3.2
gem 'bootstrap-sass', '~> 3.0.3.0'
bundle install and restart your server to make the files available through the pipeline.
Source: http://rubydoc.info/gems/bootstrap-sass/3.0.3.0/frames
For me, the simplest way to do this is
1) Download and unzip bootstrap into vendor
2) Add the bootstrap path to your config
config.assets.paths << Rails.root.join("vendor/bootstrap-3.3.6-dist")
3) Require them
in css *= require css/bootstrap
in js //= require js/bootstrap
Done!
This methods makes the fonts load without any other special configuration and doesn't require moving the bootstrap files out of their self-contained directory.
Using this branch will hopefully solve the problem:
gem 'twitter-bootstrap-rails',
git: 'git://github.com/seyhunak/twitter-bootstrap-rails.git',
branch: 'bootstrap3'
I think the most up to date gem for the new bootstrap version is form anjlab.
But I don't know if it currently works good with other gems like simple_form when you do rails generate simple_form:install --bootstrap, etc. you may have to edit some initializers or configurations to fit the new bootstrap version.
I actually had an easy workaround on this one in which I nearly scratch my head on how to make it work. hahah!
Well, first I downloaded Bootstrap (the compiled css and js version).
Then I pasted all the bootstrap css files to the app/assets/stylesheets/.
And then I pasted all the bootstrap js files to the app/assets/javascripts/.
I reloaded the page and wallah! I just added bootstrap in my RoR!
I am trying to contribute to the opensource project jquery-datatables-rails. But it puzzles me as how it works. I have basic understanding of how to create gem. It seems like the project just simplifies the path references but nothing more. The four steps listed to install are
Add to the assets group in your Gemfile:
gem 'jquery-datatables-rails'
Install the gem:
bundle install
Add the JavaScript to application.js:
//= require dataTables/jquery.dataTables
Add the stylesheets to application.css:
*= require dataTables/jquery.dataTables
But I don't understand how Rails knows where to find dataTables folder and why we use jquery.dataTables to reference the file/class. The code is easy to understand, but the file organization confuses me so much. Is there any writing on topics related to my confusion?
Thanks.
Update:
Just found this great documentation on Rails Engine: http://edgeguides.rubyonrails.org/engines.html
By default Rails asset pipeline searches for the files in app/assets/, lib/assets, and vendor/assets of the Rails application. But this gem is a Rails engine, and it adds path of its own assets to default assets paths. It has its own vendor/assets.