Rails 4.1+, so there isn't built-in support for an :assets group
I want to keep Heroku's precompile on push behaviour, but don't want the asset gems loaded by the rails server. We don't use any kind of inline coffeescript or scss template rendering in the app, only in the assets, so it's just wasted memory at runtime.
I've played around with extending the rake task, configuring sprocket-rails, and even changing application.js to application.js.erb and adding things like
//= <% require 'jquery-rails' %>
//= require 'jquery'
but still get these errors:
Sprockets::FileNotFound: couldn't find file 'jquery'
This comment from a rails issue complaining about the same problem also doesn't work for me now, and it's a couple of years old so perhaps something changed that breaks it? Or am I doing it wrong?
If I keep the asset gems in the default Gemfile group everything works fine.
The point here is to not have them loaded in the production environment, but to have
RAILS_ENV=production rake assets:precompile task
load them before it executes (and fails because of missing libraries)
Related
my assets (i.e. css and js) in vendor folders are not showing in heroku staging environment, however, images in app/assets/images works and it also works in development environment though. I do not want to move the assets in vendors folder to the app folder because I want to keep vendor templates separate.
Below are my setup and the list of things I have tried:
app/assets/stylesheets/application.css.scss
*= require_tree .
*= require_self
*= require style.default
app/assets/stylesheets/application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery-1.11.1.min
//= require jquery-migrate-1.2.1.min
//= require jquery-ui-1.10.3.min
//= require modernizr.min
//= require bootstrap.min
//= require jquery.sparkline.min
//= require toggles.min
//= require retina.min
//= require jquery.cookies
//= require custom
//= require dashboard
//= require_tree .
config/initializers/assets.rb
Rails.application.config.assets.precompile += %w( *.css *.js )
Ran the following command in terminal
RAILS_ENV=production rake assets:precompile
RAILS_ENV=staging rake assets:precompile
rake assets:precompile
heroku run rake assets:precompile
Results from pushing to Heroku using "git push staging master". Manifest file was detected as shown below.
remote: Bundle complete! 35 Gemfile dependencies, 85 gems now installed.
remote: Gems in the groups development and test were not installed.
remote: Bundled gems are installed into ./vendor/bundle.
remote: Bundle completed (1.14s)
remote: Cleaning up the bundler cache.
remote: Detected manifest file, assuming assets were compiled locally
environments/staging.rb
config.serve_static_files = true
environments/production.rb
config.serve_static_files = true
Heroku Config
RACK_ENV: staging
RAILS_ENV: staging
GemFile
group :production do
gem 'unicorn'
gem 'rails_12factor'
gem 'pg'
gem 'heroku-deflater'
end
Rails Version
Rails 4.2.0
Ruby Version
ruby 2.1.3p242 (2014-09-19 revision 47630) [x86_64-darwin13.0]
Note: "config.assets.compile = true" works, but the idea is to precompile all the assets, not to rely on compile
Many thanks for taking the effort to look at my work.
UPDATE
group :production :staging do
gem 'unicorn'
gem 'rails_12factor'
gem 'pg'
gem 'heroku-deflater'
end
adding :staging to in gemfile didnt work.
config/application.rb
config.serve_static_assets = true
adding config.serve_static_assets in application.rb file didnt work..
So I further ran the following command in the staging heroku:
Rails.application.config.assets
{:_blocks=>[#<Proc:0x007fbbb0bf1558#/app/vendor/bundle/ruby/2.1.0/gems/autoprefixer-rails-5.1.8/lib/autoprefixer-rails/railtie.rb:14>, #<Proc:0x007fbbb39ac0d8#/app/vendor/bundle/ruby/2.1.0/gems/sass-rails-5.0.3/lib/sass/rails/railtie.rb:56>], :paths=>["/app/app/assets/images", "/app/app/assets/javascripts", "/app/app/assets/stylesheets", "/app/vendor/assets/fonts", "/app/vendor/assets/javascripts", "/app/vendor/assets/stylesheets", "/app/vendor/bundle/ruby/2.1.0/gems/bootstrap_form-2.2.0/app/assets/stylesheets", "/app/vendor/bundle/ruby/2.1.0/gems/turbolinks-2.5.3/lib/assets/javascripts", "/app/vendor/bundle/ruby/2.1.0/gems/jquery-rails-4.0.3/vendor/assets/javascripts", "/app/vendor/bundle/ruby/2.1.0/gems/coffee-rails-4.1.0/lib/assets/javascripts"], :prefix=>"/assets", :manifest=>nil, :precompile=>[#<Proc:0x007fbbb1c00228#/app/vendor/bundle/ruby/2.1.0/gems/sprockets-rails-2.2.4/lib/sprockets/railtie.rb:60 (lambda)>, /(?:\/|\\|\A)application\.(css|js)$/, "*.css", "*.js"], :version=>"1.0", :debug=>false, :compile=>false, :digest=>true, :js_compressor=>:uglifier, :css_compressor=>:sass}
Rails.application.config.assets.precompile
[#<Proc:0x007fbbb1c00228#/app/vendor/bundle/ruby/2.1.0/gems/sprockets-rails-2.2.4/lib/sprockets/railtie.rb:60 (lambda)>, /(?:\/|\\|\A)application\.(css|js)$/, "*.css", "*.js"]
Also ran "heroku run rails c" then executed the following:
irb(main):002:0> puts helper.asset_path("style.default.css")
/assets/style.default-84d0516848a763e0b8b8b7005f7ae816.css
Used the following debugging method for heroku staging:
$ heroku run bash
$ ls public/assets
Output below
angular.min-4d194b7f4f12ed8eafec2d7a0c835904.js
angular.min-4d194b7f4f12ed8eafec2d7a0c835904.js.gz
animate.delay-0faaa57b808dee7f42f39ede364a56fb.css
animate.delay-0faaa57b808dee7f42f39ede364a56fb.css.gz
animate.min-fa7d9f43baff3065a44d391f5fb24dec.css
animate.min-fa7d9f43baff3065a44d391f5fb24dec.css.gz
application-30c5d5ea113f5d302dc72bac7a453e2c.js
application-30c5d5ea113f5d302dc72bac7a453e2c.js.gz
application-76133410c1e24aced49dbeb2178152ad.css
application-76133410c1e24aced49dbeb2178152ad.css.gz
basketcats-4984b24e5c745a825577436dcb5b1f7d.jpg
blogger-icon-5330825185af26ebf796626aab07992f.png
bootstrap-07c26bce6cfb4d4d3e91c2a7f3316ddd.js
bootstrap-07c26bce6cfb4d4d3e91c2a7f3316ddd.js.gz
bootstrap-datetimepicker.min-23b3c4525c36203db02c2000791bc8ee.js
bootstrap-datetimepicker.min-23b3c4525c36203db02c2000791bc8ee.js.gz
bootstrap-editable-c6281cc109e5208b5848e765b4d14da8.css
bootstrap-editable-c6281cc109e5208b5848e765b4d14da8.css.gz
bootstrap-editable.min-86d8ede345d06aca30530a7f95bb3931.js
bootstrap-editable.min-86d8ede345d06aca30530a7f95bb3931.js.gz
bootstrap-f2f6511fea58665b99245ff7db3724e8.css
bootstrap-f2f6511fea58665b99245ff7db3724e8.css.gz
bootstrap.min-237197a13514aaac49ee55c33a5ad363.css
bootstrap.min-237197a13514aaac49ee55c33a5ad363.css.gz
bootstrap.min-b0cd0a0791f795c4eb27679904b83f74.js
bootstrap.min-b0cd0a0791f795c4eb27679904b83f74.js.gz
bootstrap-override-2285f5091ba098ac5e5b620d7db3ca55.css
bootstrap-override-2285f5091ba098ac5e5b620d7db3ca55.css.gz
bootstrap-override-rtl-bdad9b2be471ec2aef1e04ac90377f0f.css
bootstrap-override-rtl-bdad9b2be471ec2aef1e04ac90377f0f.css.gz
bootstrap-rtl.min-b644011950d9b9fa31bc53f9705e829e.css
bootstrap-rtl.min-b644011950d9b9fa31bc53f9705e829e.css.gz
bootstrap-timepicker.min-92be9db07f554142043df94d011f0e92.js
bootstrap-timepicker.min-92be9db07f554142043df94d011f0e92.js.gz
bootstrap-timepicker.min-e317eaa00793dd79a1f8ef9fc3e792a9.css
bootstrap-timepicker.min-e317eaa00793dd79a1f8ef9fc3e792a9.css.gz
bootstrap-wizard.min-5a2783eaf5831f429126f8396dcda73e.js
bootstrap-wizard.min-5a2783eaf5831f429126f8396dcda73e.js.gz
bootstrap-wysihtml5-2024d0b1f3587a8af79c9375d11cbd96.css
bootstrap-wysihtml5-2024d0b1f3587a8af79c9375d11cbd96.css.gz
bootstrap-wysihtml5-845f80e90c6fe0c9944d78f7853f84c4.js
bootstrap-wysihtml5-845f80e90c6fe0c9944d78f7853f84c4.js.gz
business cat1-010151a22ba0940c53db4db068fbbb15.jpg
CatJira_logo1-347a04943f1922fa83c1e04cb9aa8d74.jpg
CatJira_logo-8b34a4e3a18a5ce98b6caf040eec0325.png
catplay-33ba713cd70738acbc11793b804789aa.jpg
charts-8dcf96513924266cccab40b5c3abd928.js
charts-8dcf96513924266cccab40b5c3abd928.js.gz
chosen.jquery.min-20f9114437b36992aa9d5a3236f3b2ee.js
chosen.jquery.min-20f9114437b36992aa9d5a3236f3b2ee.js.gz
city2-51820272cfac0a176203d69b5673f92c.jpg
codemirror
coffee-script-01f57d14cfd792fc3e4e41634619b898.js
coffee-script-01f57d14cfd792fc3e4e41634619b898.js.gz
colorpicker-274db192cab38eda2fe54fbe602aee81.js
colorpicker-274db192cab38eda2fe54fbe602aee81.js.gz
colorpicker-e8da384e85b77e601f62ec93d6517dc3.css
colorpicker-e8da384e85b77e601f62ec93d6517dc3.css.gz
creatives-398bec8370d485f61d0efbff7a47960c.jpg
custom-9bac754fb2b328db1aa727679a5333e0.js
custom-9bac754fb2b328db1aa727679a5333e0.js.gz
dashboard-387a6961818e57e508986d4fffaab4f6.js
dashboard-387a6961818e57e508986d4fffaab4f6.js.gz
dropzone-9e3f4db91b70bf7422487de2a3695678.css
dropzone-9e3f4db91b70bf7422487de2a3695678.css.gz
dropzone.min-64643fa97a6d52f7a63b1c17296ca35e.js
dropzone.min-64643fa97a6d52f7a63b1c17296ca35e.js.gz
errors-64e62ddc273c2f5847f30d698ca14b67.css
errors-64e62ddc273c2f5847f30d698ca14b67.css.gz
errors-fcec5b5a277ac7c20cc9f45a209a3bcd.js
errors-fcec5b5a277ac7c20cc9f45a209a3bcd.js.gz
facebook-icon-0d4efe4f92f6e68c8e0304ee83013016.png
favicon-f94a92edfd00b1cc38b6658933ba54fd.ico
font-awesome-7235b656c02e8e1a0af4839e29862cb0.css
font-awesome-7235b656c02e8e1a0af4839e29862cb0.css.gz
font-awesome.min-f44605a25d83e9849f7a91abbc1fa013.css
font-awesome.min-f44605a25d83e9849f7a91abbc1fa013.css.gz
font.helvetica-neue-3bee85020746eede72c4dcd3bf80bf91.css
font.helvetica-neue-3bee85020746eede72c4dcd3bf80bf91.css.gz
font.roboto-27de563886805db8510b1488e25a43ca.css
font.roboto-27de563886805db8510b1488e25a43ca.css.gz
fullcalendar-8c8f481e6c52d01d9089fb9276e301ed.css
fullcalendar-8c8f481e6c52d01d9089fb9276e301ed.css.gz
fullcalendar.min-e0e065736f355ad455f035972ee4f0f1.js
fullcalendar.min-e0e065736f355ad455f035972ee4f0f1.js.gz
gmaps-4e0a34409a72c75b23ead4560c2067ad.js
gmaps-4e0a34409a72c75b23ead4560c2067ad.js.gz
google_analytics-99bd28f02528c13b44624e84c5c90c83.js
google_analytics-99bd28f02528c13b44624e84c5c90c83.js.gz
holder-80b1ec50bf56cecf1ad3aa13205b728b.js
holder-80b1ec50bf56cecf1ad3aa13205b728b.js.gz
html5shiv-b943c98fa95fcffd9369e767949c2e8a.js
html5shiv-b943c98fa95fcffd9369e767949c2e8a.js.gz
instagram-icon-16abed513241b2885051980c313b9d47.png
jquery-1.11.1.min-89fdfdd2b961da1c1dac57e8beeff312.js
jquery-1.11.1.min-89fdfdd2b961da1c1dac57e8beeff312.js.gz
jquery2-f6430688c576903899df06242228577b.js
jquery2-f6430688c576903899df06242228577b.js.gz
jquery2.min-081439c47c59b5a03e286d1fbbd00553.js
jquery2.min-081439c47c59b5a03e286d1fbbd00553.js.gz
jquery-87424c3c19e96d4fb033c10ebe21ec40.js
jquery-87424c3c19e96d4fb033c10ebe21ec40.js.gz
jquery.autogrow-textarea-1db755051eeda2b4be077aba1883904c.js
jquery.autogrow-textarea-1db755051eeda2b4be077aba1883904c.js.gz
jquery.cookies-238dfd7d92c77c8d827e6e7df271e41d.js
jquery.cookies-238dfd7d92c77c8d827e6e7df271e41d.js.gz
jquery.datatables-2b6b927f456a60d7541726d69bd85eca.css
jquery.datatables-2b6b927f456a60d7541726d69bd85eca.css.gz
jquery.datatables.min-1f0cd1992a3aece4031123fd7fa1cb47.js
jquery.datatables.min-1f0cd1992a3aece4031123fd7fa1cb47.js.gz
jquery.gritter-d330d1b29b5213c7b69a1f4f1830419d.css
jquery.gritter-d330d1b29b5213c7b69a1f4f1830419d.css.gz
jquery.gritter.min-89110826c434b3cf1d6f58c5e7ddcb26.js
jquery.gritter.min-89110826c434b3cf1d6f58c5e7ddcb26.js.gz
jquery-jvectormap-1.2.2-b627cb9f9622cd8b2f0694578f32ea50.css
jquery-jvectormap-1.2.2-b627cb9f9622cd8b2f0694578f32ea50.css.gz
jquery-jvectormap-1.2.2.min-dd65e7b55b1b9df68da7896b0a1c77e1.js
jquery-jvectormap-1.2.2.min-dd65e7b55b1b9df68da7896b0a1c77e1.js.gz
jquery-jvectormap-us-aea-en-2118d2319e11000b32c7942e7d4b1b3e.js
jquery-jvectormap-us-aea-en-2118d2319e11000b32c7942e7d4b1b3e.js.gz
jquery-jvectormap-world-mill-en-7520a1f25b1fefbd129b81520fa33fc4.js
jquery-jvectormap-world-mill-en-7520a1f25b1fefbd129b81520fa33fc4.js.gz
jquery.maskedinput.min-f586a7257f244041eab790c5d211f37b.js
jquery.maskedinput.min-f586a7257f244041eab790c5d211f37b.js.gz
jquery-migrate-1.2.1.min-16a67272140ccc9c6aa87df04c15c468.js
jquery-migrate-1.2.1.min-16a67272140ccc9c6aa87df04c15c468.js.gz
jquery.min-eb8e576f52996bce7c557babc6e8a79e.js
jquery.min-eb8e576f52996bce7c557babc6e8a79e.js.gz
jquery.mousewheel-a78b3418946de2bdd2899b0fd7d8e009.js
jquery.mousewheel-a78b3418946de2bdd2899b0fd7d8e009.js.gz
jquery.prettyPhoto-f78f329a32e47bf51932d09c30564afa.js
jquery.prettyPhoto-f78f329a32e47bf51932d09c30564afa.js.gz
jquery.sparkline.min-639608ad39e4b3f2136934fed4dba81b.js
jquery.sparkline.min-639608ad39e4b3f2136934fed4dba81b.js.gz
jquery.tagsinput-da8da10523fb6f8ff3faf6903beb93e4.css
jquery.tagsinput-da8da10523fb6f8ff3faf6903beb93e4.css.gz
jquery.tagsinput.min-4d118b62ab063be6a215b5b26880c4fa.js
jquery.tagsinput.min-4d118b62ab063be6a215b5b26880c4fa.js.gz
jquery-ui-1.10.3-eeb57f0a91c90ebccc313b755d972670.css
jquery-ui-1.10.3-eeb57f0a91c90ebccc313b755d972670.css.gz
jquery-ui-1.10.3.min-8ff0c79f1466addcf6bf4aaf666799c8.js
jquery-ui-1.10.3.min-8ff0c79f1466addcf6bf4aaf666799c8.js.gz
jquery.ui.touch-punch.min-0062e10ac0b77dac44049f0b244a1343.js
jquery.ui.touch-punch.min-0062e10ac0b77dac44049f0b244a1343.js.gz
jquery_ujs-e27bd20a10d28155845a22d71ef94f2f.js
jquery_ujs-e27bd20a10d28155845a22d71ef94f2f.js.gz
jquery.validate.min-cc10e387641dc3a427c0b2a1d6a5cc08.js
jquery.validate.min-cc10e387641dc3a427c0b2a1d6a5cc08.js.gz
lato-9eab93d341daca0b64eb83e500c36c7d.css
lato-9eab93d341daca0b64eb83e500c36c7d.css.gz
Lookupkitten1-inverted-468ad96030a9c7c555a9e598eec25705.jpg
manifest-75f18e2d98f206cfb74b04585af62025.json
masonry.pkgd.min-39a9db9644583f39a4afc5245d1a7b48.js
masonry.pkgd.min-39a9db9644583f39a4afc5245d1a7b48.js.gz
modernizr.min-e85e2cf3694aba170e11bb364d4f38c8.js
modernizr.min-e85e2cf3694aba170e11bb364d4f38c8.js.gz
moment-1e5ae5b0dd501d933da017e415e6658d.js
moment-1e5ae5b0dd501d933da017e415e6658d.js.gz
morris-b2de433af8eec1719536e9b00c3d78cd.css
morris-b2de433af8eec1719536e9b00c3d78cd.css.gz
morris.min-544a2438115ee60523b71a1a99f94e34.js
morris.min-544a2438115ee60523b71a1a99f94e34.js.gz
pinterest-icon-0738f59cb68a09fbe0387c25b94cfe91.png
prettyPhoto-b0211d39e61dd455b051e9df2100c166.css
prettyPhoto-b0211d39e61dd455b051e9df2100c166.css.gz
publishing2-88893fd664cca1fb36e83ef0b1f05707.jpg
rails_bootstrap_forms-85a44da0cf14906976bde10ea0a42bbc.css
rails_bootstrap_forms-85a44da0cf14906976bde10ea0a42bbc.css.gz
raphael-2.1.0.min-7f08beb5a8d60af0dff9d34187bae9a9.js
raphael-2.1.0.min-7f08beb5a8d60af0dff9d34187bae9a9.js.gz
respond.min-943d23379ec213cd5fac370c1407a384.js
respond.min-943d23379ec213cd5fac370c1407a384.js.gz
retina.min-0a2f559b265ead424c27ab96d85d0b27.js
retina.min-0a2f559b265ead424c27ab96d85d0b27.js.gz
roboto
roboto-c2c7202e06866f7695a402846d6fc487.css
roboto-c2c7202e06866f7695a402846d6fc487.css.gz
select2-b4679ffd84b4af1e00b5e2f63c909de1.css
select2-b4679ffd84b4af1e00b5e2f63c909de1.css.gz
select2.min-dc009a4312724dfd32e04dc84c7cc822.js
select2.min-dc009a4312724dfd32e04dc84c7cc822.js.gz
style.bluenav-eef27f15d23db5d20d1fa45aacfb6c4a.css
style.bluenav-eef27f15d23db5d20d1fa45aacfb6c4a.css.gz
style.darkknight-41adb57795102ac40409822f26a389a8.css
style.darkknight-41adb57795102ac40409822f26a389a8.css.gz
style.default-84d0516848a763e0b8b8b7005f7ae816.css
style.default-84d0516848a763e0b8b8b7005f7ae816.css.gz
style.default-rtl-fe345a8404e132c62dba693b02debd84.css
style.default-rtl-fe345a8404e132c62dba693b02debd84.css.gz
style.dodgerblue-c3b44311e0db6c2ab5ea0c6bebd550da.css
style.dodgerblue-c3b44311e0db6c2ab5ea0c6bebd550da.css.gz
style.greyjoy-25f81d84ba89347d264f4aa2b84dbdbd.css
style.greyjoy-25f81d84ba89347d264f4aa2b84dbdbd.css.gz
style.inverse-ec1a47cdc185e55472a8115af3d99a8d.css
style.inverse-ec1a47cdc185e55472a8115af3d99a8d.css.gz
style.katniss-ccdda17b7614d5093fcf61465ae8aa9d.css
style.katniss-ccdda17b7614d5093fcf61465ae8aa9d.css.gz
toggles-428ccce58542ffa3ba9c1d3cfe253d36.css
toggles-428ccce58542ffa3ba9c1d3cfe253d36.css.gz
toggles.min-fea21bf806ff8388d5a8ad6ecd67fb47.js
toggles.min-fea21bf806ff8388d5a8ad6ecd67fb47.js.gz
tumblr-icon-6c8ddc711d5f3f9dc2e163268fc282c4.png
turbolinks-f87b3583ca50adb0488b031297f5580d.js
turbolinks-f87b3583ca50adb0488b031297f5580d.js.gz
twitter-icon-e96caf41d7a48f88f48a2e25e74e07d8.png
visitors-f2c7b5fd67318e31b093b301ddb1b606.js
visitors-f2c7b5fd67318e31b093b301ddb1b606.js.gz
weather-icons.min-463072e65eba39f9c8908b334705937e.css
weather-icons.min-463072e65eba39f9c8908b334705937e.css.gz
wordpress-icon-707488a657e1f5e8c018b0b2335d37ca.png
wysihtml5-0.3.0.min-d70870a054c85cf85d1d8ec0adc94935.js
wysihtml5-0.3.0.min-d70870a054c85cf85d1d8ec0adc94935.js.gz
wysiwyg-color-db6d982825da1878a5b105a812ba227e.css
wysiwyg-color-db6d982825da1878a5b105a812ba227e.css.gz
youtube-icon-e0a4bd918821ef87fc2f9410c9d1054a.png
I am not sure if you saw this page, but I had similar issue and this helped me out.
I would check to make sure you have config.serve_static_assets = true in your config/application.rb
If you do I would skip down to the debugging section
So after some trial and error and getting feedback, below are some take away that I hope can help others in the future. The short of it is that, if you face any problem, always refer to Rails Asset Pipeline. This is because different rails versions has different methods. At the point of this answer, mine is Rails Version: Rails 4.2.0. Ruby Version: ruby 2.1.3p242 (2014-09-19 revision 47630) [x86_64-darwin13.0]
Do note that this answer applied to my situation, may vary with yours.
My Problem Statement:
I bought a bootstrap template online and would like to incorporate it to my application. Below are the following steps I took to resolve the problem.
Put files into vendor/assets - I cut and paste all the templates into my vendors/assets folder. All of the assets are properly arranged into their respective fonts folders, images folders, javascript folders and stylesheets folder.
Only keep what I need - I removed the files that I do not need and only keep those that I need. This requires some reading of the vendor files.
Ensure correct assets path - after which I went through each each files and ensure that the files are referencing the assets correctly. Any css files that has image and font references, I changed it to css.erb format, then put <%= asset_path(...) %> into url(...). Note that there are various ways to do this i.e. use font_path or image_path, use css.scss instead of css.erb etc. Please refer to documentation from asset pipeline. I also removed any #import url('<your file>.css'); cause I will be using *= require <your files> later
Config application.js and application.css in app/assets - I then key in "require " into application.js and application.css manifest respectively based on the names of the files I have in my vendor/assets folder. D note that the order is important. The manifest reads from top to bottom. Therefore, always ensure pre-requisite files are kept above files that depends on it. For example, I have a default.css file that depends on font.css, hence *= require font.css comes before *= require default.css.
Create your view - then I created a some html.erb views files with controllers and routes.
Test development locally - Launch the app locally through rails s. If you put the files correctly in their respective folders in vendor/assets. Your application should show up nicely. Else, please refer to the instructions above and try again.
Config to test production locally - to test production locally, first, go to your secrets.yml file and change the production secret_key_base to the one secret_key_base from your development (IMPORTANT to revert this back to ENV once you are done testing),
Precompile and open rails app in production locally - Once you have configured, run RAILS_ENV=production rake assets:precompilein the
terminal. You should see your assets being precompiled. Once the
precompile is done, you should be able to find an assets folder in
your public folder (your images, videos and fonts assets should each
have their own files, whilst all css and js will be cramped into one file as application-<md5>.css and application-<md5>.js respectively). If this didnt workout properly, your precompile fails. It is most probably due to css or
js syntax error, go back and check the files and make the changes.
If you have made any corrective changes, please run rake assets:clobber to remove the public/assets then run the production precompile again. Once all is good, run the following command in your terminal rails s -e production, this
opens up your server locally but in production environment instead
of dev environment. When running localhost:3000 if your secret_key_base is not copied properly, you will see an error in your browser asking you to make changes to the secret key.
Viewing localhost:3000 in browser - If your view in local production is different from that of your local development view. For example, most of the css did not show up properly, troubleshoot by
right click on the parts of the website that is not reflected properly, click on inspect element, you should be able to see 404 errors. this means that your code or assets in .css and .js is not referenced or configured properly. go back to point 8 and redo.
check your rails server logs to find if there are any ActionController::RoutingError (No route matches [GET] "/assets/.... this means that your code or assets in .css and .js is not referenced or configured properly. go back to point 8 and redo.
Pushing to heroku - Once everything is good locally, you can now push to heroku. because you ran the precompile for production env locally, you will see that during your push to heroku, heroku will state something like remote: Detected manifest file, assuming assets were compiled locally. else, heroku will have to precompile for you. Note that heroku use rails_12factor gem in production. Additionally, these gems, sass-rails, coffee-rails, uglifier, come in default when you created your rails app which is essential for your asset pipeline.
Things I did not do to resolve my problem:
Though the methods below are valid,
I DID NOT use config.serve_static_assets = true for application.rb, production.rb or staging.rb
I DID NOT ran rake assets:precompile
I DID NOT ran heroku run rake assets:precompile
I DID NOT put Rails.application.config.assets.precompile += %w( *.css *.js ) in config/initializers/assets.rb
I DID NOT resort to using config.assets.compile = true
I DID NOT use config.assets.paths << Rails.root.join("lib", "videoplayer", "flash") in config/application.rb
Other links that could be helpful:
No route matches [GET] /assets
https://github.com/FortAwesome/font-awesome-sass/issues/48
Things I could not explain
This solution only worked when I recreated a new rails app. My old rails app did not work as when I ran precompile, the css and js files in public/assets were not in one application-<md5>.css and application-<md5>.js respectively. instead, they were scattered to their own font.css, default.css etc etc, as seen from "Output below" shown above. Will be doing more research to get down to the bottom of this.
I hope my answer above helped. Do give feedback if I made any mistakes or missed out anything.
Adding the vendor asset to precompile in assets.rb (f.e. Rails.application.config.assets.precompile += %w( highcharts.js ) worked form me, when deploying to Heroku. (and I didn't use a joker like *.js)
I'm using Datetimepicker and Slider. I include them in my Gemfile
gem 'datetimepicker-rails', github: 'zpaulovics/datetimepicker-rails', branch: 'master', submodules: true
source 'https://rails-assets.org' do
# gem 'rails-assets-select2-bootstrap-css'
gem 'rails-assets-seiyria-bootstrap-slider'
end
In my application.js
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
//= require seiyria-bootstrap-slider
This works great in development, but when I run RAILS_ENV=production rake assets:precompile on the server (capistrano deploy or by hand) these, and others don't seem to get pulled in. Chrome complains specifically about these two first.
I know I could put the line Rails.application.config.assets.precompile += %w( *.js ) and then do a =javascript_include_tag :XXXX, but this defeats the purpose of sprockets/manifest right?
My understanding with sprockets/manifest is when I require it in my application.js it'll be included with the deploy so the client hits the server less.
Is there something I'm missing?
EDIT
Traced the problem to the uglifier gem. When I remove/comment out config.assets.js_compressor = :uglifier and recompile the JS starts working again.
Any thoughts?
this is because things work differently in development as compared to production.
few thing to note:-
No CSS or JS files will be available to your app through the asset pipeline unless they are included in other files OR listed in the config.precompile directive.Only application.css and application.js are available by default of all the CSS and JS files.
Every file that is not a Javascript file or CSS file that is in the app/assets folder will be copied by Rails into the public/assets folder when you compile your assets.So if you want to add some web fonts, you could make an app/assets/fonts/ folder and put your fonts in there, these will then be copied to public/assets/fonts folder when you compile your assets. Note that your app/assets/stylesheets/fonts.css.scss file that references those fonts will NOT be copied over unless you either added it to the config.assets.precompile directive or required it from your application.css
for config.assets.compile...If it is set to "true" (which it is by default in development) then Rails will try to find a Javascript or CSS file by first looking in the public/assets directory and if it can't find it, will hunt through your app/assets folder looking for the file. If it finds it in app/assets it will go ahead and compile on the fly and then serve this asset up.
The problem with this is that you don't notice it happening in development, then you commit everything and push to production and BOOM, everything is broken with 500 errors because production has config.assets.compile set to "false".This prevents the app from "falling back" and trying to load the file directly instead of using the asset pipeline.
# Don't fallback to assets pipeline if a precompiled asset is missed
config.assets.compile = false
Why don't you just have this set to "true" in every environment? Well, because it is sloooooow. And you don't want slow in production
Run RAILS_ENV=production rake assets:clean assets:precompile
check public/assets directory and verify that assets are compiled..if its not empty...that means asset pipeline is working but path is not correct.use asset_helpers to set the path of assets in css files.
I installed twitter bootstrap by copying the files into my assets directory as per the instructions here: http://www.erikminkel.com/2013/09/01/twitter-bootstrap-3-in-a-rails-4-application/
After following the instructions exactly as presented and executing "rake assets:precompile RAILS_ENV=development", I am able to use bootstrap 3 in my development rails server.
However, when I try to execute "heroku run rake assets:precompile RAILS_ENV=production", I get this error:
Sass::SyntaxError: Invalid CSS after "...ss","sources":[": expected "|",
was ""less/theme.les..." (in /app/app/assets/stylesheets/application.css) (sass):444
I am not sure what this means. When I open "application.css" in the assets/stylesheets folder, I can't even find a line 444. I do have some scaffold files left over after running "rails g scaffold ..." commands -- could that be causing this problem? And obviously, the deployed heroku app looks like a non-bootstrap app when I view it from the heroku page and throws a "resource not found" error.
In public/assets/application-mydigest.ccs, I found the following line of code that causes the error:
{"version":3,"file":"bootstrap-theme.css","sources":["less/theme.less","less/mixins/vendor-prefixes.less","bootstrap-theme.css","less/mixins/gradients.less","less/mixins/reset-filter.less"],"names":[],"mappings":"AAeA;;;;;;EAME,0CAAA;EC+CA,6FAAA;EACQ,qFAAA;EC5DT;AFiBC;;;;;;;;;;;;EC0CA,0DAAA;EACQ,kDAAA;EC7CT;AFqCC;;EAEE,wBAAA;EEnCH;AFwCD;EG/CI,0EAAA;EACA,qEAAA
However, it seems odd that this would only happen on production. Moreover, the CSS syntax looks fine.
This error means the assets compilation failed because of an invalid css syntax into a file you require in application.css.
In bootstrap repository there is a less directory and you can't precompile less files with rails.
If you want to use Rails and Bootstrap on a production environment I think use bootstrap-sass gem is a better option
Have you tried using rails-assets instead of the referenced method of adding Bootstrap 3? I use it on Heroku with success... and just add my own custom Bootstrap css in my normal assets folders which get loaded after the vanilla Bootstrap 3 and override it. Just add gem 'rails-assets-bootstrap' along with source 'https://rails-assets.org' to your gem file. May help diagnose if nothing else.
EIther of the two things you must take care to avoid assets compilation errors when you go live.
- Add all your assets(js/css) in manifest file(application.js/application.css)
- OR
- use assets.precompile=%w(custom.css custom.js) directive to handle them explicitly
because when u precompile...rails copies everyting(images/fonts) except js/css into public folder to be taken care by the server(apache),hence the setting # Don't fallback to assets pipeline if a precompiled asset is missed config.assets.compile = false in production.rb during assets precompile fallback is disabled by default in production/staging as Rails assumes it will be handled by webserver.Hence we have manifest file to define our assets which gets precompiled during assets:precompile and verified by looking for public/assets/javascripts/application.css/js after compilation which gets created requiring all files mentioned in app/assets/stylesheets/application.css and app/assets/javascripts/application.js after running assets:precompile...so hope u know where you missed.
FOR MORE DETAILS..REFER this
I am using Capistrano to precompile my assets during deployment, and I am getting an error that isn't very useful to me.
* executing "cd -- path/to/releases/20130507161214 && bundle exec rake RAILS_ENV=production RAILS_GROUPS=assets assets:precompile"
*** rake aborted!
*** wrong argument type nil (expected Data)
*** (in /path/to/app/assets/javascripts/application.js)
*** /path/to/gems/therubyracer-0.11.4/lib/v8/context.rb:67: in 'New'
Here is my application.js that is referred:
//= require jquery
//= require jquery_ujs
//= require bootstrap
Update
So I tried to just remove application.js entirely and run it again, but then it complained about another js file of mine (but the same non-helpful error). Then I removed all of my js files and it started to complain about my css files.
If all js and css files are removed, the precompile does succeed (but obviously without my needed js and css files).
I am using .js.coffee and .css.scss for all of my non-image assets.
Update
#TomDavies answer did indeed help me, but still having the issue. During deployment, it was just failing on precompile and not giving me information. So I did what Tom mentioned, I precompiled on my development machine, but in the production environment, and noticed I was also having issues.
The error it gave me was "Unexpected INDENT", but it would not tell me a line number, just a file name...
I eventually discovered I was missing a comma in my ajax request. Apparently it works without it in the development environment, just doesn't precompile without it...
Here is what I had:
$.ajax 'some/url'
success:
alert 'yay!'
Here is what I needed:
$.ajax 'some/url',
success:
alert 'yay!'
Notice the comma at the end of the top line... now precompiles great in development. I thought for sure that fixing the errors during precompile on the development machine (but production environment) would fix the deployment issue, but to no avail. It is still failing with the same error at the top wrong argument type nil (expected Data).
tl;dr
I am able to run the rake assets:precompile RAILS_ENV=production on my development machine, doesn't work on the production machine, gives the error at the top. Not sure how to debug this one.
This looks like a possible gem problem, since it's failing on the application.js file and your content looks correct. Which version of Ruby are you working with? If you have switched different versions, you may want to clear out your gems directory and reinstall them from scratch. I have experienced issues with gems installed under one Ruby version leaving fodder behind that causes strange things to happen under another version.
Your file should be called application.scss if you want to import other scss from it.
I'm not sure of you exact error, but for asset pipeline issues you should always try compiling them locally in development. The errors are usually much more obvious that way and you can trial / error more easily. Here are some steps I usually leave in my config/environments/development.rb for getting asset precompilation to work locally:
# NOTE: To test asset pipeline in dev uncomment the following configs and run:
#
# $ RAILS_ENV=development rake assets:precompile
#
# It is recommended you rm -rf public/assets when you are finished or this may affect
# your local dev environment
#
# config.assets.compress = true
# config.assets.compile = false
# config.assets.digest = true
And here is a gist of the same:
https://gist.github.com/atomgiant/5438672
I would also look to using Node.js as the ExecJS runtime. There are several documented issues with TheRubyRacer and memory management (https://github.com/cowboyd/therubyracer/issues/350) and it seems that the project has been abandoned (https://github.com/cowboyd/therubyracer/pull/348).
Assuming you have the latest Node.js installed, you can prepend/append EXECJS_RUNTIME="Node" to your precompile task:
rake assets:precompile RAILS_ENV=production EXECJS_RUNTIME="Node"
As a bonus, this sped up asset compilation by an order of magnitude.
I have an application that uses redactor (a wysiwyg editor) it works perfectly locally, and it also works when I upload it, except the config file, which is located in a subfolder doesent do anything, when pushing to Heroku. I tried precompiling, using:
RAILS_ENV=production bundle exec rake assets:precompile
and
bundle exec rake assets:precompile
I have config.assets.enabled = false
The config.js file, that is not working on Heroku, is included in application.js as redactor-rails/config
What can be the problem ?
Have you added config.js to your local git repository before pushing?
[Edit]
A couple more things to check. Are you using the redactor-rails gem, and if so, is it in your gemfile?
gem 'jquery-rails'
gem 'redactor-rails'
Is your gemfile.lock checked into git?
[Edit 2]
I've now tested this out, and indeed, there's an issue with redactor-rails, which causes custom config to be overwritten by the gem's default.
On the github repo, there is a solution, which I've tested on heroku, and copied here:
rails generate redactor:config generates the file app\assets\redactor-rails\config.js.
This will not work in the asset pipeline correctly as the rake assets:precompile task
will still take config.js from the gem instead of the app (not that it'll work fine in
development though). See Overriding backend assets in production environment
The solution is to create your own config.js (or any file name) and put it anywhere in your >app's assets. Then when requiring redactor, instead of //= require redactor-rails, use:
//= require redactor-rails/redactor.min
//= require path/to/custom/config
Works for me. Hope that helps. https://github.com/SammyLin/redactor-rails/issues/16