Rails - Understanding application.js and application.css

Question

New to rails. Just trying to understand these two files in the \assests directory.

For example, the application.js file has lines such as:

//= require jquery
//= require jquery_ujs
//= require_tree .

I understand the require_tree . simply adds all JS files in the current directory. And by context, I can tell that require jquery adds the jQuery libraries. But where does it get these jQuery libraries from? I don't see any jquery.js files in my assets folder -- or in my entire application directly for that matter?

Similarly, I'm following some instructions to install twitter bootstrap (http://rubydoc.info/gems/bootstrap-sass-rails/2.3.2.0/frames). After adding my gems to the Gemfile, I need to add //= require bootstrap to the application.js file, and @import 'bootstrap' to my application.css and now it magically works!!! Why!? I can't find these files anywhere

Thanks!

Answer 1

the application.css and application.js are not regular css and js files (they could be, but they serve a different purpose

both are manifest files which tell the asset pipeline along with sprockets for js

so, as correctly pointed out by Michael Durrant's answer, http://guides.rubyonrails.org/asset_pipeline.html#manifest-files-and-directives will be the correct place

but according to your other questions it seems you are missing a pretty critical piece of the puzzle

Rails mainly works with gems. Gems are pieces of ruby code which you can tell to add to your rails app via bundler

when you add such a gem like the bootstrap gem, it gets installed (by default in the gems library where you have ruby installed - something like Ruby193\lib\ruby\gems\1.9.1\gems)

If you go there and look for the bootstrap gem you will find the css and js files that are included in the app, and also the jquery and jquery_ujs that you include in the manifest file

since the gems get installed alongside rails, rails don't mind where the files are (as long as it knows where they are).

So the manifest file tells rails "Hey, include these file for me, in this specific order" That is why you can include files that you wrote which are in the assets folder and files are included in a gem

If you don't include the files in the manifest but still install the gem that is equivalent to writing a css or js file, placing it in some folder and not telling rails that it exists. When you do tell rails where it is, via the manifest file, it will include it in the asset compilation process and you can access it regularly.

Alternativly, you don't have to use the asset pipeline for assets

you can include css and js file with a regular

 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

and just host your files somewhere and point it to the files, but the asset pipeline has many advantages and its really makes your life easier when you get to know it

Answer 2

To understand it, you have to look at Sprockets, which is used for compiling and serving web assets.

You can find these files using gem which. Here is an example with bootstrap-sass:

~ gem which bootstrap-sass
/Users/andr/.rbenv/versions/1.9.3-p194/lib/ruby/gems/1.9.1/gems/bootstrap-sass-2.3.0.1/lib/bootstrap-sass.rb

The explanation of @import 'bootstrap': https://github.com/thomas-mcdonald/bootstrap-sass#css and there is an open issue with comments.

Answer 3

It's rails magic! So no you cannot see the files within your own project directory. If you are really curious you can checkout the code for the gem on the gem's github page https://github.com/twbs/bootstrap

Also, if you really want to change something in the gem, you can fork the code into you own github, change things on your local branch, and then specify your own github as the source for the gem in your gemfile such as...

gem 'twitter-bootstrap', :git => '[email protected]:my_github/twitter_bootstrap.git'

But, you might not want to try that if you are really new to rails ;)