We Keep Coding

Ruby on rails javascript doesn't load properly (HTML5 template)

I am very new in ruby, so please don't judge me too much :)
I was trying to make this template http://freebiesbug.com/code-stuff/sedna-one-page-website-template/ run on rails. And it went pretty well.
However, I have stuck on configuring javascript parameters (the way it loads on rails). I am not sure how to do that correctly. Things that slides in the template doesn't work for me, like apple images and slider of employees in the bottom...
I tried to include all file names in javascript.rb file and also I have used:
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
but non of these worked.
Any ideas where I may made a gap?
Thanks!

Javascript files end in .js, not .rb, so thats one problem.
The line
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
tells rails to package and include the application.js file found at app/assets/javascripts/application.js. Assuming your template has one associated javascript file, you can copy and paste the contents of that file into your application.js file (which may be the easiest solution). You can also add any javascript (or coffeescript) files to the app/assets/javascripts folder, and those files will be packaged and served up in the default configuration of rails.

where to put the external css and js in rails

I am just starting in rails and loading external resources like css and js has been an issue for me. Reading in few places, i found out that, css should be placed in app/assets/stylesheets and js inside app/assets/javascripts. After doing this i called my css and js in my view file like
<%= stylesheet_link_tag "<<path to my css>>" %>
for css and
<%= javascript_include_tag "<<path to my js>>" %>
and i included this line inside my config/initializers/assets.rb
Rails.application.config.assets.precompile += [/.*\.js/,/.*\.css/]
but doing this gave me some sort of compilation error. But i am not sure whether its the correct way or not to load external resource.Where are the other place that i need to change in order to load css and js and the best practice to include external resources in rails in terms of performance as well.

Asset Pipeline
What you're referring to is something called the asset pipeline - the app/assets folder is where you store all the "dependent" files for your HTML -- css / js / images etc.
The asset pipeline is very simple -
The asset pipeline provides a framework to concatenate and minify or compress JavaScript and CSS assets. It also adds the ability to write these assets in other languages and pre-processors such as CoffeeScript, Sass and ERB.
It's function is to provide you with a way to "compile" your CSS/JS into condensed (minified) files, which you can call in your front-end HTML. The ultimate aim is to make your "assets" as small as possible, so your page loads fastest.
--
In your case, you'll want to look up Sprockets Manifest Directives --
#app/assets/stylesheets/application.css
/*
*= require self
*= require_tree .
*/
The above will take every CSS file in app/assets/stylesheets and concatenate them into a single application.css file:
#app/views/layouts/application.html.erb
<%= stylesheet_link_tag :application %>
So to answer your question directly, you only need to store external stylesheets in your app/assets/stylesheets folder.
If you have a "real" external stylesheet (hosted by Google or something), you'll want to include it in your layout as follows:
#app/views/layouts/application.html.erb
<%= stylesheet_link_tag :application, "http://cdn.google.com/stylesheet.css" %>

Once you add your css and js in assests respective folder, you have to require those files in application.js and application.css and then you can include these two files in your html. Try following code:
application.css
//= require abc
application.js
//= require xyz
In your html:
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "application" %>

javascript_include_tag doesn't see js in vendors on production environment

Rails version 3.1
I have file vendor/assets/javascripts/plugins/orphus.js
This script defined in application.js.coffee
#= require plugins/orphus
I call this script in template via following code:
<%= javascript_include_tag 'plugins/orphus' %>
It includes from development environment, but when I am deploy to production it causes error:
http://hostname/assets/plugins/orphus.js 404 (Not Found)
What causes this problem? Something tells me that root of the problem lies in production.rb

Check the asset paths to see if 'plugins/orphus' is in the paths.
rails c
y Rails.application.config.assets.paths
if not you should add this line into 'application.rb'
config.assets.paths << "#{Rails}/plugins/orphus/"

Here is my solution.
orphus.js placed to /app/assets/javascripts/
application.js was fixed:
#= require orphus
in template fixed to:
<%= javascript_include_tag 'orphus' %>
and run at production
rake assets:precompile
UPDATE:
here is complete orphus gem: https://github.com/tonic20/orphus_rails

Rails assets not available on production

I have this specific issue. On a (LARGE) rails setup I have a backbone project in /app/assets/reader/. All of my javascript assets are precompiling dynamically into reader.js, this works fine. My i10n files in locale/ don't play nice however because they don't need any precompiling. In development it works fine, but in production they are not available.
In my /app/views/layouts/reader.html.erb file I have the following lines:
<%= javascript_include_tag "reader" %>
<%= javascript_include_tag "locale/en" %>
The problem is that the lower one results in a 404 error on production.
I've tried the following alternatives:
<%= javascript_include_tag "en" %>
<%= javascript_include_tag "locale/en" %>
<%= javascript_include_tag "reader/locale/en" %>
None of these seem work. The last one even broke on development.
PS: in applicaton.rb I have:
...
config.assets.precompile += [
...
'reader.js',
...
]
...
config.assets.paths << File.join(Rails.root, 'app', 'assets', 'reader', 'locale')

You removed all files in public directory folder then restarted server? Also inside of your js folder you have a folder
reader/locale/en.js
? Double check all paths and if it works in development you should check out your error log in production to see where the problem is coming from.

The solution was not in the javascript_include_tag, but rather in the way config.assets.precompile was formatted.
By default Rails scans for any subfolder DIRECTLY within assets. That meant that the locale file had to be added as locale/en.js to config.assets.precompile, and that the config.assets.paths line was not even necessary at all.
The way rails scans subfolder is really specific and important. Get that right, and it should all work like a breeze. Once you know how it works, it actually gets quite powerful.
Pro tip:
I ended up using locale/*.js in combination with <%= javascript_include_tag "locale/#{I18n.locale}" %>, as I actually have a lot of locale files.

Had the same issue, turns out there is a line in config/environments/production.rb:
config.public_file_server.enabled = ENV["RAILS_SERVE_STATIC_FILES"].present?
which didn't allow Rails to serve static files, including the precompiled assets. Changing it to
config.public_file_server.enabled = true
fixes the issue.
This is caused by the fact that Nginx and Apache handle static serving on their own. But Rails is configured to use Puma by default so this doesn't really make too much sense for it to default to these settings.

Where should javascript files and stylesheets be added to a Rails project?

I'm unclear about where javascript files and stylesheets should be added to a Rails project. Perhaps they should be added to public/javascripts and public/stylesheets respectively. Then they're copied to app/assets? Or perhaps it's the other way around.
I've experimented with <%= stylesheet_link_tag :all %> and :default and just explicitly naming my stylesheets but I'm still confused.
Where should javascript files and stylesheets be added to a Rails project?

It is the other way around. You add stylesheets and javascripts to their respectable folders in assets.
You then use:
= stylesheet_link_tag "application"
= javascript_include_tag "application"
Check the guide for details http://guides.rubyonrails.org/asset_pipeline.html

In a Rails 3.1 application, where the asset pipeline is enabled, you want to place your script/stylesheet assets in app/assets. Rails will automagically find them via Sprockets and serve them up minimized and contaminated (in production).