Standard way to include Javascript files in app?

Question

Say that I have pulled a fancy.js file from somewhere online, what are the steps that I should take to include it in my Rails 4 application?

Right now I have the following

Move fancy.js to assets/javascripts folder
add //= require fancy to application.js asset pipeline
???

Are there more steps after 1 and 2, or am I doing this all wrong to begin with?

BryanH · Accepted Answer · 2016-01-15 18:09:25Z

6

Looks like you are on the right path. Take a look inside app/assets/javascripts/application.js

When you created a new app (i.e., rails new app_name), it should have added

//= require_tree .

Simply add references to additional javascript files you wish to include.

EXAMPLE

//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require fancy
//= require_tree .

You can find more info on Adding Javascript File to Rails

edited Jan 15, 2016 at 18:09

BryanH

6,1133 gold badges36 silver badges47 bronze badges

answered Nov 3, 2014 at 18:53

Cyzanfar

7,1849 gold badges47 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user3277633 Over a year ago

thanks for the reply. Are there any special syntax convention that I should be aware of? what if the file name is fancy.min.js as oppose to fancy.js? is the syntax simple require fancy.min ?

Cyzanfar Over a year ago

you'll have to add the file like so ://= require fancy.min.js

user3277633 Over a year ago

I see, thanks! The reason I'm asking is because I intend to use a jquery.backstretch.min.js file in my rails app, so I would have to add //= require jquery.backstretch.min.js to my application.js right?

user3277633 Over a year ago

thanks! do you happen to know if I need to do any additional steps other than declaring the js syntax if I only want to use jquery.backstretch.min.js in, let's say, sessions/new.html.erb?

Cyzanfar Over a year ago

just add this to your page: <%= javascript_include_tag "my_javascipt_file" %>

max · Accepted Answer · 2014-11-03 21:25:03Z

A better alternative when using popular third-party assets is to look on Rubygems for a gemified version of the asset. In this case fancybox2-rails.

gem 'fancybox2-rails', '~> 0.2.8'

Adding the gem to your application.js with sprockets:

//= require jquery
//= require fancybox

Or in a script tag:

<%= javascript_include_tag "fancybox" %>

And the css:

/*
 *= require_self
 *= require fancybox
 *= require_tree .
 */

The advantage of using Gemified packages is that its easier to maintain and you avoid polluting your codebase with 3rd party code. The drawback is that the gem may be several versions older than the actual software it encapsulates.

If you need to add vendor files you should probably be adding them to lib/assets and not app/assets, since it makes a clear separation between the code which actually drives your unique app and dependencies.

Another thing to remember is that assets are most often compiled at deploy time in your production environment (this is especially true on Heroku) and not per request (which would be very slow). So you cannot use conditions in your sprockets directives.

Collectives™ on Stack Overflow

Standard way to include Javascript files in app?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related