I'm running a Rails 5 app, Ruby 2.4 specified in my Gemfile. I've read through the Heroku assets pipeline article, and gone through the steps as I think I should.
In config/environments/production.rb:
config.assets.js_compressor = :uglifier
config.assets.css_compressor = :sass
config.assets.compile = true
In /config/assets, I have these lines:
Rails.application.config.serve_static_assets = true
Rails.application.config.assets.version = '1.0'
Rails.application.config.assets.precompile += %w( customers.js )
customers.js is the only file I specifically include at the top of a page, and Rails requires me to precompile it..
Just before deploying to Heroku using git, I run this command:
RAILS_ENV=production bundle exec rake assets:precompile
If you go to https://crateu.herokuapp.com, you'll see the stylesheet isn't handling the nav properly (I'm using the Materialize gem). What's confusing to me, is that the javascript is working for the dropdown items. And the styles that handle the nav are in application.sass, and the file is included - it's just not working.
If you go to an invalid URL, such as https://crateu.herokuapp.com/badurl, everything looks the way it should.
I have //= require_tree . in application.js, and when I view the source locally, I see all the files in the pipeline, and everything renders properly. I copied and pasted that source into 404.html in /public, which is why that page renders properly. When I view source on the herokuapp, none of those resources are included in the header. I'm sure it's something simple, a setting somewhere that I'm missing. Maybe I need to include everything in this line, not just customers.js?
Rails.application.config.assets.precompile += %w( customers.js )
I've tried everything I can think of. Any help would be greatly appreciated.
I'll put the response here because the comment section doesn't allow to me to put multiline code, you've to add to you Gemfile:
group :assets do
gem 'uglifier'
end
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.
We're precompiling our assets locally before pushing to Heroku -- so there's a load of files in public/assets that for the most part Heroku is using in production -- we're seeing asset compiliation notes in the log of 0ms. However, we're getting timeout errors when Heroku gets to javascript_include_tag "application" in our layout header and tries to recompile all the js all over again.
Is this meant to happen? How can we get Heroku to use only the locally-compiled assets and not keep spending 50s compiling assets again? Scaling up dynos does help, but that's not really addressing the root cause.
// edit to explain how we're using the asset pipeline //
We have a file in app/assets/javascript called application.js -- this is the manifest file that refers to all the javascript we need to be loaded. Here's a snippet:
//= require js/libs/jquery-1.7.2.min
//= require js/libs/jquery-ui-1.8.21.custom.min
//= require js/libs/jquery.ui.touch-punch.min
//= require js/libs/less-1.3.0.min
//= require js/libs/modernizr-2.5.3.min
There are 55 lines in this file.
We then use javascript_include_tag "application" in app/views/layouts/application.html.haml to call that manifest file.
there are multiple ways of using Rails asset pipeline on Heroku, and as you don't give us much details on implementation, the only thing I can recommend is reading this:
https://devcenter.heroku.com/articles/rails-asset-pipeline
If you update the question with precise details of implementation I could try to be more helpful.
Check your config/environments/production.rb settings:
config.assets.compile = false
config.assets.initialize_on_precompile = true
I'm using the jquery-ui-rails gem. It works fine on local host, but when I push to heroku it gives heroku logs shows this:
2012-04-11T02:28:59+00:00 app[web.1]: ActionView::Template::Error (couldn't find file 'jquery.ui.slider'
2012-04-11T02:28:59+00:00 app[web.1]: (in /app/app/assets/stylesheets/application.css:12)):
My production config file:
config.cache_classes = true
config.consider_all_requests_local = false
config.action_controller.perform_caching = true
config.serve_static_assets = true
config.assets.compress = true
config.assets.compile = true
config.assets.digest = true
Some questions online say to change config.assets.compile to false, but when I do that I get a application.css not precompiled error.
Taking the line gem jquery-ui-rails out of the assets group in the Gemfile seems to help. Similar problem/fix for the twitter bootstrap gem. :)
I had a similar, though not identical, problem. In my case, drag and drop methods worked locally, but Heroku complained that it couldn't find jquery-ui.
What solved it for me was this:
In the Gemfile, added
gem 'jquery-ui-rails'
In application.js, added
//= require jquery.ui.all
In application.css, added
*= require jquery.ui.all
Finally, of course, git commit -a -m "added jquery ui statements", followed by git push heroku master.
You might have some sort of syntax error in some of your asset files. As the assets are precompiled different types of assets are concatenated as one. Now if one of your CSS files has a syntax error in the end of it, it might not affect anything in our local environment as the assets are not precompiled. However, when the asset files are joint together as one big file anything that then happens to follow the error would not get loaded. This might result in missing JavaScript stuff, CSS rules, etc..