I have been trying to follow a guide to setting up the asset pipeline in a sinatra app, the aim to reduce my http requests when loading my web page.The guide is Located Here
I think im stumbling on creating a module within a sinatra app, apologies if this is basic but havent done this before.
So i created a folder called modules and placed an assets.rb file within it. I have modified the script to suit my needs
class Assets < Sinatra::Base
configure do
set :assets, (Sprockets::Environment.new { |env|
env.append_path(settings.root + "/assets/js")
env.append_path(settings.root + "/assets/css")
# compress everything in production
if ENV["RACK_ENV"] == "development || production"
env.js_compressor = YUI::JavaScriptCompressor.new
env.css_compressor = YUI::CssCompressor.new
end
})
end
get "/assets/js/app.js" do
content_type("application/javascript")
settings.assets["app.js"]
end
get "/assets/css/app.css" do
content_type("text/css")
settings.assets["app.css"]
end
end
my assets directory structure
assets
css
app.css
other.css
js
app.js
other.js
my config.ru
require './david'
use Assets
run Sinatra::Application
In each of my app.js and app.css i have put
// require_tree
but in my js file it is greyed out and in the css it is still in white?
I have installed both gems required but still when loading the page there are multiple http requests rather than grouping all the css and js as one call
Can anyone see anything im missing, mainly the module setup im guessing?
Thanks
EDIT
My current layout file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>David's Carpets</title>
<!--stylesheets-->
<%= stylesheet_link_tag "/assets/css/font-awesome.min.css" %>
<!--[if IE 7]>
<link rel="stylesheet" href="/assets/css/font-awesome-ie7.min.css">
<![endif]-->
<%= stylesheet_link_tag "/assets/css/bootstrap.min.css" %>
<%= stylesheet_link_tag "/assets/css/bootstrap-responsive.min.css" %>
<%= stylesheet_link_tag "/assets/css/custom.min.css" %>
<%= stylesheet_link_tag "/assets/css/resp-980.min.css" %>
</head>
<body onload="initialize()">
<%= styled_flash %>
<%= yield %>
<%= erb :footer %>
<!-- Javascript -->
<script src="/assets/js/jquery-1.7-min.js" type="text/javascript"></script>
<script src="/assets/js/valid_mail.min.js" type="text/javascript"></script>
<script src="/assets/js/twitter.min.js" type="text/javascript"></script>
<script src="/assets/js/custom.min.js" type="text/javascript"></script>
</body>
</html>
I think you'd be better to add the root path using a proc:
set :assets, Proc.new { Sprockets::Environment.new(root) {|env|
env.append_path File.join( root, "/assets/js")
env.append_path File.join(root, "/assets/css")
# more…
}}
See if that improves things. You might want to use Pry or just warn to check that the value of settings.assets["app.js"] is what you expect it to be.
Workarounds
Like I said in the comments above, things don't always map well from one framework to another. Personally, I precompile my assets using Guard/SASS and Guard/Coffeescript into the public folder. There are also minification libraries that hook up with Guard I then use Sinatra Static Assets or Sinatra Exstatic* to point to the files in views/layouts. I don't like to combine the javascript into one file (YMMV).
I also wanted the jQuery stuff that Rails added in via jquery-rails, so I wrote rack-jquery, rack-jquery_ui, and rack-jquery_ui-themes. They may be of interest to you.
Another way to get Sprockets working for you would be to use Rack. I found this blog post that shows you how:
http://metabates.com/2011/08/31/using-sprockets-without-rails/
I also wrote Sinatra Exstatic, it's a fork of Sinatra Static Assets. It's a recent fork, if you use it any feedback will be welcome :)
Additional, now that the templates are posted in the question:
Sinatra won't do anything magic for you to point to the "super" css/js file, so if you have several CSS and javascript links then a client will still make several requests to the individual files. One way around this would be (in the case of the JS) to only have one statement, e.g:
<!-- Javascript -->
<script src="/assets/js/app.js" type="text/javascript"></script>
and that's it. Another way to do this would be to keep all the statements you've got, but catch every statement using the route, e.g:
# The local variable `name` isn't used below
# but just in case you ever need it, it's there
get "/assets/js/:name.js" do |name|
content_type :javascript
settings.assets["app.js"]
end
Related
I consider moving from Thymeleaf templating to EJS templating in my Spring Boot application (there is a need to execute some javascript code on server side). I've successfully configured everything and created my first view using few online examples:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Hello</title>
</head>
<body>
Hello <%= username %>
</body>
</html>
This works OK when I pass String variable named "username" from controller to view. However, I would like my view to use messages from static file "/resources/i18n/messages.properties". In thymeleaf it is widely used, simple and possible by:
th:text="#{messages.hellomessage}"
How to achieve the same result using EJS?
You'll have to create a new ScriptTemplateViewResolver and also create a new ScriptTemplateConfigurer leveraging the Nashorn support as engine.
Take a look at this tutorial for an example.
I'm porting an old site to a new template and am having problems with the Windows 2008 rewrite module. The link I'm trying to rewrite looks like this:
http://ltweb2008.serveronline.net/product.php?pID=75
and brings up the page just fine. Then I apply the new URL and it loads the proper content, but doesn't load the template's style.css file anymore.
http://ltweb2008.serveronline.net/product/75/any-text-here
The problem seems to be that the company who made the template (canvas) put the main .css file in the root directory, but loaded all the rest in /css. Now I can't get the main .css file to load using the rewrite and when I move it down to /css it only displays a blank page, though when I check out the page source it's all there.
With this the page shows but is not using style.css (with rewrite):
<link rel="stylesheet" href="style.css" type="text/css" />
With any of these the page is completely blank (with rewrite):
<link rel="stylesheet" href="/style.css" type="text/css" /> OR
<link rel="stylesheet" href="/css/style.css" type="text/css" /> OR
<link rel="stylesheet" href="http://ltweb2008.serveronline.net/style.css" type="text/css" />
I'm using this for the Pattern:
^product/([0-9]+)/([^/]+)$
And the Rewrite URL:
/product.php?pID={R:1}
Does anyone know what I'm missing?
one solution is that use absolute path (ex /css, or /js rather than just css/, /js but this is not looks a reliable solution since we've to change it on all files,
This is because your relative URIs have their base changed. Originally, the base is / when the page is /product.php?id=75, and the browser properly fills in relative links with the / base. But when the browser goes to a page like /product/75/any-text-here the base suddenly becomes /product/ and it tries to append that in front of all relative URLs and thus none of them load.
You can either make your links absolute, or change the URI base in the header of your pages (inbetween the <head> </head> tags):
<base href="/">
Maybe you need one thing, maybe both, I didn't test, but this solved it for me:
1.) ADD THIS in page_load :
Page.Header.DataBind() ' Needed because we have <%# %> codeblocks in the HEADER (seems header only causing this) WITH the AjaxControlToolkit running on the page. That's what broke it until we put in this and put in the pound instead of = sign in the html.
2.) Add this in ASPX:
<%# MasterType VirtualPath="~/dir1/dir2whateverdir/MasterPage.master" %>
This question already has answers here:
Adding icon to rails application
(5 answers)
Closed 9 years ago.
I can't get my favicon to show up. It's called favicon.ico and inside of public directory (folder). My development log shows no problems with the favicon. I put the link in my application layout:
<!DOCTYPE html>
<html>
<head>
<%= csrf_meta_tag %>
<%= favicon_link_tag "/favicon.ico" %>
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "application" %>
</head>
<body>
<%= yield %>
</body>
</html>
But its still not showing up in Firefox. I cleared my cache with Firefox and I also tried <%= favicon_link_tag %> too. I haven't tried production but can you even see it in localhost? What am I missing?
UPDATE
So its showing up in Chrome but not Firefox. Any idea why?
If you suspect caching is the problem, you could also trick the browser into loading the new icon by adding a parameter to the filepath.
Instead of
favicon_link_tag "/favicon.ico"
Use
favicon_link_tag "/favicon.ico?1"
Clear the cache again in Firefox (I usually just clear everything) and then check out the network traffic when you load your page. Make sure that favicon.ico is being requested. If not, then it's probably being cached somewhere. I had lots of issues with this the other day but after a couple of cache clears it suddenly started working.
I have a rails 3.1 application that uses a default layout with css in "/app/assets/stylesheets/application.css" as per standard practice. This works great with the asset pipelining stuff for the main part of my application.
But I use a different "reporting" layout when I generate a report that uses a /app/views/layouts/showreports.html.erb layout as follows:
<!DOCTYPE html>
<html>
<head>
<%= stylesheet_link_tag "showreports" %>
<%= javascript_include_tag "showreports" %>
<%= csrf_meta_tag %>
</head>
<body>
<div id="mainarea" class="container">
<div class="span-24 last">
<%= yield %>
</div>
</div>
</body>
I'm using rake assets:clean; rake assets:precompile to pre-compile my assets and check things are looking good in the manifest file (/public/assets/manifest.yml) and I don't see any references to showreports.css or showreports.js.
When I test my program in dev-mode, unsurprisingly, it can't locate those files.
I'm guessing this is a basic sprockets question with rails 3.1 but I thought sprockets would be smart enough to parse all the layout files for assets (beyond the default application.html.erb file).
Just wondering if this may be a bug or just my misunderstanding on how this should work.
Cheers,
Greg
UPDATE
After more tinkering, I'm answering my own question as this made the most sense for me...
This answer really gave the right clue
What I was doing wrong was using files named "showreports.css" and "showreports.js" as manifest files.
My fix was to create /app/assets/stylesheets/showreports and /app/assets/javascripts/showreports and then to rename my showreports.(css|js) to application.(css|js) inside their respective directories.
After doing so, rake assets:precompile found them nicely and added them correctly to the manifest file.
According to http://guides.rubyonrails.org/asset_pipeline.html you should also add following:
config.assets.precompile += %w(showreports.css showreports.js)
to your application.rb file
It's a misunderstanding. Rails Assets Pipeline only compiles files located in RAILS_ROOT/app/assets and you must reference them directly. If you want another file to be generated simply create another manifest file with similar content to application.css/js. Also check require directives to avoid including one file into the other.
I am using Spring roo and STS Insight server. I want to create a javascripts folder to add my javascript files and link them in my JSP. however, I don't know where to put the javascript files because, my JSP never can find it.
More interestingly, the dojo.js is located with no fuss. I looked in my sts directory. It appears insight.war could be housing the dojo.js. but I still can't figure out how the path is setup.
resources/dojo/dojo.js is located.
in file system, we have insight.war/dojo/dojo/dojo.js. So clearly, resources is pointed to insight.war/dojo/dojo.js. Where is this configuration? I want to change it, Preferably best load it from within my application.
Can someone help me please?
You can put all your files (images, css, javascript ...) in src\main\webapp
include a css like
<style type="text/css">
#import "${pageContext.request.contextPath}/your_dir_in_src_main_webapp/your_css.css";
</style>
include a js like
if you js contains jsp tag then
<script type="text/javascript" charset="utf-8">
<%# include file="/your_dir_in_src_main_webapp/your_js.js" %>
</script>
if you js doesnt contant jsp tag than
<script type="text/javascript" charset="utf-8" src="/your_dir_in_src_main_webapp/your_js.js"></script>