Durandal and MVC4 Areas for multiple SPAs

asp.net-mvc-4, asp.net-mvc-areas, durandal, javascript

Solution

You might want to consider your deployment strategy. For example, if you need to optimize this app, both SPAs will end up in the same file. However, instead of having them both under the app folder, you can make separate folders, and give each SPA it's own main.js file.

In more advanced scenarios, you may create a "bootstrapper" app that loads one or another of the SPAs. The bootstrapper would contain code that is common to both SPAs. But each SPA (and the bootstrapper) can be optimized independently.

There are many options. Mainly, consider your final deployment strategy and that will help guide you here.

Also, the issue you have above is probably related to the fact that the standard conventions may not work in your setup, and you would need to override some functions with your own mapping.

Problem

I have a internet application mvc4 with areas, for my organization each area represent a SPA and through "Manage NuGet Package" I installed "Durandal 1.2.0", "Durandal Transitions 1.2.0" and "Durandal Router 1.2.0". I organized the folders and quit the "views" and "viewmodels" from folder "App" of Durandal and put the new views in folder "VIews" of mvc4 area for example: Areas-->NewArea-->Views-->ControllerFolder-->views-->shell.html Then I put the '"viewmodels" in "Script" folder for example: Scripts-->NewArea-->ControllerFolder-->viewmodels-->shell.js Scripts-->NewArea-->ControllerFolder-->main.js Then I changed paths for JS of durandal, for example in main.js: ``` define(['../../../App/durandal/app', '../../../App/durandal/viewLocator', '../../../App/durandal/system', '../../../App/durandal/plugins/router', '../../../App/services/logger'], ``` And I changed main.js in the next line: ``` viewLocator.useConvention('viewmodels', '../Areas/NewArea/Views/ControllerFolder/views'); ``` But that configuration of folders fails because the next line calls various times the module "viewLocator" in its definition and rewrite the configuration of "useConvention" with default value: ``` app.setRoot('viewmodels/shell', 'entrance'); ``` That behavior only happen when the folders "views" and "viewmodels" don't stay under "App" folder of "Durandal". Please help me, how to have various SPAs in the same project?

Original source