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?

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."

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

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.

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           
}

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]")

Answer 6

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

BundleTable.EnableOptimizations = false;

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.

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.

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.

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.

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!