An understandably weird question. I'm porting a project to RoR, in order to use some of its components. Asset management is not one of them.
I wind up with something like this in my page source:
<!DOCTYPE html>
<html>
<head>
<title>Opera</title>
<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/main.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/main.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="5YFRzv/wICYBms8cregzthpFqCr5gf3pQknNpLOOeEg=" name="csrf-token" />
</head>
<body>
<!-- My scripts and stylesheets below -->
What do I do differently such that the page doesn't load its own scripts and stylesheets?
Additionally, if I link stylesheets in the .erb template, they all wind up under the <body> tag. The Rails stylesheet/script helpers assume that your stuff is in the /asset directory.
How do I get Rails to link my scripts under <head> if I've placed my scripts and stylesheets in /public?
Thanks!
The default scripts and stylesheets are loaded because of the following two lines in app/views/layouts/application.html.erb
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
Rails uses the layout defined in the file app/views/layouts/application.html.erb as a default for rendering any view. The views go in the body part of application.html.erb while rendering.
You can remove the unwanted js from app/assets/javascripts/application.js file and css from app/assets/stylesheets/application.css file. You can also specify your own assets in these two files.
I am not sure about /public level. Rails pipeline assets can be placed inside an application in one of three locations: app/assets, lib/assets or vendor/assets.
Read more details for: Rails Asset Pipeline
Related
I came on this weird Rails issue: I added a root route to my route.rb file
root :to => 'pages#home'
however, when I enter:
http://localhost:3000
in the browser, the css styles for my home page do not show.
The odd thing is, that when I go to:
http://localhost:3000/home
the css does get rendered.
I'm using Rails 4.1.0
does anyone know what could be the problem?
ps:
my application.html.erb code looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Mysite</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= render "layouts/header" %>
<%= yield %>
<%= render "layouts/footer" %>
</body>
</html>
The header of my rendered page:
http://localhost:3000
looks like this:
<head>
<meta charset="utf-8">
<title>Anthony Candaele</title>
<link rel="stylesheet" href="css/style.css" />
</head>
However, when I go to:
http://localhost:3000/home
the header source of the rendered page looks like this:
<head>
<title>Mysite</title>
<link data-turbolinks-track="true" href="/assets/application.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/application.js?body=1"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="UAWpX6x35EzVFSFyNPsaPPdE/0kEWqBQStCs9qWtOGc=" name="csrf-token" />
</head>
I've already finished my project, and it seems working fine.
But, I've just found that there's more things to do with optimization.
Google's PageSpeed Insight just told me that
I have to Remove Render-Blocking JavaScripts, Optimize CSS Delivery and Leverage Browser Caching
About Remove Render-Blocking JavaScripts, and Leverage Browser Caching, it says that I have to work with my Assets Javascripts.
They are currently stated just like this in view
<%= javascript_include_tag 'application.js' %>
<%= javascript_include_tag 'illuminate.js' %>
<%= javascript_include_tag 'bootstrapSwitch.js' %>
<%= javascript_include_tag 'bootstrap.js.coffee' %>
<%= javascript_include_tag 'rails.js' %>
and its html ouput is this
<script src="/assets/application-21cb698a1b325807d74e3f5588e.js" type="text/javascript"></script>
<script src="/assets/illuminate-1a2b0535b4a3f7468aec74882e25f3.js" type="text/javascript"></script>
<script src="/assets/bootstrapSwitch-ae37e5eb28f943501b59b08ac6234.js" type="text/javascript"></script>
<script src="/assets/bootstrap-1b52926900736585a26c3fe0975f73.js" type="text/javascript"></script>
<script src="/assets/rails-e46b066113d4a1ff96120b8493021d9.js" type="text/javascript"></script>
How can I change this to change this in order to archive?
and about Optimize CSS Delivery, it says that I have to optimize these
<%= stylesheet_link_tag "application","http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css" %>
<%= stylesheet_link_tag 'bootstrapSwitch' %>
and this is its html ouput
<link href="/assets/application-e8a61afef574ba15cb71a3730d2b6b8e.css" media="screen" rel="stylesheet" type="text/css" />
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrapSwitch-b3ea2e51b3529f79637f5a8a9ef54712.css" media="screen" rel="stylesheet" type="text/css" />
How can I modify all of these?
Try :
1) minifying your javascripts : smaller the size, the faster will your pages load
2) using a CDN to host your assets : this helps to load your assets faster and hence a better response time
3) #depa gave some nice pointers to asset pipelines in rails, check that out as well
and you'll be good.
until now, I've been loading my css files on my local environment without precompile like so:
= stylesheet_link_tag "bootstrap.min", :media => "all"
= stylesheet_link_tag "bootstrap-responsive.min", :media => "all"
= stylesheet_link_tag "font-awesome.min", :media => "all"
= stylesheet_link_tag "ace.min", :media => "all"
= stylesheet_link_tag "ace-responsive.min", :media => "all"
= stylesheet_link_tag "ace-skins.min", :media => "all"
= stylesheet_link_tag "datepicker", :media => "all"
but I want to change this to precompile now...so I did this in application.css:
/*
*= require bootstrap.min
*= require bootstrap-responsive.min
*= require font-awesome.min
*= require ace.min
*= require ace-responsive.min
*= require ace-skins.min
*= require datepicker
*/
however, it loads the css files like so in the html:
<link href="/assets/bootstrap.min.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap-responsive.min.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/font-awesome.min.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/ace.min.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/ace-responsive.min.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/ace-skins.min.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/datepicker.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
the last line loading application.css screws up the css and i'm not sure how to get rid of it. without it, it looks perfect. i'm not explicitly loading it..just using it to load up the assets. how do i stop that last line from loading? it appears automatically without calling it in application.css
Often in your application.html.erb (app/views/layouts) will include with file. Check there for the requirement.
turns out I needed: *= require_self in the application.css for everything to work properly
I'm attempting to keep the application layout in my Rails 3 app for the stylesheets and javascript files I use most frequently (application.js, jquery, style, etc.). However there are plugins I'm using on certain pages and want to include those stylesheets/javascripts properly. For example, I'm looking to use slides only on my homepage. If my application layout is like the one below, what's the best way to include page-specific files?
<!doctype html>
<head>
<title>Title</title>
<link rel="stylesheet" href="http://localhost:3000/stylesheets/style.css" media="screen and (min-width:481px)">
<!--[if IE]>
<link rel="stylesheet" href="http://localhost:3000/stylesheets/style.css" media="all"><![endif]-->
<%= javascript_include_tag :defaults %>
<%= csrf_meta_tag %>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="user-scalable=no,width=device-width">
</head>
<body>
<%= render 'layouts/header' %>
<%= yield %>
<%= render 'layouts/footer' %>
</body>
</html>
The application.html.erb file:
<!DOCTYPE html>
<html>
<head>
<title>Site</title>
<%= stylesheet_link_tag :all %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
I have a file "cake.generic.css" in public/ folder.
But when I reload the page the effect of css file is not working.
If I see the page view source I see something like this:
<!DOCTYPE html>
<html>
<head>
<title>Site</title>
<link href="/assets/all.css" media="screen" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/home.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="6CPvchXr1amagxd7VmOzB82WGx/WmjfDOXjMLfjLzqQ=" name="csrf-token" />
</head>
<body>
<h1>Home#index</h1>
<p>Find me in app/views/home/index.html.erb</p>
</body>
</html>
What should I do to fix this problem?
How can I set the public folder for stylesheets and javascripts?
It looks that app/assets folder is set for css and js files?
Rails is likely consolidating all your css files into one that it is calling assets/all.css
Consider using the free plug-ins firebug + firepath to further characterize the problem. This common combo of tools will help you to interrogate web page elements and see the css that is contributing to their display.
Copy cake.generic.css to the folder public/assets/, if not exists make directory first.
then add this to you erb
<%= stylesheet_link_tag "cake.generic" %>
2nd question: How can i set the public folder for stylesheets and javascripts ?
Just put all you images, js and css file under 'public/assets/' and then include them in the erb pages
3rd question: It looks that app/assets folder is set for css and js files ?
Yes, 'app/assets/stylesheets/' for css and scss file
and 'app/assets/javascripts' for js and coffeescript file
You can get more info here: http://guides.rubyonrails.org/asset_pipeline.html#how-to-use-the-asset-pipeline
Hope this work for you:)
Your Style sheet should be placed in the following directory \public\stylesheets from your root project and also if you want to specify different location provide an absolute path inside stylesheet_link_tag("/public/yourfolder/test.css")
I had similar issue, but my fix was to make sure the css is under app/assets/stylesheets/ and I had to add the below line to the application.css file (my css file is named custom.css)
#import 'custom'