Rails App Not Serving Assets in Production Environment

Question

My app works fine when run in development environment. In production (rails server -e production), the browser can't access the css and js files and on the console there are messages like:

I, [2013-07-27T21:00:59.105459 #11449]  INFO -- : Started GET "/javascripts/application.js" for 99.102.22.124 at 2013-07-27 21:00:59 +0000
F, [2013-07-27T21:00:59.108302 #11449] FATAL -- : 
ActionController::RoutingError (No route matches [GET] "/javascripts/application.js"):

The head section from html source when in production environment:

<head>
  <title>a Social Server</title>
  <link data-turbolinks-track="true" href="/stylesheets/application.css" media="all" rel="stylesheet">
  <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
  <script data-turbolinks-track="true" src="/javascripts/application.js"></script>
  <meta content="authenticity_token" name="csrf-param">
<meta content="jYM4IAXTXAuKWeD4FEVrXgXRNFeB6EazU68ZBQfRqNY=" name="csrf-token">
</head>

In development env on the other hand the head section looks like:

<head>
  <title>a Social Server</title>
  <link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet">
<link data-turbolinks-track="true" href="/assets/twitter-bootstrap-static/bootstrap.css?body=1" media="all" rel="stylesheet">
<link data-turbolinks-track="true" href="/assets/twitter-bootstrap-static/fontawesome.css?body=1" media="all" rel="stylesheet">
<link data-turbolinks-track="true" href="/assets/bootstrap_and_overrides.css?body=1" media="all" rel="stylesheet">
<link data-turbolinks-track="true" href="/assets/instagram.css?body=1" media="all" rel="stylesheet">
<link data-turbolinks-track="true" href="/assets/socialserver.css?body=1" media="all" rel="stylesheet">
<link data-turbolinks-track="true" href="/assets/jquery.ui.core.css?body=1" media="all" rel="stylesheet">
<link data-turbolinks-track="true" href="/assets/jquery.ui.theme.css?body=1" media="all" rel="stylesheet">
<link data-turbolinks-track="true" href="/assets/jquery.ui.accordion.css?body=1" media="all" rel="stylesheet">
<link data-turbolinks-track="true" href="/assets/jquery.ui.menu.css?body=1" media="all" rel="stylesheet">
<link data-turbolinks-track="true" href="/assets/jquery.ui.autocomplete.css?body=1" media="all" rel="stylesheet">
<link data-turbolinks-track="true" href="/assets/jquery.ui.button.css?body=1" media="all" rel="stylesheet">
<link data-turbolinks-track="true" href="/assets/jquery.ui.datepicker.css?body=1" media="all" rel="stylesheet">
<link data-turbolinks-track="true" href="/assets/jquery.ui.resizable.css?body=1" media="all" rel="stylesheet">
<link data-turbolinks-track="true" href="/assets/jquery.ui.dialog.css?body=1" media="all" rel="stylesheet">
<link data-turbolinks-track="true" href="/assets/jquery.ui.progressbar.css?body=1" media="all" rel="stylesheet">
<link data-turbolinks-track="true" href="/assets/jquery.ui.selectable.css?body=1" media="all" rel="stylesheet">
<link data-turbolinks-track="true" href="/assets/jquery.ui.slider.css?body=1" media="all" rel="stylesheet">
<link data-turbolinks-track="true" href="/assets/jquery.ui.spinner.css?body=1" media="all" rel="stylesheet">
<link data-turbolinks-track="true" href="/assets/jquery.ui.tabs.css?body=1" media="all" rel="stylesheet">
<link data-turbolinks-track="true" href="/assets/jquery.ui.tooltip.css?body=1" media="all" rel="stylesheet">
<link data-turbolinks-track="true" href="/assets/jquery.ui.base.css?body=1" media="all" rel="stylesheet">
<link data-turbolinks-track="true" href="/assets/jquery.ui.all.css?body=1" media="all" rel="stylesheet">
  <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
  <script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-transition.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-alert.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-modal.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-dropdown.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-scrollspy.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-tab.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-tooltip.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-popover.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-button.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-collapse.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-carousel.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-typeahead.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-affix.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.core.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.widget.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.accordion.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.position.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.menu.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.autocomplete.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.button.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.datepicker.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.mouse.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.draggable.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.resizable.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.dialog.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.droppable.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-blind.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-bounce.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-clip.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-drop.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-explode.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-fade.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-fold.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-highlight.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-pulsate.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-scale.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-shake.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-slide.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-transfer.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.progressbar.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.selectable.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.slider.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.sortable.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.spinner.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.tabs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.tooltip.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.all.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
  <meta content="authenticity_token" name="csrf-param">
<meta content="jYM4IAXTXAuKWeD4FEVrXgXRNFeB6EazU68ZBQfRqNY=" name="csrf-token">
</head>

The app does not use a database, so I have disabled ActiveRecord. Snippets of the config files:

application.rb

require File.expand_path('../boot', __FILE__)
#require 'rails/all'
require "action_controller/railtie"
require "action_mailer/railtie"
require "rails/test_unit/railtie"
require "sprockets/railtie"
Bundler.require(:default, Rails.env)
module Socialserver
  class Application < Rails::Application
  end
end

production.rb

Socialserver::Application.configure do
   config.cache_classes = true
   config.eager_load = true
   config.consider_all_requests_local       = false
   config.action_controller.perform_caching = true
   config.serve_static_assets = false
   config.assets.js_compressor = :uglifier
   config.assets.compile = false
   config.assets.digest = true
   config.assets.version = '1.0'
   config.log_level = :info
   config.i18n.fallbacks = true
   config.active_support.deprecation = :notify
   config.log_formatter = ::Logger::Formatter.new
   config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
   config.assets.precompile += %w( .svg .eot .woff .ttf )
end

development.rb:

Socialserver::Application.configure do
  config.cache_classes = false
  config.eager_load = false
  config.consider_all_requests_local       = true
  config.action_controller.perform_caching = false
  config.action_mailer.raise_delivery_errors = false
  config.active_support.deprecation = :log
  config.assets.debug = true
end

Gemfile:

source 'https://rubygems.org'
gem 'rails', '4.0.0'
gem 'sass-rails', '~> 4.0.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.0.0'
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 1.2'
group :doc do
  gem 'sdoc', require: false
end
group :twitter do
  gem 'twitter', '4.8.1'
end
group :instagram do
  gem 'instagram', '0.10.0'
end
group :tumblr do
  gem 'tumblr_client'
end
gem 'twitter-bootstrap-rails'
gem 'therubyracer' #needed for runtime js on amazon ec2.

I apologize for posting so much info. I felt the info might be relevant.

p.s. I have only half baked knowledge of rails, so bear with me. Thanks~

I am having a similar problem in a project I upgraded to Rails 4. None of the solutions here solved it. The images and javascripts are being served fine, but not the css. The css files are compiling, show up in public/assets, and show up in the manifest file, but the production server still gives me this error for css files. If anyone has any ideas, I'd be happy to know them. — Lonny Eachus, Jun 08 '14 at 02:48

score 76 · Answer 1 · answered Jul 28 '13 at 17:41

76

When testing locally your production environment, you have to compile the assets locally. Simply run the command below:

RAILS_ENV=production bundle exec rake assets:precompile

It will generate all the assets under public/assets.

Next, you have to tell Rails to serve the assets itself. Server software (eg. Nginx or Apache) do it for you on environments like Heroku, but locally you should let Rails do it. Change this in your production.rb:

config.serve_static_assets = true

But make sure you set it back to false before pushing your code to production!

answered Jul 28 '13 at 17:41

jibai31

1,663
18
22

I am trying to deploy this app myself on an ec2 machine. On ec2 I installed ruby, rails and then did a "rails server -e production". So I guess simply telling the rails server command that the env is production does not cause it to compile the assets? Btw, if I set config.assets.compile = true in production.rb, things work again. So what is the best way to do it if you want to deploy an app yourself? If I use unicorn instead of webrick, will that make a difference? – septerr Jul 28 '13 at 17:50
1

Telling Rails that the environment is production does not compile the assets indeed. You need to precompile them locally. You might want to take a look at this article that shows how to use the gem asset_sync to push your assets to S3 and Cloudfront: http://blog.firmhouse.com/complete-guide-to-serving-your-rails-assets-over-s3-with-asset_sync – jibai31 Jul 28 '13 at 17:56
If `Server sotware (eg. Nginx or Apache) do it for` me. In my understanding than it means that on the server side it's set to `TRUE` (`config.serve_static_assets = true`) but why should I set it back to `FALSE` before pushing it to the server? – Papouche Guinslyzinho Jun 08 '14 at 23:04
Papouche, I believe they mean that Nginx or Apache would serve the assets out of the configured location directly, without going to Rails. That is, Rails becomes responsible for handling non-assets requests, so that a user isn't waiting for a complex app framework to serve up images. Nginx and Apache can already serve static files very easily. – Adam Prescott Dec 12 '14 at 14:48
2

For Rails 4 it will be `config.serve_static_files`. `config.serve_static_assets` is deprecated and will be removed in Rails 5. – sampi May 16 '15 at 11:01
In order not to change the value of `config.serve_static_files` you might just define the environment variable `RAILS_SERVE_STATIC_FILES`. – h7r Jul 10 '16 at 16:37

score 40 · Answer 2 · edited May 23 '17 at 12:03

This sounds like to the problem I was having.

I found a blog that suggests this is a bug in the Rails 4.0.0 asset pipeline, and is inexplicably mitigated by setting...

config.assets.compile = true

... in config/environments/production.rb

Aside from somehow kicking the asset pipeline in to actually working, that setting will turn on live-compilation of assets. That is normally a bad thing for performance in production, but if you still manually precompile assets when you deploy, with

rake assets:precompile

... the live-compilation should never happen (because the necessary assets have already been precompiled).

I hope this helps :)

Works for 4.2 as well. This probably saved me a good few hours of pain - Thanks! — Jules Copeland, Jan 20 '15 at 17:29

James B. Byrne · Answer 3 · 2015-11-06T03:55:51.960

As previously noted config.serve_static_assets is deprecated and replaced by config.serve_static_files. If one examines config/environments/production.rb for Rails-4.2 then one finds this:

  # Disable serving static files from the `/public` folder by default since
  # Apache or NGINX already handles this.
  config.serve_static_files = ENV['RAILS_SERVE_STATIC_FILES'].present?

The implication being that setting and exporting (in BASH) the environment variable export RAILS_SERVE_STATIC_FILES="to any value whatsoever" in a session prior to running rails s -e production will give the desired result when testing locally and also will avoid having to remember to recode production.rb before pushing to the production host.

score 7 · Answer 4 · edited Oct 07 '16 at 01:53

7

In production.rb change the setting:

rails 3.x

config.serve_static_assets = true

rails 4.x

config.serve_static_files = true

edited Oct 07 '16 at 01:53

Brandon.Blanchard

424
3
9

answered Jul 28 '13 at 05:50

Chris Aitchison

4,656
1
27
43

I guess it rails-3 specific. – Rui Andrada Jan 24 '15 at 14:46

score 5 · Answer 5 · answered Jun 29 '15 at 19:20

Check for a file like this:

public/assets/.sprockets-manifest-3f7771d777ceb581d754e4fad88aa69c.json

If you are pushing precompiled assets to a production server there is a chance that you are preventing hidden 'dot' files being pushed and this essential file won't make it into production.

In my environment I need to precompile assets in an integration environment and push these to production so that there is no need to compile the assets on the production machine. I was erroneously blocking all hidden files from being pushed to production machine.

To see if this answer works for you, check your generated HTML source in a browser from the production server to see if the assets path has been generated. If you see your script tag like this:

<script data-turbolinks-track="true" src="/javascripts/application.js"></script>

check the src attribute. It should start with /assets/javascript. In this case it starts with /javascript which indicates Rails does not think any of the assets have been precompiled.

I corrected this by updating my push to production (currently rsync), ensuring I push the .sprockets-manifest* file after precompiling on my integration server.

Also, I use standalone Passenger as my integration test server, rather than Webrick, since it handles more realistic serving of static files.

score 5 · Answer 6 · answered Jan 30 '19 at 18:20

5

in Rails 5.x the setting is

config/initializers/assets.rb:

Rails.application.config.public_file_server.enabled = true

https://edgeguides.rubyonrails.org/configuring.html

answered Jan 30 '19 at 18:20

Ivailo Bardarov

3,775
1
28
25

Rui Andrada · Answer 7 · 2015-01-24T21:37:52.777

I think to Rails 4.x you have to precompile assets to production or use config.assets.compile even both if needed.

The default Rails behavior for production environment is to "Do not fallback to assets pipeline if a precompiled asset is missed." So, don't. Use to not compi

config.assets.compile = false

If you use this option you don't need to use:

config.serve_static_files = true

Because if the asset wasn't precompiled, Rails will compile before serve request.

But if you do precompile the assets before production you don't needs config.assets.compile = true, but you need config.serve_static_files = true to Rails serve requests if you don't have http_server to serve the precompiled assets.

The setting config.serve_static_assets is deprecated.

DEPRECATION WARNING: The configuration option `config.serve_static_assets` has been renamed to `config.serve_static_files` to clarify its role (it merely enables serving everything in the `public` folder and is unrelated to the asset pipeline). The `serve_static_assets` alias will be removed in Rails 5.0. Please migrate your configuration files accordingly.

I hope this answer help you(reader) to understand whats really happens

Roy · Answer 8 · 2014-10-14T17:27:39.950

0

The following command works for me locally.

rails server -e production

I got the same error "ActionController::RoutingError (No route matches [GET] "/assets/application.css"" while running "rails s". Even after I precompiled the source, change config precompile true. It still could not load properly.

The option "-e production" made those RoutingError disappear.

edited Oct 14 '14 at 17:27

answered Oct 14 '14 at 15:32

Roy

75
2
9

2

Just for reference for future answers (since this appears to be one of your first), it's usually worth explaining what you're doing and why. – Jon Story Oct 14 '14 at 15:36

Rails App Not Serving Assets in Production Environment

8 Answers8

Linked