36

I have deployed an app to Heroku with one issue I can't seem to get figured out. The CSS for the app via Bootstrap-sass does not load up thus I have an un-styled app. At the moment this is just a collection of static pages.

I have followed all but one step in the README https://github.com/thomas-mcdonald/bootstrap-sass The step I can't figure out and highly likely to be my issue is as follows. Due to a change in Rails that prevents images from being compiled in vendor and lib, you'll need to add the following line to your application.rb:

config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)

Since I am still very new to programming, the first issue is I have no clue where and how to add this within the application.rb file. I would greatly appreciate it if someone could help show me how and where to properly add the above line of code.

The second issue could be related to the gems I am using however when I created the app, the sass-rails gem was installed with ~> 4.0.0.beta1. According to the README the version to use is 3.2. Since this also might be an issue, I have included the gem file incase anyone determines that is the underlying reason for my problem.

Thank you in advance for any help you can provide.

Edit: To add the steps I took on the first try that resulted in style working properly on my local host but not once the code was deployed to heroku.

  1. Created a new rails 4 app (gem file below)
  2. Added the bootstrap-sass gem listed in the gem file below
  3. Added PG gem to my gem file in the production group and moved SQLite3 to development and test (ran bundle install --without production following steps 2 and 3)
  4. created a pages controller for a static home page
  5. Added an h1 within a hero-unit on the home page just to see if style was working
  6. added a styles.css.scss file and included @import 'bootstrap'; to the style sheet
  7. Created git repository, ran my initial commit and pushed the code to git
  8. Created heroku app and pushed the master to heroku

On the second attempt, I added a nav bar to the home page (if that makes a difference to anyone) and followed steps 7 and 8 again but just prior to doing those steps I ran the following line of code.

RAILS_ENV=production bundle exec rake assets:precompile

I still ended up with a site that had the proper style on my local host but no style was working on Heroku. As I noted above in my original post, there is a line of code that needs to be added to the application.rb file that I did not follow due to my lack of understanding how to properly add the line of code into the file.

Gemfile:

source 'https://rubygems.org'

ruby "2.0.0"

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.0.0.beta1'

group :production do
gem 'pg'
end

group :development, :test do
gem 'sqlite3'
end

# Gems used only for assets and not required
# in production environments by default.
group :assets do
gem 'sass-rails',   '~> 4.0.0.beta1'
gem 'coffee-rails', '~> 4.0.0.beta1'

gem 'bootstrap-sass', '~> 2.3.1.1'

# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby

gem 'uglifier', '>= 1.0.3'
end

gem 'jquery-rails'

# Turbolinks makes following links in your web application faster. Read more:  https://github.com/rails/turbolinks
gem 'turbolinks'

# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 1.0.1'

# To use ActiveModel has_secure_password
# gem 'bcrypt-ruby', '~> 3.0.0'

# Use unicorn as the app server
# gem 'unicorn'

# Deploy with Capistrano
# gem 'capistrano', group: :development

# To use debugger
# gem 'debugger'
Rod Argumedo
  • 610
  • 11
  • 29
Kevin Dark
  • 2,139
  • 5
  • 22
  • 23
  • have you precompile the css before push to heroku – Alan Chan Apr 29 '13 at 06:22
  • It's unclear what exactly you've done (besides "follow these instructions), could you write down exactly what you've done? – Andy Hayden Apr 29 '13 at 09:06
  • @AndyHayden I added in the steps I have tried – Kevin Dark Apr 30 '13 at 20:54
  • 1
    To answer you first question, put `config.assets.precompile` a new line after one of the other `config.assets` lines (good idea to match the indentation). Important thing is it's before the end end. – Andy Hayden Apr 30 '13 at 21:13
  • I'm afraid I'm not sure about the second, but upvoted as you took the time to edit. Best of luck. – Andy Hayden Apr 30 '13 at 21:24
  • Gave up on rails 4 at the moment. If someone gets this gem working properly on rails 4 or can point me to a repo on github so I can look at working code that would be fantastic. In the mean time I will keep trying to learn on older releases of ruby and rails. – Kevin Dark May 02 '13 at 01:41
  • I had a similar problem but with Foundation. The answers here helped, I changed the `production.rb` file. – JGallardo Nov 08 '13 at 01:10

8 Answers8

71

I just now (June 13 2013)got this answer from Heroku devs whose support guided me across the barriers. This is how I got my css display from localhost working in my Heroku app.

"All you need to do is turn on asset serving in production and set the logger to stdout to get Rails4 to work on Heroku. We are currently working on smoothing out the deploy process for Rails 4 apps but for the meantime, you can just change those lines in your code and you won't need those gems." (Thanks Bret and Neil great news)

In /config/environments/production. set:

config.cache_classes = true
config.serve_static_files = true
config.assets.compile = true
config.assets.digest = true

I do not know about the stdout in logger so can't check that.

Do a git add . and git commit.

Make sure that /config/database.yml has:

production:
  adapter: postgresql
  encoding: unicode
  database: Your_appname_production

You will need this info for the env command below.

Make sure you have gem 'pg' in production in your Gemfile Do another git commit.

Run this command in a terminal in your app on one line:

env RAILS_ENV=production DATABASE_URL=postgresql://user:pass@127.0.0.1/Your_app_name_production bundle exec rake assets:precompile 2>&1

Where DATABASE_URL=postgresql is identical to your production adapter in the yml file and Your_app_name_production is specified because Heroku only seems to run production.

I was advised against and did not need:

group :production do
  gem 'rails_log_stdout',           github: 'heroku/rails_log_stdout'
  gem 'rails3_serve_static_assets', github: 'heroku/rails3_serve_static_assets'
end

It errors out in bundle install and Heroku.

Don't know if this helps but I also added production to 

Bundler.require(*Rails.groups(assets: %w(development test production)))

Can't remember where I saw that advice.

HTH Arel

Ahmed Reza
  • 293
  • 1
  • 3
  • 19
user2481435
  • 734
  • 5
  • 2
  • 21
    `config.assets.compile = true` was the step that was missing for me – andreofthecape Jun 26 '13 at 17:45
  • 1
    For me it was all four of these bad boys: `config.cache_classes = true` `config.serve_static_assets = true` `config.assets.compile = true` `config.assets.digest = true` – Baub Aug 10 '13 at 08:16
  • I modified `production.rb` and `database.yml` then ran the command and now works just fine. How often do you run that command though? – JGallardo Nov 08 '13 at 01:09
  • 1
    isn't `config.assets.compile = true` supposed to be very bad for performance? – cman77 Jan 14 '14 at 21:01
  • 1
    Stop spreading that `config.assets.compile = true` is the solution. Yes, it works but the downsides are bad for the performance of your app, since it has to compile dinamically css-js files on the fly if there's no a static version of those files. `config.assets.compile = false` forces you to serve all the files statically and if one or more are missing then your app throws a 500/404 error. – goerwin May 02 '14 at 05:46
  • 1
    As a bit of a side note to this excellent answer. You don't actually need to set anything in /config/database.yml as Heroku overwrites it anyway. This can be seen at: https://devcenter.heroku.com/articles/ruby-support#build-behavior. You can .gitignore the file if you like. Or use it for another production environment which uses a different db. Though slightly annoying that Heroku edits our code...in this case it makes a lot of sense and ensures that the db connection just works. – Richard Washington Jan 16 '15 at 11:19
18

Just run bundle exec rake assets:precompile before pushing to heroku

ifyouseewendy
  • 6,674
  • 1
  • 21
  • 26
JasmineOT
  • 1,978
  • 2
  • 20
  • 30
  • 1
    This did it for me, even with all the other stuff above set to true I had to do this step. – Nubtacular Apr 16 '14 at 04:48
  • +1 and many thanks, @JasmineOT!! Hoping to draw more attention to your (more current) solution. This worked for me, too, when all else failed. Here's a link to official Heroku Docs that says the same (for those who dig that kind of thing: https://devcenter.heroku.com/articles/rails-asset-pipeline) – Jaime Nov 03 '14 at 17:21
  • Best answer, did it for me – Little Phild Mar 09 '16 at 08:43
  • I know this is super old but are there any gotcha effects from this? Like if I change anything in any of my asset files will I have to run this again for those changes to take effect? – SomeSchmo Jun 15 '16 at 20:16
  • 1
    @Rocco I'm afraid so. – JasmineOT Jun 16 '16 at 20:53
8

I was able to fix this issue by adding these two gems to my application

group :production do
  gem 'rails_log_stdout',           github: 'heroku/rails_log_stdout'
  gem 'rails3_serve_static_assets', github: 'heroku/rails3_serve_static_assets'
end

Add that, run bundle install and then push to heroku.

Your styles should start loading.

DavidVII
  • 2,133
  • 2
  • 21
  • 28
  • Thanks, fixed my problem with assets not being found(404) even though everything seemed to precompile fine. – code0100fun May 14 '13 at 04:23
  • You may want to consider wrapping those two lines in a production group as it may end up causing errors on other local instances. – DavidVII May 14 '13 at 04:56
  • 1
    What exactly is going on here? – JGallardo Nov 08 '13 at 01:09
  • 1
    it helped serve static assets. This answer is actually out dated and it this technique has been replaced by the `rails_12factor` gem. More info [here](https://devcenter.heroku.com/articles/getting-started-with-rails4#heroku-gems) – DavidVII Nov 08 '13 at 01:36
4

First of all upgrade from Rails beta to the latest release.

Check for where you might be setting config.assets.initialize_on_precompile = false as that might make it fall back to non-sprockets assets resolution (I'm guessing you might have set it to false when reading about Rails 3.x on heroku docs).

Set it back to the default true

ruby config.assets.initialize_on_precompile = true

Then enable user-env-compile for the app on heroku:

# Enable precompile support for the app
heroku labs:enable user-env-compile
# Remove precompiled assets
rm -rf public/assets/
git add -u 
git commit -m 'Remove precompiled assets'
# Now push and everything should just work from now on
git push heroku master

Adapted from this bootstrap-sass issue comment.

glebm
  • 20,282
  • 8
  • 51
  • 67
4

Set config.assets.compile=true in the file /config/environments/production.rb:

config.assets.compile=true

Click here to know more about the asset pipeline.

TLama
  • 75,147
  • 17
  • 214
  • 392
snowblindzz
  • 61
  • 6
3

A simple reason for this heroic problem could be mixing css file types. In my own experience, this happens if you push out an assets folder that contains both .css and .scss file types. Maybe someone else can explain why this happens...but, all it took for me was to rename .css file(s) to .scss. Then, everything compiled correctly and all was right in the world.

hellion
  • 4,602
  • 6
  • 38
  • 77
2
config.cache_classes = true
config.serve_static_assets = true
config.assets.compile = true
config.assets.digest = true

setting these in config/envirnoments/production.rb fixed a similar problem for me with apache server

Dmitry Matveev
  • 5,320
  • 1
  • 32
  • 43
2

I would not set config.assets.compile = true this has performance implications (but it does work).

As outlined here: https://stackoverflow.com/a/16882028/647427

When using the asset pipeline, paths to assets must be re-written and sass-rails provides -url and -path helpers (hyphenated in Sass, underscored in Ruby) for the following asset classes: image, font, video, audio, JavaScript and stylesheet.

image-url("rails.png") becomes url(/assets/rails.png)
image-path("rails.png") becomes "/assets/rails.png"
The more generic form can also be used but the asset path and class must both be specified:

asset-url("rails.png", image) becomes url(/assets/rails.png)
asset-path("rails.png", image) becomes "/assets/rails.png"
Community
  • 1
  • 1
cman77
  • 1,753
  • 1
  • 22
  • 48