ASP.MVC Bundles - how to define them correctly? - asp.net

I have something like this:
bundles.Add(new StyleBundle("~/Content/Styles/Default/Forums").Include("~/Content/Styles/Default/Forums/Main.css",
"~/Content/Styles/Default/Forums/Slider.css"));
Now, when i release my application and run it, it creates a link like this:
<link href="/Content/Styles/Default/Forums?v=8vn0bgRpB8BncmaT_onrpNlXa4t9ydK6_Fep81xhhm01" rel="stylesheet"/>
Which refers to my site directory, and access to that is disabled. But ASP doesn't let me specify files outside of the application, then how can I do it properly?

The virtual path in the StyleBundle constructor doesn't have to match an existing path in your application:
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/Styles/Default/Forums/Main.css",
"~/Content/Styles/Default/Forums/Slider.css"));
If you want to use external files, you can use the CDN path on the bundle (you need to set the UseCDN property to true):
bundles.UseCdn = true;
bundles.Add(new StyleBundle("~/Content/css", "<CDN Path>").Include(
"<CDN Path>/Main.css",
"<CDN Path>/Slider.css"));

Related

ASP.Net bundling causing HTTPS error

Why am I getting the following error when the debug flag in the web.config is set to true?
Mixed Content: The page at 'https://example.com/' was loaded over
HTTPS, but requested an insecure script
'http://example.com/scripts/base/?v=JeAlpXPCZh9gYv4U-X7_HSaAX3Fj3sGBjwukxEaloQU1'.
Bundle
bundles.Add(new ScriptBundle("~/scripts/base").Include(
"~/Scripts/Base/app.module.js",
"~/Scripts/Home/home.controller.js",
"~/Scripts/Home/about.controller.js",
"~/Scripts/App/Common/dictionary.class.js",
"~/Scripts/App/Common/constants.class.js",
"~/Scripts/App/Common/multiselect.directive.js",
"~/Scripts/App/Common/paginationOptions.class.js",
"~/Scripts/App/Common/gridHeight.directive.js",
"~/Scripts/App/Common/utility.service.js",
"~/Scripts/App/Common/dateToString.directive.js",
"~/Scripts/App/Common/base.controller.js",
"~/Scripts/App/Common/messagePopover.controller.js"
));
Generated HTML
<script src="/scripts/base?v=JeAlpXPCZh9gYv4U-X7_HSaAX3Fj3sGBjwukxEaloQU1"></script>
I had a similar issue this morning. I found that the virtual path I had set was the same as the folder structure containing the scripts, once I had renamed the virtual folder path, the script bundle was then being requested over https.
Try changing the script bundle virtual path to;
bundles.Add(new ScriptBundle("~/scripts/applicationBase").Include(
"~/Scripts/Base/app.module.js",
....,
....
));
Hope that helps

Sass SCSS by BundleTranslator

I have set up the BundleTranslator in my MVC 5 project via NuGet (BundleTransformer.SassAndScss v1.9.96 with the Core and LibSassHost components). Next I have added the bundle reference to my View.cshtml
#Styles.Render("~/Content/sass")
and redefined the BundleConfig.cs:
var nullOrderer = new NullOrderer();
var commonStylesBundle = new CustomStyleBundle("~/Content/sass");
commonStylesBundle.Include("~/Content/Custom/the-style.scss");
commonStylesBundle.Orderer = nullOrderer;
bundles.Add(commonStylesBundle);
After build, the website has a .scss reference:
<link href="/Content/Custom/the-style.scss" rel="stylesheet">
and everything is working locally probably only because I have installed SassAndCoffee package with SassyStudio. The problem emerges when I deploy on external IIS server. The file exists in the Content/Custom directory, but the website is broken. The HTML code also has the file reference (it links to .scss file, not compiled .css) but if I try to navigate to it, I get error 500.
I have changed the Sass file Build Action to Content (from None) and left Copy to Output Directory as Do not copy. I have also added httpHandlers to Web.config (but I actually don't know whatfor) but still nothing helps.
<httpHandlers>
<add path="*.sass" verb="GET" type="BundleTransformer.SassAndScss.HttpHandlers.SassAndScssAssetHandler, BundleTransformer.SassAndScss" />
<add path="*.scss" verb="GET" type="BundleTransformer.SassAndScss.HttpHandlers.SassAndScssAssetHandler, BundleTransformer.SassAndScss" />
</httpHandlers>
I didn't check all of the settings in Web.config because of the NuGet installation which (as I see) provides this kind of data for the BundleTransformer.
How do I configure the BundleTransformer to work correctly on IIS? Do I have to override the BundleResolver as in example code?
BundleResolver.Current = new CustomBundleResolver();
There are a few things to try to diagnose the problem. Firstly it works locally! :)
1.
It is worth testing that your bundling works correctly. You can do this by temporarily setting the following (take this out once you have finished).
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
BundleTable.EnableOptimizations = true;
// Bundles and stuff...
}
}
Run the site and then in your browser dev tools you should get something like this:
/bundles/commonStyles?v=BzJZwKfP1XV8a6CotGRsHhbxraPDst9zDL2X4r36Y301
If this works then we can be happy bundling will work in production.
2.
Permissions. If your getting a 500 internal server error, check the permissions on the folder that contains the scss files. Also check they are there :)
3.
Mime type. There may be a slight chance that IIS needs a mime type added for .scss, but I'm not convinced it will.

scripts being minified in debug mode when not included in #Scripts.Render

on an ASP.NET website we have BundleConfig.cs set to minify and concatenate scripts when in Release mode but not when in Debug mode.
In debug mode I have the following sestup
in web.config file.
Then in Proj/App_Start/BundleConfig.cs
the last line is
#if DEBUG
BundleTable.EnableOptimizations = false;
#else
BundleTable.EnableOptimizations = true;
#endif
In debug mode the scripts are unminified, so we can debug them, but only when
using #Scripts.Render in the .cshtml page.
However there are some particular parts of the web application where we load script dynamically for small segments of functionality.
using jQuery.getScript we call the name of the bundle.
For some reason this script is still minified and all debugger; breakpoints are striped out. Why is this?
The only way around this is to do the following.
#if DEBUG
// Iterate over each bundle () *not needed if compilation debug="true"
foreach (var bundle in bundles)
{
// And strip out any transformations (minify)
bundle.Transforms.Clear();
}
#endif
this seems unnecessary and I don't know why this doesn't work without this.

Rails-api cant find my css files in public folder

I am running rails api with angularJS. my root is set to : root :to => "main#Home"
and MainController is defined as :
class MainController < ApplicationController
def Home
render :file => "public/angular/app/index.html"
end
end
in html file i link to css and some js files, and those files is in public directory. I want to avoid using rails app/assets folder since rails will only be used as API, so all the templates will be loaded by angular, i just need a way to load index page with all the styling and js.
What have i done wrong?
Edit:
One of the errors :
ActionController::RoutingError (No route matches [GET] "/bower_components/angular-route/angular-route.js"):

Bundles arent unpacking only on one server

Have a little problem with bundles on site.There are source code of creating and including bundles
bundles.Add(new StyleBundle("~/Content/Administration").Include("~/Content/Administration.css"));
And on View
#Styles.Render("~/Content/Administration")
so on test server all OK,but on main(production),my bundle hadnt been loaded.What i can do with this bug?
I use
BundleTable.EnableOptimizations = false;
to debug css on test server,and find error after minification/now all ok

Resources