I changed my rails app to production mode then deployed it to Heroku and found that the assets apparently weren't being accessed in production mode. I was able to solve this issue by precompiling the assets, but now after changing something then pushing to Heroku I'm back to square one and css and bootstrap are not working. All the links in my head look like this:
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'style', media: 'all', 'data-turbolinks-track':
'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> .
</script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> .
</script>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display"
rel="stylesheet">
It seems the stylesheets are not loading for some reason, but most of the images are, so I guess it's not all of the assets. I've tried to find a clue to the issue by looking in the logs, but I can't recognise anything amiss. Please help with suggestions, I'm not sure what to try next, thanks :-)
In your stylesheet link tag, try changing 'style' to 'application'
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
By loading in the application stylesheet you are loading in all custom stylesheets as well, as long as you have:
*= require_tree .
*= require_self
included in the application.scss file.
http://guides.rubyonrails.org/asset_pipeline.html#in-production
Please use before deploy app into Heroku
rake assets:precompile
then
git add .
git commit -m "some"
git push heroku master
I used following specifications.
1) rails 5.1.3
2) ruby 2.4.1
3) rail with webpacker
4) Angular 4.3.4 with webpacker (Typescript)
I create new rail app using command rails new my-rails-app --webpack-angular.
Folder structure
After that, as per instruction under app/javascript/packs/application.js and app/javascript/packs/hello_angular.js, I added <%= javascript_pack_tag 'application' %> in application.html.erb to head tag next after javascript_include_tag.
Also add below markup to body tag in layout application.html.erb
// <hello-angular>Loading...</hello-angular>
//
// <%= javascript_pack_tag 'hello_angular' %>
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>AngularOnRailsWithWebpack</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application' %>
</head>
<body>
<hello-angular>Loading...</hello-angular>
<%= javascript_pack_tag 'hello_angular' %>
<%= yield %>
</body>
</html>
Now create new scaffolding by running rails g scafolld post title:string desc:text and set post index page as root path
Now run rails server by running rails s and webpack server by running ./bin/webpack-dev-server
Works fine.
But When I navigate routes by click on new post or edit post it fire errors in web console like below.
Solution I tried
1) Remove javascript_include_tag from application.html.erb. But it will remove turbolink. I don't want to remove that.
2) Restore javascript_include_tag and update index.ts under app/javascript/hello-angular/index.ts. Add turbolink load event as per this video instruction https://www.youtube.com/watch?v=lGToT9RyDxc
Index.ts
import './polyfills.ts';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
document.addEventListener('turbolinks:load', () => {
platformBrowserDynamic().bootstrapModule(AppModule);
})
Work fine. It will render code fine but still same zone error in web console.
May be this is rails issue. If so then I hope it will resolve in next patch release.
Can any one help that how to resolve this issue ? What I am doing wrong.
I just created a sample Rails project running in Windows and ran rails s, which ran fine for setup. Later, I created a resource called resources :crm and generated the necessary components. I ran into this error that is quite bugging me much. I tried degrading ExecJS but no avail. I also installed Node.js, but that didn't work either. Here is the error log:
Showing C:/Users/Rodrigo Argumedo/projects/CRM/app/views/layouts/application.html.erb where line #6 raised:
No such file or directory # unlink_internal - C:/Users/Rodrigo Argumedo/AppData/Local/Temp/execjs20150622-2296-sj99kvjson
Rails.root: C:/Users/Rodrigo Argumedo/projects/CRM
Is there a solution to this? If so, guide me where to fix this particular error?
EDIT:
Application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Sample Rails</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
It turns out it was a ExecJS problem and forced to run bundle install -f to reinstall the gems and it worked again.
I am still not quite sure about the best practice of using rails asset pipeline. In a rails skeleton project, the application.html.erb contains code as:
<head>
<title>My title</title>
<%= stylesheet_link_tag "scaffolds" %>
<%= stylesheet_link_tag "depot", media: "all" %>
<%= stylesheet_link_tag "application", media: "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
Now in development, all js and css would be served properly. But in production, after precompile all the asset (js and css), I only need application.css and application.js, as scaffolds.css and depot.css are concatenate in application.css. So scaffolds.css and depot.css are no longer needed in production.
How could I have the above code in dev and then in production, have asset pipeline know certain assets have been concatenated in application.css/js and then remove those asset link tag in the code?
If this is not possible, how should I avoid loading redundant resources and keeping prod deployment manageable? (meaning no deleting the link_tag manually in production)
Thanks.
You do not put
<%= stylesheet_link_tag "scaffolds" %>
<%= stylesheet_link_tag "depot", media: "all" %>
<%= stylesheet_link_tag "application", media: "all" %>
in your layout file. You only put
<%= stylesheet_link_tag "application", media: "all" %>
And in config/environment/development.rb you make sure you have
config.assets.debug = true
When config.assets.debug is set to true it will automatically generate the <link ... /> tags for each of your stylesheets in dev mode for each assets required in the application.css file's Sprockets directives.
In config/environment/production.rb config.assets.debug will be false by default, causing the assets to be concatenated together into a single application.css file (again, assuming your //= require lines are correct in application.css). This will cause 1 link tag to be created for only application.css in production.
I'm new to rails and working my way into the tutorial here: http://ruby.railstutorial.org/ruby-on-rails-tutorial-book
I've added the blueprint css package to the public/stylesheets directory and added a custom.css file however I cannot seem to get the stylesheet to load. From my understanding fo the setup the page should have a blue background and some other small changes.
In my app/views/layouts/application.html.erb file I've added the following line:
<%= stylesheet_link_tag 'stylesheets/custom', :media => 'screen' %>
Which I believe should cause the css from the /public/custom.css to load.
In the tutorial the content of the custom.css file is located in section 5.1.2 (sorry I'm only able to post 2 hyperlinks here)
.
And the content of the app/views/layouts/application.html.erb file is here:
http://ruby.railstutorial.org/chapters/filling-in-the-layout#sec:adding_to_the_layout
When I view source on the page there is a link to the custom.css file here:
But clicking that brings up a "Routing Error - No route matches "/stylesheets/stylesheets/custom.css"" message.
As far as I can find I've followed the tutorial exactly so I'm not sure what is wrong or what I've missed. Any help on where to go from here would be appreciated.
complete text of the application.html.erb file:
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<%= csrf_meta_tag %>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<%= stylesheet_link_tag 'blueprint/screen', :media => 'screen' %>
<%= stylesheet_link_tag 'blueprint/print', :media => 'print' %>
<!--[if lt IE 8]><%= stylesheet_link_tag 'blueprint/ie' %><![endif]-->
<%= stylesheet_link_tag 'custom', :media => 'screen' %>
</head>
<body>
<div class="container">
<header>
<%= image_tag("logo.png", :alt => "Sample App", :class => "round") %>
<nav class="round">
<ul>
<li><%= link_to "Home", '#' %></li>
<li><%= link_to "Help", '#' %></li>
<li><%= link_to "Sign in", '#' %></li>
</ul>
</nav>
</header>
<section class="round">
<%= yield %>
</section>
</div>
</body>
</html>
This still has the same error when clicking the custom.css link in source as before:
"Routing Error - No route matches "/stylesheets/stylesheets/custom.css""
is this happening on localhost or production environment? If it's production then open config/production.rb and change:
config.serve_static_assets = false
to
config.serve_static_assets = true
If this is happening in development environment then I'm wondering if you possibly have more than 1 layout file. Check to make sure you don't have application.html.erb and application.html.haml. It's also possible that you have a separate layout for your posts, which would be titled post.html.haml or something...
ALSO
you state the following:
Which I believe should cause the css from the /public/custom.css to load.
If your custom.css file is located in public/custom.css then it is in the wrong place, it should be in public/stylesheets/custom.css
EDIT:
below is a screenshot of your app as it appears on my machine, it looks like it works ok after moving stylesheet into the right folder. I also took the liberty of deleting public/index.html, but you can leave it in for now until the tutorial advises you to take it out
Change it to stylesheet_link_tag 'custom', :media => 'screen'. It will automatically look in the /public/stylesheets/
So I'm not sure if you ever figured this out (I'm sure you did), but I just had the same issue, and found a solution. It looks like rails is looking in /app/assets/stylesheets instead of /public/stylesheets. I'm not sure if this is the correct way it should be working, but I moved my custom.css file there and everything is now working fine.
I had a similar problem following the tutorial but it hit me in chapter 4 where we first include the helper for the blueprint css files. I am using Rails v. 3.1.3, and for me nnaficy's answer solved the problem. Heres the description of why this is happening from the rubyonrails guide :
(source: http://guides.rubyonrails.org/layouts_and_rendering.html)
"3.1.2 Linking to JavaScript Files with the javascript_include_tag
The javascript_include_tag helper returns an HTML script tag for each source provided.
If you are using Rails with the Asset Pipeline enabled, this helper will generate a link to /assets/javascripts/ rather than public/javascripts which was used in earlier versions of Rails. This link is then served by the Sprockets gem, which was introduced in Rails 3.1."
(i copied the above for the explanation, but specific to css is the following snippet:)
"3.1.3 Linking to CSS Files with the stylesheet_link_tag
The stylesheet_link_tag helper returns an HTML tag for each source provided.
If you are using Rails with the “Asset Pipeline” enabled, this helper will generate a link to /assets/stylesheets/. This link is then processed by the Sprockets gem. A stylesheet file can be stored in one of three locations: app/assets, lib/assets or vendor/assets."
so instead of copying my blueprint folder to public/stylesheets/, i copied it to app/assets/stylesheets/ and the css did its magic.
Change the line:
<%= stylesheet_link_tag '/stylesheets/application', :media => 'screen' %>
to
<%= stylesheet_link_tag '/stylesheets/custom', :media => 'screen' %>
It worked for me.
Also, for those who are still working on the problem, check that you are puting the CSS in the right project. I had a folder called "sample_app" in which I started the tutorial. Some days after, I started using Aptana/RadRails, which created a custom project folder (workspace). I didn't realized and put all my css in my initial "sample_app" folder. That's why Rails could not find the css/logo!
Same question with my current Rails 3.2.6 app. I've solved it with this include function:
<%= stylesheet_link_tag '/stylesheets/custom', :media => 'screen' %>
You have to use absolute path's instead of relative ones.
Ok so maybe someone out there is still struggling, I've been trying to figure these out for a while now and i have solved the problem. Like #shime is saying Rails looks in public/stylesheets.
application.html.erb
-----------------
`<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<%= csrf_meta_tag %>
<%= stylesheet_link_tag **'screen'**, :media => 'screen' %>
<%= stylesheet_link_tag **'print'**, :media => 'print' %>
</head>
<body>
<%= yield %>
</body>
</html>`
Move screen.css and print.css from stylesheet/blueprint to app/assets/stylesheets.