I am trying to get ASP.NET Bundling to change the way it generates paths for JS/CSS bundles. If my site is hosted on http://example.com/myapp and i use Scripts.Render("~/bundles/js") and Styles.Render("~/bundles/css"), this is what i get:
<script src="/myapp/bundles/js?v=RYQkGlZ5kEreOyiFPLgJ2SkEJtBEjiJQ6NeuVTYwXMY1"></script>
<link href="/myapp/css?v=1FC5SbQ1-E0J4ZXC1coG1W09-2uMUsJx0S1y_amIU3U1" rel="stylesheet"/>
Instead, if through some DNS magic we can enable the user to use the URL http://myapp - although it's still hosted at http://example.com/myapp - I would like the script/style bundles to render URLs like this:
<script src="bundles/js?v=RYQkGlZ5kEreOyiFPLgJ2SkEJtBEjiJQ6NeuVTYwXMY1"></script>
<link href="bundles/css?v=1FC5SbQ1-E0J4ZXC1coG1W09-2uMUsJx0S1y_amIU3U1" rel="stylesheet"/>
Is there a workaround for this? I don't think that Scripts.RenderFormat or Styles.RenderFormat will help with this.
The root of the problem was that I needed to configure the app to be at the root of my web site.
However, the DNS magic (an F5 load balancer) helped in this case... and our F5 wizard was able to do all the URL re-routing / re-writing for requests so that even though the app is not at the root, the requests get to the correct place.
Related
When you are testing a web application in visual studio using IIS Express, you'll be able to add a reference to a script file like this (inside an ASPX file):
<head>
<script src="/Javascript/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
However, when you are deploying the exact same application on an standard IIS server (using a web deployment package), you'll get an missing error 404 because the browser won't be able to resolve the url.
To fix it, I could simply remove the slash from the path:
<script src="Javascript/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
However, this question ain't about how to fix the link since this question has been asked and answered many time. What I would like to understand is why does IIS Express handle those url correctly while IIS Express ain't able to? Is it question of security (ex: browser has access to you local file while working on your own computer which ain't the case on remote server) or is it a matter of settings the doesn't get exported in the web package?
From what I can tell from the answer you made in the comments, I understand that your IIS server is configured with something like http://localhost/mysite/Javascript/... while your IIS Express setup is more like http://localhost:8888/Javascript/...*
If it is really the case, the difference comes from the fact that a relative URL beginning with / means it is relative to the host name part of the url while a relative url without the initial / is relative to the actual page folder.
In the current example, if the page is demo.htm,
Server
Base Page
Relative Url
Result Url
IIS
http://localhost/mysite/demo.htm
/Javascript/jquery-2.1.1.min.js
http://localhost/Javascript/jquery-2.1.1.min.js
IISExpress
http://localhost:8888/demo.htm
/Javascript/jquery-2.1.1.min.js
http://localhost/Javascript/jquery-2.1.1.min.js
IIS
http://localhost/mysite/demo.htm
Javascript/jquery-2.1.1.min.js
http://localhost/mysite/Javascript/jquery-2.1.1.min.js
IISExpress
http://localhost:8888/demo.htm
Javascript/jquery-2.1.1.min.js
http://localhost/Javascript/jquery-2.1.1.min.js
Since I suppose your Javascript folder is part of your site, as you can see in the previous table, a Url with the front slash would not point at the right Url. On the other hand, using the front slash to access a root folder would work from anywhere within a website.
On a site not, another way of having both behave the same way would be to modify the project's properties for IIS Express (or directionly the applicationHost.config file) so that it also uses a virtual directory instead of mapping directly to root.
I am having speed trouble working with my locally hosted wordpress application. This is because it always looks up online resources like fonts.google.com..., api.google.com..., etc, it only when the resources are loaded or fail to.
What would be the best solution to cutting this loading of remote resources?
Would overriding php load time do the trick?
Presumably all these resources are being loaded from a CDN, and that would be the way to go. You can improve the performance of your site even further by pre-resolving the DNS of the CDNs.
In your <head> tag, you would have something like this:
<link rel="dns-prefetch" href="//fonts.google.com">
<link rel="dns-prefetch" href="//api.google.com">
Also consider hosting all of your assets in your own CDN. This way you would only have to deal with a single DNS resolution.
I common pattern is something like http://www.example.com for the actual site and http://assets.example.com for JS, CSS, and images, fonts, etc.
Here are a few CDN hosting options: http://en.wikipedia.org/wiki/Content_delivery_network#Notable_content_delivery_service_providers
Lastly, if you insist in that you don't want any remote resources, just download what you need and host them locally (on the same server running your site).
I have a setup where nginx is serving all static content (CSS/JS).
Our problem is that when we update the static content the browser doesn't necessarily update them immediately, causing problems when we're pushing new versions.
I would like to have a nginx plugin that basically replaces all calls to CSS/JS and ads a versioning number, like this:
Before:
<link rel="stylesheet" type="text/css" href="/media/css/style.css" />
After:
<link rel="stylesheet" type="text/css" href="/media/css/style.css?3428432" />
And does this automatically based on the latest changed date on the style.css file itself. So I don't have to update the HTML.
Is there a plugin for this? I know Googles mod_pagespeed does simliar things in their apache2 module.. but I can't find anyone for nginx.
Generally, this is done in the application itself, not at the webserver level. The webserver generally only knows what to serve, and from where. Both PHP and Rails have the ability to do what you're describing above, but again, that's within the application itself.
From what I can tell, this article is a good step-by-step walk through which is very similar to what you're asking for, but again, this involves application changes. If you search Google for "nginx css versioning" you'll find other articles which discuss the nginx config, but all that I looked at involved application changes as well.
Adding the below to the nginx should serve the file by taking just the filename and ignoring the version info.
location ~ ^/(assets/js|assets/css) {
root path/to/the/static/files;
access_log off;
expires max;
try_files $uri $1;
}
Well, I'm trying to make custom app_offline.htm and want to add links to my css files in project. But next code doesn't work
<link href="/Content/Themes/screen.css" rel="stylesheet" type="text/css" />
In console I've got error
GET mySite/Content/Themes/screen.css 503 (Service Unavailable)
Please, give me advise how to make a link to css file in app_ofline.htm. Any help will greatly appriciated!
The idea of the app_offline.htm is that it indicates that the app is, well, offline. So, no resources are available from the site when the site is offline. Either put the relevant rules into the page or host the stylesheet on a separate domain.
You have to use inline css style for this instead of referring to external CSS file.
<style type="text/css">
/* write your css code here */
</style>
App_Offline.htm
Basically, if you place a file with this name in the root of a web application directory, ASP.NET will shut-down the application, unload the application domain from the server, and stop processing any new incoming requests for that application. ASP.NET will also then respond to all requests for dynamic pages in the application by sending back the content of the app_offline.htm file (for example: you might want to have a “site under construction” or “down for maintenance” message).
You can add it as base64 in the img tag... like this:
<img src="data:image/png;base64,<64-bit string goes here> alt=""/>
This works at least for an image that says the site is under construction.
You can't link to it. It's offline. Unless you're using a remote css file that you can guarantee will be in a functioning server the css file will not be allowed to be served because the .Net Framework restrictions have been put in place to forbid the serving of any file except app_offline.htm. You can either put your css inline with the page or host it on a separate site (which is a choice some companies make anyway to keep design elements in a common location for enterprise applications).
I posted the following question yesterday but didn't get a helpful answer.
May i was not clear enough, i am very sorry.
After hours of searching here and googling with Bing i could not solve
the following
Problem. It does not should a "heavy" Problem.
here is my problem
I have a Domain like http://example.com that is pointed to a
virtual directory on my webspace like
http://myprovider.com/VirtualDirectoryName/.
The folder structure on my webspace is (off course) like this
root
bin
VirtualDirectoryName
bin
Content
Scripts
Views
Web.config
Global.asax
If i call now "http://www.domain.com" i get the Site without CSS and the
links
are "http://www.domain.com/VirtualDirectoryName/".
I used the default and almost empty default "Internet Application". So
the routing
is default and all links are created with #Html.ActionLink.
Please help me, i tried so many things but i cant get it working. In my
local environment i can affect that with IIS settings but (off course) i
do not have access on the IIS settings of my host.
btw, my hosting provider provider is discount ASP.NET.
Thank you all!
How are you referencing the css files in your html?
If your referencing the like:
<link href="../../Content/Style.css" rel="stylesheet" type=\"text/css\" />
It might not be looking in the correct directory. Try the referencing it as the following:
<link href="/Content/Style.css" rel="stylesheet" type=\"text/css\" />
That way you reference it from the root.
A good way to check is to use the "net" tab within firebug this will show if they are loading and if not what location it is trying to find them.
Link your css and javascript this way (using ResolveClientUrl):
<link href="<%=ResolveClientUrl("/Content/style.css")%>" rel="stylesheet" type="text/css" />
The problem was a simple routing error. My Application was only a simple folder in the iis and not a virtual directory / application. After setting the folder to an application the problem is gone.
I think you can solve it using web.config at the root as suggested here How to host ASP.NET MVC site in a subfolder