Menu
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~
720
The asset pipeline provides a framework to concatenate and minify or compress JavaScript and CSS assets. It also adds the ability to write these assets in other languages such as CoffeeScript, Sass and ERB. Prior to Rails 3.1 these features were added through third-party Ruby libraries such as Jammit and Sprockets.
The Rails asset pipeline provides an assets:precompile rake task to allow assets to be compiled and cached up front rather than compiled every time the app boots. There are two ways you can use the asset pipeline on Heroku. Compiling assets locally.
Sprockets is a Ruby library for compiling and serving web assets. Sprockets allows to organize an application's JavaScript files into smaller more manageable chunks that can be distributed over a number of directories and files.
The require_tree directive tells Sprockets to recursively include all JavaScript files in the specified directory into the output. These paths must be specified relative to the manifest file.
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!
167
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
