Passing stylesheets to heroku

Question

I have a local application that i am pushing to heroku, and a few hours ago it stopped working.

Heroku stopped recognizing bootstrap, and both my local host and heroku stopped recognizing my css file. What is really confusing me is that that 3 hours ago both heroku and my local host were working perfectly fine.

I rolled back my code to the last time i knew it worked, but my application.css file still wasn't being acknowledged, even when i knew it was the exact same code!

I've found nothing online or any answers on heroku support to either of my problems, so any help would be greatly appreciated.

All of my HTML file (the part heroku only is not recognizing):

<!DOCTYPE html>
<html>
<head><br><br>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Appv013</title>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="application.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse navbar-fixed-top ">
  <div class="container-fluid">
  <div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>                        
  </button>
  <%= link_to 'Home', root_path, class: 'navbar-brand' %>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li class="dropdown">
      <li><a href="#">Page 1</a></li>
      <!-- NOTES!!!  REPLACE ABOVE LINE AND
      USE BELOW FOR DROP DOWN THING

      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Page 1-1</a></li>
        <li><a href="#">Page 1-2</a></li>
        <li><a href="#">Page 1-3</a></li>
      </ul> -->
    </li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
  </ul>

  </ul>
</div>

<%= yield %>
 test 0.13.97
 </body>
 </html>

And my entire CSS appliation.css file (the part neither are recognizing):

body{
  margin-right: 10px;
  margin-left: 10px;
  background-color: #eee;
}
.navbar-inverse {
  background-color: #000000;
  border-color: #BFFFEA;
}

Edit: I am using heroku for git and below is the output from the terminal when i am running the local server

Started GET "/" for ::1 at 2015-08-04 15:26:39 -0400
Processing by VisitorsController#index as HTML
  (1.0ms)  SELECT COUNT(*) FROM "users"
Rendered visitors/index.html.erb within layouts/application (2.1ms)
Completed 200 OK in 7ms (Views: 5.6ms | ActiveRecord: 1.0ms
Started GET "/application.css" for ::1 at 2015-08-04 15:26:39 -0400
ActionController::RoutingError (No route matches [GET] "/application.css"):
actionpack (4.2.3) lib/action_dispatch/middleware/debug_exceptions.rb:21:in `call'
web-console (2.2.1) lib/web_console/middleware.rb:39:in `call'
actionpack (4.2.3) lib/action_dispatch/middleware/show_exceptions.rb:30:in `call'
railties (4.2.3) lib/rails/rack/logger.rb:38:in `call_app'
railties (4.2.3) lib/rails/rack/logger.rb:20:in `block in call'
activesupport (4.2.3) lib/active_support/tagged_logging.rb:68:in `block in tagged'
activesupport (4.2.3) lib/active_support/tagged_logging.rb:26:in `tagged'
activesupport (4.2.3) lib/active_support/tagged_logging.rb:68:in `tagged'
railties (4.2.3) lib/rails/rack/logger.rb:20:in `call'
quiet_assets (1.1.0) lib/quiet_assets.rb:27:in `call_with_quiet_assets'
actionpack (4.2.3) lib/action_dispatch/middleware/request_id.rb:21:in `call'
rack (1.6.4) lib/rack/methodoverride.rb:22:in `call'
rack (1.6.4) lib/rack/runtime.rb:18:in `call'
activesupport (4.2.3) lib/active_support/cache/strategy/local_cache_middleware.rb:28:in `call'
rack (1.6.4) lib/rack/lock.rb:17:in `call'
actionpack (4.2.3) lib/action_dispatch/middleware/static.rb:116:in `call'
rack (1.6.4) lib/rack/sendfile.rb:113:in `call'
railties (4.2.3) lib/rails/engine.rb:518:in `call'
railties (4.2.3) lib/rails/application.rb:165:in `call'
rack (1.6.4) lib/rack/lock.rb:17:in `call'
rack (1.6.4) lib/rack/content_length.rb:15:in `call'
rack (1.6.4) lib/rack/handler/webrick.rb:88:in `service'
/Users/Anna/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/webrick/httpserver.rb:138:in `service'
/Users/Anna/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/webrick/httpserver.rb:94:in `run'
/Users/Anna/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/webrick/server.rb:294:in `block in start_thread'

What does the dev tool console show when you load your page locally vs on heroku? In chrome or firefox this shortcut is usually ctrl+shift+i or ctrl+shift+c . In particular, the network should show you if the resources are visible and the console will show a loading error (if there is one). — bwarren2, Jul 30 '15 at 22:28
the network shows bootstrap for local host and the webkit inherited values for heroku (the default im pretty sure) — Anna, Jul 31 '15 at 00:14
I am not sure what you mean by "not recognizing.". In the network tab of the dev tools, are the requests for your stylesheets getting a 200 OK? Are there any errors in the console? — bwarren2, Jul 31 '15 at 00:34
@bwarren2 the application.css stylesheet is getting a 404 error, the bootstrap stylesheet is getting a 304. and oddly the application.css has a size of 0 b — Anna, Aug 04 '15 at 17:47
Have you set config.serve_static_assets = true in application.rb ? And add 'rails_12factor', group: :production in gemfile? And try to rake assets:precompile before to deploy on heroku. — Pierangelo Orizio, Aug 04 '15 at 19:21
@PierangeloOrizio i already have rails_12factor in my gemfile under production however i dont have config.serve_static_assets = true or false in my application.rb, so i added it and set it to true, but nothing changed — Anna, Aug 04 '15 at 19:41
@PierangeloOrizio i also tried the rake assets:precompile and re-deploying, but there was no change — Anna, Aug 04 '15 at 19:48

score 1 · Accepted Answer · edited May 23 '17 at 12:29

It sounds like the URI to your CSS file is borked.

If you could include the whole HTML page you are trying to serve and the dev tools output for the css requests, it would be easier to debug what is going on.

What I suspect is happening is either the path to your application.css is wrong, or your web server is not configured to serve static files from whereever the css file is, or both.

Are you using a version control system (like git)? If so, do you have a commit for a working version of this page, and can you see the difference with git diff?

I apologize if this feels super drawn out, debugging remotely is tricky. We'll get it, though!

EDIT:

Based on the terminal output you posted, which is the log from your local running webserver, the GET request for your application.css is failing.

Started GET "/application.css" for ::1 at 2015-08-04 15:26:39 -0400
ActionController::RoutingError (No route matches [GET] "/application.css"):

Unfortunately Ruby is not my area, but I can try to provide general advice.

The problem you are facing is known as serving static files (this being the good google food for solutions to your problem), and depending on the config of your app the solution will vary. One answer worth reading is here, and maybe this will help. Basically, there is a folder that contains your css file (which I am guessing is called "public"), and you need to expose files in that directory so that your webserver will offer them on the URLs you include in your html files. You can use the terminal output locally to see details of the error, or when things are pushed to heroku you can use the chrome dev tools for details on the request/response. You need those requests for your static to return 200, 304, or some other "here's some data" response code.

You won't need this trick until you have fixed the local error, but one useful tool when debugging in production on heroku is heroku run bash. This will let you SSH into a dyno running what you have deployed on heroku, which is useful when you need to diagnose something missing there (for example).

More generally, it seems like you are just starting out in the wonderful world of web development. This is really good, because webdev is super fun! My personal soapbox, though, is that Ruby is not the most friendly starter language; it has a lot of baked-in "magic", and is not too opinionated about you doing things "the right way". By contrast, when I was learning I found Python + Django to be a wonderful combination; Python (+ Django) makes it easy to do things the right way and makes you work to do things the wrong way, so it is easier to stay on track. It also helps that Django has amazing documentation. YMMV, but this is advice that mattered for me when I was where you are.

Thank you for all your help! i added the entire HTML file and I wasn't sure what the dev tools output was, so from what I found online I think I posted the correct output, but let me know if I posted the wrong thing — Anna, Aug 04 '15 at 19:45

Passing stylesheets to heroku

1 Answers1