How to Keep Ace from Looking for Themes and Modes in Current Directory?

Question

I've been working on an MVC web application that uses the Ace in-browser code editor provided by Cloud9. The ace.js script and a script that sets up ace's editor are both in a ScriptBundle together on my BundleConfig. The bundle is being loaded perfectly fine. On my local server, with debug set to true in the web.config, the script worked perfectly fine. However, after launching to a live server with debug set to false in the web.config, several errors appeared.

After fixing a few minor glitches, there remain two errors that I can't seem to understand the cause of. These two errors seem very similar, as they are both 404 not found errors for Ace's chrome theme and Ace's HTML mode scripts. In the script that sets up the editor, they are called as follows:

editor.setTheme("ace/theme/chrome");
editor.getSession().setMode("ace/mode/html");

On my local computer, with debugging set to true, the theme and the mode are set perfectly fine, and everything works as planned. However, as I've said, on a live server with debugging set to false, therefore minifying all of the scripts in my ScriptBundles, I get a 404 error for both the theme and the mode.

When I pull up the JavaScript Console in Google Chrome, I am told of the two 404 errors. The funny thing about the 404 errors, is that they are linking to the current directory of the page I'm viewing, then followed by "theme-chrome.js" and "mode-html.js" respectively. They were never in that directory, and still aren't.

So my question is why do the scripts begin to look in the current directory for their files after being minified? What can I do to fix this issue so that I can keep them minified, in bundles, and have them work? Or is there a way?

Thank you for your help ahead of time.

Answer 1

I find with Ace and MVC Bundling and Minification, I need to set the basePath in the ace configuration using an absolute reference.

ace.config.set("basePath", "/Scripts/FullPathToMy/AceEditorDirectory");

It's probably not the best solution, but it should get you on your way.

Answer 2

The reason why Ace doesn't resolve the base path when you minify is because the minified version is a new unique name that does not match this pattern: ^(.*)\/ace(\-\w+)?\.js(\?|$)/. Ace uses that pattern to find the script element that created it, and uses the src attribute to determine the path.

@Paul's answer is the best, but if for some reason you can't do it that way, Ace also checks for options in attributes that begin with data-ace- that a part of any script tag.

In System.Web.Optimization v 1.10 you can use Scripts.RenderFormat(format, script) to render the script tag to specify the base path.

NOTE: In other Stack Overflow answers they say to use Microsoft.AspNet.Web.Optimization, but this is no longer the case. You may have to use nuget to update your version.

MVC version

@Scripts.RenderFormat(@"<script src=""{0}"" data-ace-base=""/Scripts/ace/""></script>", "~/bundlepath")

Web Forms version

<%: Scripts.RenderFormat(@"<script src=""{0}"" data-ace-base=""/Scripts/ace/""></script>", "~/bundlepath") %>