Precompiling additional assets with Rails - ruby-on-rails

I've been converting a project to use the asset pipeline, but am hitting a wall with one part of the deployment. I have getting the below error after a cap deploy to a production server. (Everything work's ok in development mode without the precompilation of assets)
simile-ajax-api.js isn't precompiled
the project structure is something like
|-app/
|-assets/
|-javascripts/
|- application.js
|-vendor/
|-assets/
|-javascripts/
|-timeline/
|-timeline_ajax/
|-simile-ajax-api.js
In my application.rb I have added the following line
config.assets.paths << "vendor/assets/timeline/timeline_ajax"
and in my production.rb, I have added
precompile_list = %w(app lib vendor).map do |path|
Dir[Rails.root.join(*%W(#{path} assets ** *))].select do |f|
f =~ /(\.js|\.s?css)/
end
end.flatten.map do |f|
f.split(File::SEPARATOR).last
end.uniq
config.assets.precompile = (config.assets.precompile + precompile_list).uniq
config.assets.precompile << Rails.root.join(*%w( vendor assets timeline timeline_ajax simile-ajax-api.js ))
The application.js looks like this:
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery_ujs
//= require global
//= require_tree ../../../vendor/assets/timeline/timeline_ajax/.
//= require_tree ../../../vendor/assets/timeline/timeline_js/.
//= require timeline-api
//= require jquery.dataTables.min
//= require FixedHeader.min
//= require ColVis.min
//= require jquery.ba-resize.min
//= require jquery-ui
//= require jquery.blockUI
//= require jquery-ui-timepicker-addon
//= require autocomplete-rails
//= require_tree ../../../vendor/assets/javascripts/.
//= require_tree .
and finally, the bit where it is getting loaded in application.html.haml is
%html
%head
- page_title = #page_title ? "#{#page_title}" : ''
%title= strip_tags page_title
:javascript
Timeline_ajax_url= "#{asset_path('simile-ajax-api.js')}";
Timeline_urlPrefix= '/assets/';
Timeline_parameters='bundle=true'
Any idea's where I'm going wrong? Please let me know if there are more details you need.

I think there is no need to state the path like this :
//= require_tree ../../../vendor/assets/timeline/timeline_ajax/.
Just :
//= require_tree timeline/timeline_ajax/.
Because all the assets (no matter where are located ) are looked up the same way . Simply put - if the dir is named assets , the pipeline looks up for files to be included .
EDIT : As it seems your vendor directory structure is a little strange : normally you copy your .js files directly to assets/javascripts directory . I think including assets/vendor/timeline is going to make things complicated . Just copy timeline dir into vendor/assets/javascripts.

Related

Rails application.js: require all js files in a given directory

In application.js I have the following line:
//= require pivottable/dist/pivot.js
However, I want to require all .js files in pivottable/dist. I tried something like:
//= require pivottable/dist/*.js
or this:
//= require pivottable/dist/*
But to no avail. How do I require all js files in a given directory in my application.js?

how to effectively organize vendor css and js files togheter in rails assets

(I'm new both to Rails and SO, so excuse if I'm not doing it right)
I am trying to adapt a regular third-party web template in my rails 4 application. I have a vendor folder with other files and subfolders like bootstrap.js, Nivo-slider and Isotope which contain both .css and .js files.
So I moved all files and subfolders to vendor/assets and included //= require_tree ../../../vendor/assets/ in my application.js, as recommended here. So my application.js looks like
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require turbolinks
//= require_tree ../../../vendor/assets/
//= require_tree .
And in my layout file:
<%=stylesheet_link_tag "application.css" -%>
<%=javascript_include_tag "application" -%>
when I execute it on my server I get Sprockets::FileOutsidePaths exception:
Showing /home/valle/RoR/grifo/app/views/layouts/application.html.erb where line #25 raised:
/home/valle/RoR/grifo/vendor/assets/bootstrap.js isn't in paths: /home/valle/RoR/grifo/app/assets/images, /home/valle/RoR/grifo/app/assets/javascripts, /home/valle/RoR/grifo/app/assets/stylesheets, /home/valle/RoR/grifo/lib/assets/circle-flip-slideshow, /home/valle/RoR/grifo/lib/assets/isotope, /home/valle/RoR/grifo/lib/assets/javascripts, /home/valle/RoR/grifo/lib/assets/jflickrfeed, /home/valle/RoR/grifo/lib/assets/magnific-popup, /home/valle/RoR/grifo/lib/assets/mediaelement, /home/valle/RoR/grifo/lib/assets/nivo-slider, /home/valle/RoR/grifo/lib/assets/owl-carousel, /home/valle/RoR/grifo/lib/assets/rs-plugin, /home/valle/RoR/grifo/lib/assets/stylesheets, /home/valle/RoR/grifo/lib/assets/twitterjs, /home/valle/.rvm/gems/ruby-1.9.3-p392/gems/modernizr-rails-2.7.1/vendor/assets/javascripts, /home/valle/.rvm/gems/ruby-1.9.3-p392/gems/turbolinks-2.2.2/lib/assets/javascripts, /home/valle/.rvm/gems/ruby-1.9.3-p392/gems/jquery-rails-3.1.0/vendor/assets/javascripts, /home/valle/.rvm/gems/ruby-1.9.3-p392/gems/coffee-rails-4.0.1/lib/assets/javascripts, /home/valle/.rvm/gems/ruby-1.9.3-p392/bundler/gems/twitter-bootstrap-rails-663760e67b80/app/assets/fonts, /home/valle/.rvm/gems/ruby-1.9.3-p392/bundler/gems/twitter-bootstrap-rails-663760e67b80/app/assets/images, /home/valle/.rvm/gems/ruby-1.9.3-p392/bundler/gems/twitter-bootstrap-rails-663760e67b80/app/assets/javascripts, /home/valle/.rvm/gems/ruby-1.9.3-p392/bundler/gems/twitter-bootstrap-rails-663760e67b80/app/assets/stylesheets, /home/valle/.rvm/gems/ruby-1.9.3-p392/bundler/gems/twitter-bootstrap-rails-663760e67b80/vendor/assets/stylesheets
I thought Sprockets would take all js or css files in all assets folders, precompile, unify and minify them, but now it seems I need to specify the path. How could I solve it?
Besides, is it a problem not to have separated javascript and css folders in vendors?
in rails 4 they have removed vendor folder,so,assets will not server from vendor.
in that Rails.application.config.assets.paths not contains vendor,if you want you have to add the path like
in config/application.rb
config.assets.paths << "#{Rails.root}/vendor/assets"
Update application.js file as
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require turbolinks
//= require_tree .
//= require otherJsFiles
And in application.css file require other css file as
*= require otherCssFiles
Require each js and css file in application.js and application.css file placed in vendor/assets.

Deploying to heroku without require_tree in application.js

After following this angular tutorial, I'm trying to deploy to heroku. I'm getting the error:
rake aborted!
require_tree argument must be a directory
The tutorial instructed me to the remove the line //= require tree . from application.js. When I add it back for heroku deployment, it breaks my app. Is there any workaround so I don't have to include //= require_tree .?
I've tried adding //= require_tree ./mobile and creating /mobile stub directory with a single file so it would commit. Didn't work.
Edit:
application.js
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require angular
//= require ng-infinite-scroll.min.js
//= require angular-ui-router.min.js
//= require ng-rails-csrf
My angular app config file:
#= require_self
#= require_tree ./services/global
#= require_tree ./services/main
#= require_tree ./filters/global
#= require_tree ./filters/main
#= require_tree ./controllers/global
#= require_tree ./controllers/main
#= require_tree ./directives/global
#= require_tree ./directives/main
Not sure if it's relevant, but my application.css.scss file includes *= require_tree .
Your application.js looks good. You should now look into all the directories that your angluar.js config files is trying to load. Look for directories that are empty. Git does not create a physical directory if a directory is empty. Hope this helps.

Rails. Large vendor.js?

I have vendor.js file in my rails project containing several vendor libraries altogether and after adding some new libraries I'm facing into this problem in development environment
Started GET "/assets/vendor.js" for 10.40.129.65 at 2013-03-03 14:01:24 +0400
Cache write: 0d6281da1957dd9c5e063fb636c50bd260dae5e2
Cache read: 0d6281da1957dd9c5e063fb636c50bd260dae5e2
Cache read: http://work:3000/assets/vendor.js?
Cache write: http://work:3000/assets/vendor.js?
!! Rack application returned nil body. Probably you wanted it to be an empty string?
!! Unexpected error while processing request: undefined method `each' for nil:NilClass
Trying to remove some libraries fixes the issue and precompiled assets works fine. But I want to make it work in development. Help me please.
vendor.js:
//= require ./vendor/ext/stacktrace.js
//= require jquery
//= require jquery_ujs
//= require underscore
//= require backbone
//= require twitter/bootstrap
//= require js_notifier
//= require ./vendor/ext/mustache-1.4.2
//= require ./vendor/ext/strftime
//= require ./vendor/ext/moment
//= require ./vendor/ext/langs.js
//= require ./vendor/ext/jquery.jgrowl_minimized.js
//= require ./vendor/ext/jquery-ui-1.10.0.custom.min.js
//= require ./vendor/ext/jquery-ui-sliderAccess.js
//= require ./vendor/ext/jquery-ui-timepicker-addon.js
//= require ./vendor/ext/backbone.paginator.js
//= require ./vendor/ext/jquery-deparam.min.js
//= require ./vendor/ext/select2.js
//= require_tree ./templates
//= require ./vendor/channels.js.coffee
//= require ./vendor/ext/bootstrap.switch.js
//= require ./vendor/ext/private_pub
//= require ./vendor/ext/spin.js
//= require ./vendor/ext/jquery.spin.js
I'm using Memcached + Dalli
UPD:
I've set cache_store in every environment explicitly (developemnt.rb, production.rb and test.rb) and this fixed the issue until I opened Google Chrome for which the issue raised again. As a result, in FF everything works fine and Chrome fails to load vendor.js (the same server instance (thin) and in the same time for both browsers)
log for ff request:
Cache read: http://work:3000/assets/vendor.js?
Cache read: 577d6ed0d98975b583329c312bd25667620f2497
log for chrome request (same as above):
Started GET "/assets/vendor.js" for 10.40.129.65 at 2013-03-03 20:37:11 +0400
Cache write: 577d6ed0d98975b583329c312bd25667620f2497
Cache read: 577d6ed0d98975b583329c312bd25667620f2497
Cache read: http://work:3000/assets/vendor.js?
Cache write: http://work:3000/assets/vendor.js?
!! Rack application returned nil body. Probably you wanted it to be an empty string?
!! Unexpected error while processing request: undefined method `each' for nil:NilClass
You may consider to apply index.js technique , as described in this Rails guide (2.1.2). Try to split your big file and include the parts in a manifest file , for example:
In your /app/vendor/assets/javascripts you create a new directory my_libraries and place parts in it . Then in the same directory you create index.js manifest file and include files as normal:
//= require file1
//= require file2
and in your application.js :
//= require my_libraries
EDIT: One solution would be : in your /vendor/ext (the correct path is app/vendor/assets/javascripts/ext, if you have a path like /vendor/ext it will not be clear it is meant to be managed as asset dir , and also it will not be clear what asset you include - js or css) to create index.js with content:
//= require_tree .
and in application.js :
//= require ext
and then you should remove all the references to vendor dir from your application.js manifest . Another mistake is including files in your manifest with .js prefix. In the manifest file you should state inclusions without prefix.
Take a look at the asset-pipeline's documentation explaining the require_tree usage.

How to include jquery ui (with styles) in ruby on rails correctly?

I`ve seen some information here but it looks kind of not audible for me.
I included //= require jquery-ui in application.js
Where should i place directory with styles and how it should be called? Could you please provide step by step instruction.. Thanks!
You simply put your stylesheets and javascripts as follow
directories path for javascript
vendor -> assets -> javascript
and require file in application.js
//= require jquery-ui
//= require_self
//= require_tree .
directories path for style sheets
vendor -> assets -> stylesheets
*=require style
*= require_tree .
It will sure work for you

Resources