# IT:AD:Durandal.JS:HowTo:First Pages #
* [[../|(UP)]]
{{indexmenu>.#2|nsort tsort}}
## Process ##
### Index.html
Once Durandal is installed ( [[IT/AD/Durandal.JS/HowTo/Install]]), create a start page.
It can be any html or ASP.NET cshtml page -- eg: index.cshtml -- containing the basics:
* Notice:
* The `applicationHost` div is the container within which your app's views will live
* The script tag's `data-main` pulls in `App/main.js`
### Main.js
define(function(require) {
var app = require('durandal/app');
var viewLocator = require('durandal/viewLocator');
var system = require('durandal/system');
var router = require('durandal/plugins/router');
system.debug(true);
app.start().then(function () {
viewLocator.useConvention();
router.useConvention();
router.mapNav('welcome');
router.mapNav('flickr');
app.adaptToDevice();
//Set the Root view:
app.setRoot('viewmodels/shell', 'entrance');
});
});
* (Optionally turn on debugging).
* Call app.start().
* Configure your app-specific conventions (and optionally routing too).
* Configure 3rd party libraries.
* Set your application's root to the `shell module` -- which is the `shell.js` paired with a `shell.html`
### Shell Module
`app/viewmodels/shell.js` contains:
define(function(require) {
var router = require('durandal/plugins/router');
return {
router: router,
activate: function () {
return router.activate('welcome');
}
};
});
and is matched by
`app/views/shell.html`