Precompiling rails-3 assets pipeline, makes javascript failing, preventing heroku deploy - javascript

I use datatables js on rails-3.2.3/bootstrap application, to sort table's fields.
If I run the app locally without precopiling assets pipeline, it works fine but, as soon I run :
RAILS_ENV=production bundle exec rake assets:precompile
the resulting public/assets prevent DataTables plug-in to work, even if it appear correctly packaged into public/assets/manifest.yml file and public/assets directory :
lsoave#ubuntu:~/rails/github/gitwatcher$ ls -l app/assets/javascripts
total 84
-rw-rw-r-- 1 lsoave lsoave 553 2012-04-27 21:36 application.js
-rw-rw-r-- 1 lsoave lsoave 99 2012-04-20 21:37 bootstrap.js.coffee
-rw-rw-r-- 1 lsoave lsoave 3387 2012-04-26 20:12 DT_bootstrap.js
-rw-rw-r-- 1 lsoave lsoave 71947 2012-04-26 20:12 jquery.dataTables.min.js
lsoave#ubuntu:~/rails/github/gitwatcher$
either application.js looks right :
app/assets/javascripts/application.js:
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require DT_bootstrap
//= require jquery.dataTables.min
//= require_tree .
Of course this is even more problematic because it prevent rails app to work on heroku ( I can compile the app from scratch, or use the locally precompiled version, but they don't work anyway ).
How can I do ?

I just got it working myself. Are you using the jquery-datatables-rails gem? If not, you should! Put this line in your gemfile:
gem 'jquery-datatables-rails', github: 'rweng/jquery-datatables-rails'
and run:
bundle install
NOTE: Don't put it in your assets group or it will not work when deploying to heroku (since the assets group is not used in production).
Also, make sure to put this line in your application.rb:
config.assets.initialize_on_precompile = false
Add these to your application.js
//= require dataTables/jquery.dataTables
//= require dataTables/jquery.dataTables.bootstrap
Add this to your application.css:
*= require dataTables/jquery.dataTables.bootstrap
And add this to your js.coffee file for your controller you are using datatables in:
If you are using fluid containers:
#// For fluid containers
$('#dashboard').dataTable({
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap"
});
If you are using fixed width containers:
#// For fixed width containers
$('.datatable').dataTable({
"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap"
});

There could be a few reasons this doesn't work. Best bet is start here:
http://www.neilmiddleton.com/heroku-asset-pipeline-faq/

Related

Rails can't require a javascript file that exists in the same folder

Just deployed a Rails 5.x application and installed a theme. The theme's contents are located within the app/assets/javascripts/theme-js and app/assets/stylesheets/theme-files folders.
Inside of the app/assets/javascripts/application.js file includes the following:
//= require jquery
//= require jquery_ujs
//= require_tree .
// Required for the SmartAdmin theme
//= require theme-js/app.config.js.erb
//= require theme-js/app.js
And inside of the app/assets/javascripts/theme-js folder are have the following files (included with the theme):
app.config.js.erb
app.js
application.js
The problem that I'm having is that inside of the application.js file contains a line that states: //= require app.config, but Rails generates me an error stating the following:
couldn't find file 'app.config' with type 'application/javascript'
Even though app.config.js.erb is in the same folder as application.js. Is there any reason why this would happen? Can't figure out why this won't work. I've even tried //= require app.config.js and //= require app.config.js.erb and neither one of them work.
I noticed that //= require ./app.config appears to work whereas //= require app,config doesn't. Something new with Rails 5.x perhaps? I'd have to modify all of the require statements to fit this unless I'm missing something.
Problem solved. Just needed to add the custom theme-js and theme-css folder to the assets pipeline so that Rails can search those folders for the appropriate files when using //= require <file>. Assuming this is what I needed to do, although I'm not sure if it's best practice.

Rails 5 - precompiling assets for heroku deployment - not working

I previously found help here for how to hide and show form fields based on whether a radio button in the same form is set to true or false.
This works fine in my development environment.
I just pushed to heroku and have checked the production version. Nothing happens when I select the true button in the form field that is supposed to reveal the hidden fields.
Others who have had similar issues describe this as a problem attributable to not precompiling assets.
Here is my setup.
application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery-fileupload/vendor/jquery.ui.widget
//= require jquery-fileupload/jquery.iframe-transport
//= require jquery-fileupload/jquery.fileupload
//= require bootstrap-sprockets
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
//= require underscore
// require gmaps/google
//= require markerclusterer
//= require cocoon
//= require_tree .
I expect that require_tree will pick up all of the files saved in my app/javascripts directory.
The js that solved the initial problem I posted about in my linked post is saved in app/javascripts/stances/commercial.js.
production.js
# Do not fallback to assets pipeline if a precompiled asset is missed.
config.assets.compile = true
# `config.assets.precompile` and `config.assets.version` have moved to config/initializers/assets.rb
initializers/assets.rb
# Be sure to restart your server when you modify this file.
# Version of your assets, change this if you want to expire all your assets.
Rails.application.config.assets.version = '1.0'
# Add additional assets to the asset load path
# Rails.application.config.assets.paths << Emoji.images_path
# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
# Rails.application.config.assets.precompile += %w( search.js )
When I push to heroku, I can see from the log that the precompile does happen:
Preparing app for Rails asset pipeline
remote: Running: rake assets:precompile
remote: Asset precompilation completed (3.51s)
The heroku docs say that I shouldn't need to manually precompile assets because it's done on deployment. That makes sense because the above log shows that it is happening. Is there something else I need to be doing to make heroku pick up my js files in production?
This post suggests that Heroku doesnt precompile if there is a public/assets/manifest.yml file in the repo. There is no such file in my application, so i'm expecting that heroku is compiling my assets. It looks from the log (copied above) that it has - so I'm confused about whether I'm supposed to precompile assets before pushing to production or rely on the process that Heroku is supposed to be doing.

Spree - cannot override js.coffee file

Simply followed instructions from http://guides.spreecommerce.com/developer/asset.html but it just doesn't work. New js files are included and loaded, but if I create file with the same name say product.js.coffee original file is loaded anyway. Any suggestions?
All.js
//= require jquery
//= require jquery_ujs
//= require spree/frontend
//= require_tree .
I've been tearing my hair out over this problem all morning.
In the end what worked for me is to specify every single file I wanted to overwrite in /app/assets/javascripts/spree/frontend/all.js.
E.g., if you want to overwrite cart.js.coffee and checkout/address.js.coffee, your all.js should look like:
//= require jquery
//= require jquery_ujs
//
//= require spree/frontend
//= require spree/frontend/cart
//= require spree/frontend/checkout/address
//
//= require_tree .
Don't ask me why that's necessary. My understanding is that //= require_tree . should do that automatically, but it my case, well, it wasn't.
After creating an all.js file and redundantly specifying each file, this finally worked for me. But I'm a spree/rails noob, so there's quite probably a better solution.
Edit:
Actually, to get this working I had to put the above in /vendor/assets/javascripts/spree/frontend/all.js and remove /app/assets/javascripts/spree/frontend/all.js. Still confused why this is necessary and why require_tree doesn't pick these up automatically, but happy to finally get it working.
Backporting this patch for Solidus 2.1.0 solved my issue of replacing/overwriting JS assets [1].
The problem appeared to be that there was an issue with Sprockets where using require_tree or relative require prevented JS assets in the pipeline from being overridden.
In summary
Create a new file under your project's vendor/assets with the same filename as the JS file you're going to replace in Solidus. For example, to overwrite the file solidus_backend/app/assets/javascripts/spree/backend/flash.coffee, create a replacement file in your project at your_project/{app,vendor}/assets/javascripts/spree/backend/flash.coffee. [2]
Create the files your_project/{app,vendor}/assets/javascripts/spree/backend.js and your_project/{app,vendor}/assets/javascripts/spree/backend/templates/index.js in your project.
Copy the contents for the backend.js and index.js files from solidusio/solidus#1613 into your project.
Remove any requires for files that do not exist in your Solidus version, and keep any custom requires if you already had backend.js and index.js defined. [3]
Footnotes
Includes .js, .coffee, .hbs, and any other files that compile to JavaScript during the asset pipeline compilation.
Either directory between {app,vendor}/assets in your project will work since they should both be in the asset pipeline loadpath. It's a matter of preference how you want to organise Solidus extensions and overrides.
I had to remove spree/backend/images/upload from backend.js
and spree/backend/templates/products/upload_progress from index.js since I was using an older version of Solidus and those files didn't exist yet, so I would get an FileNotFound error from Sprockets.

Bootstrap-sass gem Javascript not Working in Rails 4

when using the bootstrap-sass gem i have loaded my css files properly, however have been receiving an error when i try loading the javascript files. I have followed the procedure of loading javascript from https://github.com/twbs/bootstrap-sass however when I view my webpage on localhost I receive the error "couldn't find file 'bootstrap'"
This is what my application.js file looks like - Any help would be much appreciated!
Application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
// Loads all Bootstrap javascripts
//= require bootstrap
//= require_tree .
From the Rails 4 the :assets group isn't used anymore, please remove the group from Gemfile:
Rails 4.0 removed the assets group from Gemfile. You'd need to remove that line from your Gemfile when upgrading. You should also update your application file (in config/application.rb):
Bundler.require(:default, Rails.env)
I got it to work by removing gem 'bootstrap-sass', '~> 3.0.3.0' out of the assets group in gemfile! YAY
Did you bundle install and make sure you are loading application.js (from the assets pipeline).

jQuery/Javascript runs on local but not on Heroku

This is my app on Heroku: http://mighty-brushlands-6367.herokuapp.com/ and this is how it SHOULD look, as it does locally:
Well I did some googling. I check this solution: JQuery events are not working on heroku in production but work in development and others.
I went ahead to run heroku run rake assets:precompile but still can't get the effects to kick in on Heroku. This is how my application.js looks like:
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require bootstrap
//= require textEffect
I need some guidance. I'm a hungry-for-knowledge newbie.
Your Heroku app is getting a 404 error on the application.js & application.css files which leads me to believe it is not getting pushed to Heroku in the first place.
Try running rake assets:precompile in development, then the usual steps git add . , then git commit, and then git push.
The solution was to add
group :production, :staging do
gem 'rails_12factor'
end
To the Gemfile and commit again to Heroku

Categories

Resources