Publishing app in Azure from Visual Studio 2015 doesn't load .CSS

Question

I got this problem when publishing my app from Visual Studio 2015 in Azure; it looked like this:

Apparently It didn't load .css files properly (and who knows what else).

I did a lot of investigation but contrary to what I expected, It was very difficult to find the source of the problem, yet in some lost forum I found out that web.config gets Its property changed when being published, my local web.config looks like this:

<system.web>
<authentication mode="None" />
<compilation debug="true" targetFramework="4.5.2" />
<httpRuntime targetFramework="4.5.2" />
<httpModules>
  <add name="ApplicationInsightsWebTracking" type="Microsoft.ApplicationInsights.Web.ApplicationInsightsHttpModule, Microsoft.AI.Web" />
</httpModules>

My remote web.config like this:

<system.web>
<authentication mode="None" />
<compilation targetFramework="4.5.2" />
<httpRuntime targetFramework="4.5.2" />
<httpModules>
  <add name="ApplicationInsightsWebTracking" type="Microsoft.ApplicationInsights.Web.ApplicationInsightsHttpModule, Microsoft.AI.Web" />
</httpModules>

When I added the debug="true" in compilation it worked properly:

I want to leave this here for helping anyone else having this same problem, and by the way my questions:

1- Why disabling debug affects how .css files (and maybe other files) are loaded?

2- Is there another way to correct this without allowing debug on my remote server?

3- Perhaps there is another workaround with this that I missed in my search for help, if anyone has experienced this before please share your knowledge.

One could expect this would be very common, after all I was only publishing an app in azure xD
It may be important to mention that my app also works with a Data Base, i will now try to learn how to implement that on azure xD

Thanks!

Edit: BundleConfig.cs

using System.Web;
using System.Web.Optimization;

namespace Distribuidora_Saturno
{
    public class BundleConfig
    {
        // Para obtener más información sobre Bundles, visite http://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            // Utilice la versión de desarrollo de Modernizr para desarrollar y obtener información. De este modo, estará
            // preparado para la producción y podrá utilizar la herramienta de compilación disponible en http://modernizr.com para seleccionar solo las pruebas que necesite.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js"));

            bundles.Add(new StyleBundle("~/Content/CSS").Include(
                      "~/Content/CSS/bootstrap.css",
                      "~/Content/CSS/site.css"));
        }
    }
}

Can you share the actual URL of your application? It seems bundling is messing up your CSS paths. Normally this happens with icons (http://stackoverflow.com/questions/19664287/bootstrap-icons-are-loaded-locally-but-not-when-online) but it may be worth looking at the actual response to a page load on your actual website. — Gaurav Mantri, May 10 '16 at 17:55
Sure you can access through http://distribuidorasaturno.azurewebsites.net/ As I said, It is working now, but only after enabling debugging in remote server, and I don't know why! — Alvaro Rodriguez Scelza, May 13 '16 at 11:09
Yes, I can publish my page with debugging disabled but It shows up without loading css, as the first image shows. Bear in mind that this happens on both remote an local PCs, you know why would debugging affect how css is loaded? — Alvaro Rodriguez Scelza, May 13 '16 at 12:49
Basically when you turn debugging on, the CSS and JS bundling comes into place. My suspicion is that there's something funky going on with your bundling that is preventing CSS to load properly. That's why I wanted you to publish without debugging turned on. — Gaurav Mantri, May 13 '16 at 12:53
Ok, I've published It without debugging http://distribuidorasaturno.azurewebsites.net/ — Alvaro Rodriguez Scelza, May 14 '16 at 01:28

score 3 · Accepted Answer · edited May 23 '17 at 11:52

I think I know what's happening. So I accessed your website and monitored request/response in Chrome developer tool and for your CSS bundle I noticed that IIS is responding with a 403 error.

Just out of curiosity, I accessed the bundled link and this is what I got:

So I searched around for 403 error on bundled file and ran into this thread: ASP.NET MVC framework 4.5 CSS bundles does not work on the hosting and what it suggests is to change the name of your bundle as it conflicts with a physical path on your server.

Can you try by changing your bundle name? Try something like:

        bundles.Add(new StyleBundle("~/CSSBundle").Include(
                  "~/Content/CSS/bootstrap.css",
                  "~/Content/CSS/site.css"));

and then change the path in your view page from /Content/CSS to /CSSBundle.

This should fix the problem.

It worked!! Thank you so very much! It's a pitty Microsoft's own template for Bundle doesn't work properly, but anyway xD — Alvaro Rodriguez Scelza, May 14 '16 at 15:19

score 1 · Answer 2 · answered May 10 '16 at 14:40

1

I think you should look for your BundleConfig.cs class. It could break things when gets published after recent changes. Post your BundleConfig.cs file where your are adding stylebundles.

answered May 10 '16 at 14:40

ritesh

13
2

Actually I think I've never modified it :O It's ASP.NET MVC5 template, I'll edit my answer to post it. – Alvaro Rodriguez Scelza May 10 '16 at 14:51

Publishing app in Azure from Visual Studio 2015 doesn't load .CSS

2 Answers2