I have problem to run my asp mvc application with requirejs. Below I have tried to give summary of all the configuration that I have defined in my application like file structure, module path, etc. This works well when app is hosted as a parent website in IIS but fails to load modules when hosted in a virtual directory.

The file structure of my web application is:

• Web/
  • Scripts/
    • app/ (this is where my app's js files goes)
      • mon.js (all mon js code to all views goes here)
      • navigation.js
      • views/
        • account/
        • login.js
    • vendor/ (this has all the vendor specific js files)
      • jquery.js
      • domReady.js
    • main.js (requirejs config file)

Below is the code for:

Master Layout file that is used by all views:

This script reference goes in the header part:

<script src="@Url.Content("~/Scripts/Vendor/require.js")"></script>
<script data src="@Url.Content("~/Scripts/main.js")"></script>

main.js - configuration file: As you can see below, the baseurl is set with respect to main.js config file.

require.config({
    baseUrl: "../scripts",
    paths: {
        "mon": "app/mon",
        "jquery": "vendor/jquery-1.11.0",
        "domReady": "vendor/domReady-2.0.1",
        "sammy": "vendor/sammy-0.7.4",
        "jqueryui": "vendor/jquery-ui-1.10.4.min",
        "jquery.validate": "vendor/jquery.validate",
        "jquery.validate.unobtrusive": "vendor/jquery.validate.unobtrusive",
        "jquery.cookie": "vendor/jquery.cookie",
        "bootstrap": "vendor/bootstrap.min"
    },
    shim: {
        'sammy': ['jquery'],
        "jqueryui": {
            exports: "$",
            deps: ['jquery']
        },
        "jquery.validate": {
            deps: ['jquery']
        },
        "jquery.validate.unobtrusive": {
            deps: ['jquery', 'jquery.validate']
        },
        "jquery.cookie": {
            deps: ['jquery']
        },
        "bootstrap": {
            deps: ['jquery']
        }
    }
});

I'm trying to create view specific js code in its own separate file. You can see this in the file structure above where login.js is for the login.cshtml which then uses the master layout file. So, to load login.js, I use this in the view:

<script>
    require(["@Url.Content("~/Scripts/app/views/account/login.js")"], function() {});
</script>

The code in the login.js is below: this has its login view specific code and it also loads the code written in mon.js file.

 define(["mon"],function ($) {
    // use [data-shell-spinner="generic"] on element to use it as a spinner.
    console.log("login view");
});

Based on above configuration, when this web application is hosted on local IIS as a parent directory, everything works fine.

I am not able to understand why I get the following error when the same app is hosted in a virtual directory on local IIS. I know this happens when the above login.cshtml is rendered:

GET http://localhost: 1045/scripts/app/mon.js 404 (Not Found)
Uncaught Error: Script error for: mon

All the same source files of this application resides in vd virtual directory which resides under parent application. There are no issues with routing, loading other css, js, images that are used in the app.

But how can I make sure that all the path that I have defined in main.js config file and loading view specific files work as expected even if the application is hosted in a virtual directory?

I have problem to run my asp mvc application with requirejs. Below I have tried to give summary of all the configuration that I have defined in my application like file structure, module path, etc. This works well when app is hosted as a parent website in IIS but fails to load modules when hosted in a virtual directory.

The file structure of my web application is:

• Web/
  • Scripts/
    • app/ (this is where my app's js files goes)
      • mon.js (all mon js code to all views goes here)
      • navigation.js
      • views/
        • account/
        • login.js
    • vendor/ (this has all the vendor specific js files)
      • jquery.js
      • domReady.js
    • main.js (requirejs config file)

Below is the code for:

Master Layout file that is used by all views:

This script reference goes in the header part:

<script src="@Url.Content("~/Scripts/Vendor/require.js")"></script>
<script data src="@Url.Content("~/Scripts/main.js")"></script>

main.js - configuration file: As you can see below, the baseurl is set with respect to main.js config file.

require.config({
    baseUrl: "../scripts",
    paths: {
        "mon": "app/mon",
        "jquery": "vendor/jquery-1.11.0",
        "domReady": "vendor/domReady-2.0.1",
        "sammy": "vendor/sammy-0.7.4",
        "jqueryui": "vendor/jquery-ui-1.10.4.min",
        "jquery.validate": "vendor/jquery.validate",
        "jquery.validate.unobtrusive": "vendor/jquery.validate.unobtrusive",
        "jquery.cookie": "vendor/jquery.cookie",
        "bootstrap": "vendor/bootstrap.min"
    },
    shim: {
        'sammy': ['jquery'],
        "jqueryui": {
            exports: "$",
            deps: ['jquery']
        },
        "jquery.validate": {
            deps: ['jquery']
        },
        "jquery.validate.unobtrusive": {
            deps: ['jquery', 'jquery.validate']
        },
        "jquery.cookie": {
            deps: ['jquery']
        },
        "bootstrap": {
            deps: ['jquery']
        }
    }
});

I'm trying to create view specific js code in its own separate file. You can see this in the file structure above where login.js is for the login.cshtml which then uses the master layout file. So, to load login.js, I use this in the view:

<script>
    require(["@Url.Content("~/Scripts/app/views/account/login.js")"], function() {});
</script>

The code in the login.js is below: this has its login view specific code and it also loads the code written in mon.js file.

 define(["mon"],function ($) {
    // use [data-shell-spinner="generic"] on element to use it as a spinner.
    console.log("login view");
});

Based on above configuration, when this web application is hosted on local IIS as a parent directory, everything works fine.

I am not able to understand why I get the following error when the same app is hosted in a virtual directory on local IIS. I know this happens when the above login.cshtml is rendered:

GET http://localhost: 1045/scripts/app/mon.js 404 (Not Found)
Uncaught Error: Script error for: mon

All the same source files of this application resides in vd virtual directory which resides under parent application. There are no issues with routing, loading other css, js, images that are used in the app.

But how can I make sure that all the path that I have defined in main.js config file and loading view specific files work as expected even if the application is hosted in a virtual directory?

• javascript
• asp-mvc
• iis
• requirejs

2 Answers 2

Try adding this into the <head> of your Master Layout page:

<base href="@(Request.ApplicationPath == "/" ? "/" : Request.ApplicationPath + "/")">

This should make all the scripts load relative to the base path, which should correctly resolve to your virtual directory (or the website root if you're not using a virtual directory).

You can read more about the base tag, here.

Using the base tag, as suggested by gerrod, works well. However, it will break hash tag anchors. Instead, I suggest configuring require with a baseUrl equal to your application path directly.

<script>
    var appPath = @Url.Content("~/");

    require.config({
        baseUrl: appPath
    });
</script>