rails: application.css Failed to load resource: the server responded with a status of 404 (Not Found)

Question

I pushed some code to heroku and my app broke. I got this errors in browser console:

https://agile-mesa-47878.herokuapp.com/javascripts/application.js Failed to load resource: the server responded with a status of 404 (Not Found) 2 https://agile-mesa-47878.herokuapp.com/stylesheets/application.css Failed to load resource: the server responded with a status of 404 (Not Found)

This happened second time today. After first I just pushed new code to server and it started working. But now I am starting worrying if something is wrong. Locally it works fine

My application.js file
// 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 any plugin's vendor/assets/javascripts directory 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/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap
//= require_tree .
//= require turbolinks

My application.css file

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require bootstrap
 *= require_tree .
 *= require_self
 *= require_custom
 */

Answer 1

Make sure you use rails helpers to get your assets paths: Never hard code '/assets/name.extension' paths in your code, Heroku will compile the assets for you and their final paths will look more like: /assets/application-6aae32862efc758cf08c7b7fc0e85e15.js

Simply using <%= javascript_include_tag 'application' %> and <%= stylesheet_link_tag 'application' %> helper methods should work for you.

If you are still having troubles, how about you follow the debugging section of Heroku's help: https://devcenter.heroku.com/articles/rails-4-asset-pipeline#debugging

In particular:

$ heroku run rails console
> puts helper.asset_path("application.js")
/assets/application-6aae32862efc758cf08c7b7fc0e85e15.js

Answer 2

change config.assets.compile = true in config/environments/production.rb