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
Related
I've got a new spree rails 6 application and I can't get any of the sass files to compile. Here's my assets/stylesheets file:
stylesheets
app
_file.scss
_another_file.scss
mixins
_mix-media-queries.scss
_mix-general.scss
modules
_modules_file.scss
application.css
style.scss
application.css:
*= require_tree .
*= require_self
*= require ./style
style.scss:
#import "mixins/_mix-media-queries";
etc...
But when I load the page it give me this error:
Error: Undefined variable: "$color-dark-red". Which is an var in the mixins file.
_head.html.erb:
<title><%= title %></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<%== meta_image_data_tag %>
<%== meta_data_tags %>
<%= canonical_tag(current_store.url) %>
<%= favicon_link_tag 'favicon.ico' %>
<%= stylesheet_link_tag 'spree/frontend/all', media: 'screen', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag "application", media: "all" %>
<%= csrf_meta_tags %>
<%= render 'spree/shared/paths' %>
<%= javascript_include_tag 'spree/frontend/all', defer: true, 'data-turbolinks-track': 'reload' %>
<%= yield :head %>
This is so frustrating as I cannot get the stupid styles to load! I'm new to rails 6, is this a new rails 6 thing with the asset pipeline?
Sprockets directives do not work well at all with SASS.
When you require SASS files with sprockets it will send the files through the SASS compiler one by one and then concatenate the results together. Of course this blows up as soon as one of your SASS files references a variable, include or function that is declared in any other file.
You need to change the extension of your application.css to .scss and only use SASS #import directives that tells the SASS compiler to pull in the other file.
is this a new rails 6 thing with the asset pipeline?
No. This applies to previous versions of Rails and both SASSC and the old Ruby Sass Compiler.
See:
https://github.com/rails/sass-rails#important-note
I am having some issues loading jQuery in my Rails 5 app and I noticed that in my application.html.erb where I have the line:
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
It renders in production as:
<script src="/assets/application-6ae626540db9f70a95910bd840e1005a357fae74302f0d8866bd4da5fd67d6cc.js" data-turbolinks-track="reload"></script>
with a 404 error, not found. I recently moved to Rails 5 but I am used to seeing all the assets listed there. Am I missing something?
I am using Rails 5 on my project and i am new on Rails. When i running
rake assets:precompile
I got error
Sass::SyntaxError: File to import not found or unreadable: mycustomize.
mycustomize.scss is my customize css file which is in /app/assets/stylesheets folder.
I searched a solution is change application.css to application.scss it do works, but i got a new error:
ActionController::RoutingError (No route matches [GET] “/stylesheets/application.css”)
Anyone can explain and help on this. Thank you!
EDIT
application.html.erb
<head>
<title>GoalStack</title>
<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
EDIT2
Before i add mycustomize.scss i use application.css which works well on server. I am trying to add some customize layout so i created mycustomize.scss and in application.css i add
#import "mycustomize";
After all of this all works well locally. When i try to deploy to my staging server, i got the error described above.
config.public_file_server.enabled = false
did the trick, thanks Arup Rakshit.
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.