Styling for app deployed to Heroku different than local dev

Ruby on Rails
1

I have a basic Rails app built using Suspenders. One of my pages is a form that I have not added any styling to, just what comes from _forms.scss. In dev the form has the basic styling I would expect. However, after I deployed to Heroku the form lacks all styling and has the form elements all on the same line.

Are there extra setup steps to get Bourbon / Neat / Bitters to work correctly after being deployed to Heroku?

Here is my application.css.scss file:

@charset "utf-8";

@import "normalize-rails";
@import "bourbon";
@import "base/grid-settings";
@import "neat";
@import "base/base";
@import "refills/flashes";

Any advice is appreciated.

2

Are you precompiling assets?

rake assets:precompile
3

Yes, here are the lines from the push to Heroku:

-----> Preparing app for Rails asset pipeline
       Running: rake assets:precompile
       Asset precompilation completed (3.12s)
4

I meant manually precompiling. Not sure if it will have any effect for you but I can never get my css working right on Heroku until I precompile it myself.

5

I tried that and it didn’t make a difference. Are there other variables or processes that can affect styling between dev and production on Heroku?

6

Do you get any warnings when deploying to Heroku? Specifically this one:

WARNING: Include ‘rails_12factor’ gem to enable all platform features

The two pieces I can think of is not having the rails_12factor gem installed or setting the following config setting in your config/environments/production.rb file.

config.serve_static_files = true

The gem just does the above configuration for you (along with other things that you can also manually configure).

1 Like
7

@analyticspierce Since you’ve generated the app with Suspenders, I’d check if the ASSET_HOST env var is correctly set as well as setting RAILS_SERVE_STATIC_FILES to true.

Hope this helps :slight_smile:

8

I don’t use Heroku, but just because the rake task for precompiling assets runs doesn’t necessarily mean all your assets are precompiled. 3.12s sounds a bit too good to me. For me it will usually it’ll take up to a minute for an application with a decent amount of asset dependencies (jQuery et al.) on a 1GB digital ocean node.

AFAIK, using the @import SASS directive doesn’t actually add anything to your asset manifest. If you want something to be precompiled, you’ll need to include it using require ... or require_tree in your application.js/application.css. You can also include the file in application.rb, e.g:

config.assets.precompile += %w( index.css index.js )

Note that if you add require_tree to your application.js/css, expect the possibility for various JS and CSS conflicts throughout your application. Basically what it’s doing is including all your assets into the file you use it in. So for instance, if you have two different CSS files targeted towards different pages with their own definition of how the body tag is meant to appear then you should expect some conflicts. Further, if you load everything in your application.css/js then you’ll need to remove any inline stylesheet_link_tag & javascript_include_tag references besides the ones that are used to load your main manifest files.

Dealing with the asset pipeline in production has been one of the biggest pain points for me in my short Rails career. Remember that Chrome/FF developer consoles and server logs are your best friends in production.

1 Like
9

What should the ASSET_HOST env var be set to if my heroku app is serving the assets? I’ve been searching but haven’t tracked down the right answer.

10

@analyticspierce, you’d set it to your app domain something-or-other.herokuapp.com, for instance.