ASP.NET MVC framework 4.5 CSS bundle does not work on the hosting

Question

I am runing an App on app harbor written in MVC4.

A bundle of css files doesn't work. In my local computer in debug mode I see the code of the App and I see the files. The App works as expected.

<link href="/Content/css/home/basic-jquery-slider.css" rel="stylesheet"/>
<link href="/Content/css/home/Home.css" rel="stylesheet"/>

When I upload the app to Appharbor I see the bundle in the code but the App doesn't work.

<link href="/Content/css/home?v=zhVOIpUNuvCOZhJyBcQWpMlozayor4te6k-pM29wHqI1" rel="stylesheet"/>

When I browse that link in the href I get 403 - Forbidden: Access is denied.

How to troubleshoot this?

Manicotti

Not sure if you resolved this issue but this article fixed mine. https://mcmap.net/q/130812/-mvc-bundeling-err-403 – Amazon

Answer 1

My guess is that the path Content/css exists on disk in your app. In this case IIS would be handling the request, not MVC.

Make sure that the virtual path for the bundle (the parameter of the StyleBundle constructor) doesn't match a folder in the file system.

From the comments:

"A good convention to follow when creating bundles is to include "bundle" as a prefix in the bundle name. This will prevent a possible routing conflict."

Timmons

thanks. Is it normal that it works when in run in the localhost? – Manicotti

@RicardoPolo, by "localhost", do you mean while running it on iis express on your development machine? Then yes, it's normal that it works there because you're most likely running in debug mode, which disables bundling. – Dumas

Paul, I can't thank you enough for that solution! I was pulling my hair out for an hour trying to figure out what I had wrong! – Mizzenmast

+1 This answer help me understanding how the virtual paths works with bundling. I read the original post on msdn (asp.net/mvc/tutorials/mvc-4/bundling-and-minification) but after solving my problem with your answer, I found at the end of the post a bit of text talking about virtual path: "A good convention to follow when creating bundles is to include "bundle" as a prefix in the bundle name. This will prevent a possible routing conflict.". I think this sentence SHOULD have been put in bold with a red/yellow warning image. :D Thank you! – Elohim

I found this thread awhile back, and so, made my bundle paths completely different from my file paths, everything has worked in test, but when the bundles actually kicked in, all of the relative paths embedded within the css fell apart, and started producing 404 errors. As SO questions are supposed to be specific enough to solve a particular problem, I think it is also worth mentioning in comments that the information above must take into account other answers like: #20484688 if your css uses URL Paths. – Versieversification

I have same issue but there is no "Content/css" exists on disk in my app , and it is also working on local . see this #48983512 – Confound

Answer 2

This issue is by default .NET does not "process" requests that have a .js or .css extension.

There are two fixes for this (you only need to do ONE)

A) Remove the extensions from the bundle names. (recommended) This will cause .NET to process the request and run it through the BundleModule.

B) Add this to your web.config in the system.webServer section which will cause .NET to run .js and .css requests through the BundleModule.

<modules runAllManagedModulesForAllRequests="true">
  <remove name="BundleModule" />
  <add name="BundleModule" type="System.Web.Optimization.BundleModule" />
</modules>

Big shout out to Ray Moro who figured out the actual cause and shared it with me on my blog: http://blog.cdeutsch.com/2012/11/fixing-404-errors-for-aspnet-mvc-apps.html

Philis

Updated with more information on the root cause along with a second option. – Philis

I was having this problem because my bundle's name was a folder-like name ending in "css". Though my bundle didn't exactly had a file extenssion, suggestion A lead me to the problem. – Facilitate

This should be correct answer, it helps me with same problem. – Teteak

great answer it help me – Middelburg

This thing with the missing <module> section from web.config oh man ... – Shantelleshantha

Answer 3

Happened with me too, when I tried deploying my ASP.NET MVC app on AppHarbor.

I had a stylesheet bundle with the name

@Styles.Render("~/Content/bootstrap")

and the folder structure was

-- Content

-- Content \ Bootstrap \ ...

By just changing the bundle name to "~/Content/bootstrap-css" my issue got resovled.

Brynne

Answer 4

I know I'm 4 years late to this question but this worked for me.

public static void RegisterBundles(BundleCollection bundles)
{
   ...

   BundleTable.EnableOptimizations = true;     // Added this           
}

Amative

Of all the answers above and below. This is the only one that worked for me. – Wonderland

This enables optimizations when you're in debug mode. While this is a great way to check if bundles work on a dev machine, you shouldn't leave this statement in your code. – Hemocyte

Answer 5

403 error solved. here is a detailed explanation and solution for 403 error.
The solution is demonstrated for CSS bundle. However it also applies to JavaScript.

http://www.mvccentral.net/Story/Details/articles/kahanu/stylebundle-403-error-solved

In a nutshell, make sure that the virtual path [Script | Style]Bundle("~/content/[script | css]") doesn't match a folder in the file system (e.g. C:\approot\Content\[script | css]) instead [Script | Style]Bundle("~/content/[scriptDiff | cssDiff]")

Minny

Thanks, this is the problem that I experienced. To solve it, in BundleConfig.cs I changed the path from @Styles.Render("~/Content/css") to @Styles.Render("~/bundles/css"). Now it works when running locally in debug mode and when published in release or debug mode. – Sulfamerazine

Nice reply, but you shouldn't leave only a link, at least the basic steps of this write-up would be great to have here, in case the linked website is down. – Epicureanism

Answer 6

I solved the issue by adding below line of code at BundleConfig class

BundleTable.EnableOptimizations = false;

Loads

Answer 7

What I do is very simple,

I add "js" at the end of ScriptBundle like so: new ScriptBundle("~/bundles/appjs") And I add "css" at the end of StyleBundle like so: new StyleBundle("~/content/appcss")

My folder names never end with "js" or "css".

That should do it.

Dairy

Answer 8

This applies to the 'ScriptBundle class' too, ensure that the 'parameter name' to the constructor does not match a path in web application file system. Remember that IIS will try to serve up the file/request.

Parasitology

Answer 9

The problem can also come from the file being encrypted. This occurred to me when I downloaded BootStrap and used the supplied files. They showed green in Windows explorer and worked fine in Visual Studio, but when deployed, I got a 403 error.

You can see if they are encrypted by going to properties, then advanced properties and there is an encypted checkbox.

Uncheck and it will no longer be a problem.

Misguidance

Answer 10

I have the same problem with that (403 Forbidden) error. In my case the reason is proxy server in my organization blocks my css file. Css file name matches one of block rules.

Perfectible

Answer 11

I found out the file bootstrap.css wasn't in the content folder, so I looked for it in the packages and pasted there.. it worked!

Azar