Here is the page source header from Heroku production:
<head>
<title>Gosgf</title>
<link data-turbolinks-track="true" href="/assets/application-e11c07d8fd96415a6de17e941d115bde.css" media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/assets/application-786dea1c8b4a7b9d1635fb121196a3f3.js"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="LAzUNgZEUmay9OLVUsN0u6Amz/9BVJngJKvE+B6+L1g=" name="csrf-token" />
</head>
Here is from 127.0.0.1:3000
<head>
<title>Gosgf</title>
<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/games.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/jgo/jgoboard.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/jgo/jgoboard_small.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/sgfs.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/welcome.css?body=1" media="all" 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/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/games.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jgo/all-min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jgo/autodiv.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jgo/jgoboard.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jgo/sgf.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery/jquery-1.10.1.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery/jquery-1.10.1.min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery/jquery.min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/sgfs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/welcome.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="8+ZHwU8R9V/V5zgoVL3fqyGKxYG2BxV2f8LtRCZNDAg=" name="csrf-token" />
</head>
A lot of js and css under app/asserts are ignored by Heroku.
I have already added:
gem 'rails_12factor', group: :production
in Gemfile.
Assets are pre-compiled:
RAILS_ENV=production bundle exec rake assets:precompile
git add public/assets
git commit -m "compiled assets"
before push.
In config/environments/production.rb:
config.serve_static_assets = true
config.assets.compile = true
How can I tell Heroku to load the js and css assets?
This is normal - the application.js and application.css that your production page does load should contain all of your application's assets (at least anything that has be included by the application.css or application.js manifests).
This is (among other things) what precompiling does.
Related
The app works on Heroku except that it's supposed to show a graph, with gon and cytoscape js, but doesn't. There are no error messages.
The only significant difference in the HTML is that in production, all the javascript and stylesheet-files are precompiled:
Production:
<link rel="stylesheet" media="all" href="/assets/application-97fedf3d6ebadf9658f179ce8a751e3ed05d1aa3bf6ce6be192e397b824e7f74.css" />
<script src="/assets/application-d5a91369fc9a95afb2281d718e463b03184e0ece461c52b2d8c78e63b5ef16a4.js"></script>
Local:
<link rel="stylesheet" media="all" href="/assets/select2.self-896365bdffeaf8e35a12caad065cc092cfcb4f7a36ad77eb1343fa6f6f40cc66.css?body=1" />
<link rel="stylesheet" media="all" href="/assets/select2-bootstrap.self-7da9a1fdf6150ac9fb6849734104aaba844871ff119da43ea0ceccc930c476af.css?body=1" />
<link rel="stylesheet" media="all" href="/assets/application.self-9d1d421547202855000cc25c86f69148522c38ed15a4de25e485df0c264540b7.css?body=1" />
<link rel="stylesheet" media="all" href="/assets/twitter-bootstrap-static/bootstrap.self-603f330c29af013305325569c8c75d03d688963abd8cde4fffec17b5ce417bfb.css?body=1" />
<link rel="stylesheet" media="all" href="/assets/twitter-bootstrap-static/sprites.self-556e1741ff6d22f63fe0be609679c8f06ffc45eabc31836b6b785475bb283b84.css?body=1" />
<link rel="stylesheet" media="all" href="/assets/bootstrap_and_overrides.self-f5a90d20e5090d64763dcfad94d947343b9898d7a030bb466e9247e00ca06c27.css?body=1" />
<link rel="stylesheet" media="all" href="/assets/medium-editor/medium-editor.self-513b85b7e3f9f288dadfa41bab0c8ba717f1279b13595f2dc77b54bebfe3431f.css?body=1" />
<link rel="stylesheet" media="all" href="/assets/medium-editor/themes/beagle.self-534d90e3c85b8c27175857dd3bab276778312301f1f74dd99e03628ee8c541c2.css?body=1" />
<link rel="stylesheet" media="all" href="/assets/articles.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" />
<link rel="stylesheet" media="all" href="/assets/relations.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" />
<link rel="stylesheet" media="all" href="/assets/scaffolds.self-f5864251a4ff9b509f17052c56a2d24456178589b1a90a9f5b55db97cb05b1bc.css?body=1" />
<link rel="stylesheet" media="all" href="/assets/users.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" />
<script src="/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1"></script>
<script src="/assets/rails-ujs.self-8944eaf3f9a2615ce7c830a810ed630e296633063af8bb7441d5702fbe3ea597.js?body=1"></script>
<script src="/assets/turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1"></script>
<script src="/assets/articles.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
<script src="/assets/bootstrap.self-fdc98dee79ee88255e10cac6caa91338165cb76cf0d263744d8d90011fc2ef8f.js?body=1"></script>
<script src="/assets/action_cable.self-69fddfcddf4fdef9828648f9330d6ce108b93b82b0b8d3affffc59a114853451.js?body=1"></script>
<script src="/assets/cable.self-8484513823f404ed0c0f039f75243bfdede7af7919dda65f2e66391252443ce9.js?body=1"></script>
<script src="/assets/octal.self-364e41a86713de4f2a1d22b511f99ca79eef4059e839c02b099ca2ee289884d6.js?body=1"></script>
<script src="/assets/relations.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
<script src="/assets/users.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
<script src="/assets/medium-editor.self-a4f361c2dcb6e54ca3400cb6cb9de9b0a38eddd36c417cd31f8add83ae7c422c.js?body=1"></script>
<script src="/assets/select2.self-1c5f606a53ee7fae6f11ffa522c8ccf8076493d9d5b5ae25564bd853679f48d2.js?body=1"></script>
<script src="/assets/auto_select2/static_select2.self-d4bd2ab2573f1ebb1355356089a29f4a863eeac5fe2ab8e71dc27c8c3faeb57d.js?body=1"></script>
<script src="/assets/auto_select2/ajax_select2.self-a9fcebdf470e2df0f8263df8f5d204a4f4a9e4bbde5299d8074af377f9dd233c.js?body=1"></script>
<script src="/assets/auto_select2/multi_ajax_select2_value_parser.self-b9df3fd4ad3813e60541ffb5bd90f7a2308d28bd590ba55e8e6894a62f106844.js?body=1"></script>
<script src="/assets/application.self-f74b421b6b3f8f87122d354a558aa64b553aee34b1bf06a7515456271b87a3c5.js?body=1"></script>
So the root here must be some problem with the asset pre-compilation?
I tried restarting Heroku and using Puma as Webserver on Heroku, but that didn't make a difference. (Maybe it's the default anyway? Couldn't figure this out.)
These are the gems that are only loaded in development:
# Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
gem 'web-console', '>= 3.3.0'
gem 'listen', '>= 3.0.5', '< 3.2'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
gem 'spring-watcher-listen', '~> 2.0.0'
There are no gems that are only loaded in production.
After deploying my rails app to heroku, there are no dropdown menus!
When running locally, my source looks like this :
<link href="/assets/application.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.core.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.theme.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.accordion.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.menu.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.autocomplete.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.button.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.datepicker.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.resizable.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.dialog.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.progressbar.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.selectable.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.slider.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.spinner.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.tabs.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.tooltip.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.base.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.all.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/foundation_and_overrides.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/admins.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/associates.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/custom.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/dasharea.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/database.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/members.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/sessions.css?body=1" media="screen" rel="stylesheet" />
<script src="/assets/vendor/custom.modernizr.js?body=1"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="anbyACcBlOI2Zpa9E2TImosNiBYN5KFTC8heYI1TE+I=" name="csrf-token" />
<script src="/assets/jquery.js?body=1"></script>
<script src="/assets/jquery.ui.core.js?body=1"></script>
<script src="/assets/jquery.ui.widget.js?body=1"></script>
<script src="/assets/jquery.ui.accordion.js?body=1"></script>
<script src="/assets/jquery.ui.position.js?body=1"></script>
<script src="/assets/jquery.ui.menu.js?body=1"></script>
<script src="/assets/jquery.ui.autocomplete.js?body=1"></script>
<script src="/assets/jquery.ui.button.js?body=1"></script>
<script src="/assets/jquery.ui.datepicker.js?body=1"></script>
<script src="/assets/jquery.ui.mouse.js?body=1"></script>
<script src="/assets/jquery.ui.draggable.js?body=1"></script>
<script src="/assets/jquery.ui.resizable.js?body=1"></script>
<script src="/assets/jquery.ui.dialog.js?body=1"></script>
<script src="/assets/jquery.ui.droppable.js?body=1"></script>
<script src="/assets/jquery.ui.effect.js?body=1"></script>
<script src="/assets/jquery.ui.effect-blind.js?body=1"></script>
<script src="/assets/jquery.ui.effect-bounce.js?body=1"></script>
<script src="/assets/jquery.ui.effect-clip.js?body=1"></script>
<script src="/assets/jquery.ui.effect-drop.js?body=1"></script>
<script src="/assets/jquery.ui.effect-explode.js?body=1"></script>
<script src="/assets/jquery.ui.effect-fade.js?body=1"></script>
<script src="/assets/jquery.ui.effect-fold.js?body=1"></script>
<script src="/assets/jquery.ui.effect-highlight.js?body=1"></script>
<script src="/assets/jquery.ui.effect-pulsate.js?body=1"></script>
<script src="/assets/jquery.ui.effect-scale.js?body=1"></script>
<script src="/assets/jquery.ui.effect-shake.js?body=1"></script>
<script src="/assets/jquery.ui.effect-slide.js?body=1"></script>
<script src="/assets/jquery.ui.effect-transfer.js?body=1"></script>
<script src="/assets/jquery.ui.progressbar.js?body=1"></script>
<script src="/assets/jquery.ui.selectable.js?body=1"></script>
<script src="/assets/jquery.ui.slider.js?body=1"></script>
<script src="/assets/jquery.ui.sortable.js?body=1"></script>
<script src="/assets/jquery.ui.spinner.js?body=1"></script>
<script src="/assets/jquery.ui.tabs.js?body=1"></script>
<script src="/assets/jquery.ui.tooltip.js?body=1"></script>
<script src="/assets/jquery.ui.all.js?body=1"></script>
<script src="/assets/jquery_ujs.js?body=1"></script>
In Heroku, it look like this :
<script src="/javascripts/jquery.js"></script>
<script src="/javascripts/jquery.ui.all.js"></script>
<script src="/javascripts/jquery_ujs.js"></script>
But the links in Heroku return not found!
For a special reason, I included the jquery in my head manually like this :
<%= javascript_include_tag 'jquery' %>
<%= javascript_include_tag 'jquery.ui.all' %>
<%= javascript_include_tag 'jquery_ujs' %>
Is this the reason things are failing? How to fix it without removing these from the head?
In (most) production setups, only the files in public/assets are available for use directly in link or script tags.
When you push to Heroku, it precompiles app/assets/javascripts/application.js by merging and compressing all javascript files required in application.js into a single file at public/assets/application-xxxxxx.js. Individual files, such as jquery.js, are not available. Therefore, it's recommended to use
<!-- HTML -->
javascript_include_tag 'application'
// inside app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
However, if you insist on including jquery manually without requiring it in application.js, you can add it to config.assets.precompile.
# config/environments/production.rb
config.assets.precompile += ['jquery.js', 'jquery_ujs.js']
(Note: A friend told me that Heroku doesn't read production.rb during precompilation. If that's the case, try adding the above to config/application.rb instead.)
When you push to Heroku and precompile your assets, you should see
$ rake assets:precompile
I, [] INFO -- : Writing public/assets/jquery-36fecc5eda81b43bdf4f92ce2d874df2.js
I, [] INFO -- : Writing public/assets/jquery_ujs-02181b3e64cd9e4e8548cad033516231.js
On Heroku, the script tags should now look like
<script src="/assets/jquery-36fecc5eda81b43bdf4f92ce2d874df2.js"></script>
In my application.html.erb I have:
<%= stylesheet_link_tag "application", :media => "all" %>>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
Which outputs something like this:
<link href="/assets/css-reset.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/globals.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap-2.3.1/css/bootstrap.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/home_screen.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery-1.9.1.min.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui-1.10.2.custom/js/jquery-ui-1.10.2.custom.js?body=1" type="text/javascript"></script>
<script src="/assets/home_screen.js?body=1" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="wvpCKeGQlyowV18CYU4V2Vn7f+IxHTK0zSkB2XVGajc=" name="csrf-token" />
How can I add output spacing for such results?
<link href="/assets/css-reset.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/globals.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap-2.3.1/css/bootstrap.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/home_screen.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery-1.9.1.min.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui-1.10.2.custom/js/jquery-ui-1.10.2.custom.js?body=1" type="text/javascript"></script>
<script src="/assets/home_screen.js?body=1" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="wvpCKeGQlyowV18CYU4V2Vn7f+IxHTK0zSkB2XVGajc=" name="csrf-token" />
you can try
stylesheet_link_tag("application", :media => "all").split("\n").join("\n ")
but you really think it worth the trouble?
You can see your HTML properly indented with firebug or something. Also this is more bytes to load while getting your webpage.
At first in production.rb
config.assets.compress = true
I change this and i run production mode.
Now all css and js are combined and view as
<link href="/assets/application-216f7d9bf69633b46766413cf646b8a5.css" media="all" rel="stylesheet" type="text/css" />
<script media="all" src="/assets/application-cfa3f1d1e18cc9a8acfb0492bd8ae99e.js" type="text/javascript"></script>
But now i want all css and js to load individually not in compress mode
so i changed
config.assets.compress = false
Now i want to so my ctrl U as like this
<link href="/assets/bootstrap-wysihtml5/core.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap-wysihtml5/wysiwyg-color.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap-wysihtml5/index.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/app_modules.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/assets.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/authentications.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap_and_overrides.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/companies.css?body=1" media="all" rel="stylesheet" type="text/css" />
I mean all in uncompress form. But it is not workin.. again it comes in compress form like before. Do i have to clear cache or where i am missing?
In your application.rb you also need to disable asset pipeline for production mode.
application.rb :
# Enable the asset pipeline
config.assets.enabled = false
All is in the title
I've tried:
config.serve_static_assets = true
I updated the gem and then: rails generate gmaps4rails:install
The map is perfectly showing in local mode but doesnt appear un production!
the is totaly empty...
Here is the content of my head:
<head>
<link href="/images/favicon.ico" rel="SHORTCUT ICON">
<link type="text/css" rel="stylesheet" media="screen" href="/stylesheets/gmaps4rails.css?1314057878">
<link type="text/css" rel="stylesheet" media="screen" href="/stylesheets/reset.css?1314057878">
<link type="text/css" rel="stylesheet" media="screen" href="/stylesheets/default.css?1314057878">
<link type="text/css" rel="stylesheet" media="screen" href="/stylesheets/buttons.css?1314057878">
<link type="text/css" rel="stylesheet" media="screen" href="/stylesheets/colorbox.css?1314057878">
<script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script>
<script type="text/javascript" src="/javascripts/application.js?1314057878"></script>
<script type="text/javascript" src="/javascripts/jquery.1.4.4.js?1314057878"></script>
<script type="text/javascript" src="/javascripts/jquery-ui.js?1314057878"></script>
<script type="text/javascript" src="/javascripts/jquery.colorbox-min.js?1314057878"></script>
<script type="text/javascript" src="/javascripts/jquery-ujs-1.4.4.js?1314057878"></script>
<script type="text/javascript" src="/javascripts/application.js?1314057878"></script>
<script type="text/javascript" src="/javascripts/active_scaffold/default/active_scaffold.js?1314057900"></script>
<script type="text/javascript" src="/javascripts/active_scaffold/default/jquery.editinplace.js?1314057900"></script>
<script type="text/javascript" src="/javascripts/active_scaffold/default/date_picker_bridge.js?1314057900"></script>
<link type="text/css" rel="stylesheet" media="screen" href="/stylesheets/active_scaffold/default/stylesheet.css?1314057900">
<!--[if IE]><link href="/stylesheets/active_scaffold/default/stylesheet-ie.css?1314057900" media="screen" rel="stylesheet" type="text/css" /><![endif]-->
<meta content="authenticity_token" name="csrf-param">
<meta content="/MYbif2q6UmcrXyAS7WyYtOViwkr8pyXjXQTTNYtQsc=" name="csrf-token">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript" src="http://maps.gstatic.com/cat_js/intl/fr_ALL/mapfiles/api-3/6/0a/%7Bmain,places%7D.js"></script>
<script type="text/javascript" charset="UTF-8" src="http://maps.gstatic.com/cat_js/intl/fr_ALL/mapfiles/api-3/6/0a/%7Bcommon,util%7D.js"></script></head>
Any idea?
I had the same problem with the pre 1.x, although it was fixed by calling each file individually in the manifest file after manually loading them into the vendor asset dir.
However, the latest gem worked as it said in the readme. From an older version update it via bundler, remove any of it's js files copied into the assets dir (like I had previously), run the install script again, and in the manifest file (I'm using vendor/assets/javascript/external.js) use the namespaced require statement for the files you need.
//= require gmaps4rails/googlemaps.js