ASP.MVC 6 Features - wwwroot folder

Whenever we web develop applications in .NET framework the root directory of the website has always been the directory where our project is located. All our C# source files, html pages, js files, aspx pages, cshtml files all reside under this root. The file system based approach has got many disadvantages especially when it comes to protecting sensitive project resources. Normally people used black listing to lock out access to files such as Global.asax and web.config being served to the clients as response and this was being done at framework level. It is always advisable to use whitelisting technique rather than using a blacklisting method from a security perspective.

Also we will have different version of the same file say web.config for developement , testing, staging and production. And coming to scripts files we normally use the readable version of the files during development, but when it goes to the production we deploys only the minified version of it. Handling of these scenarios were getting difficult with each version and that's how the structure was devised for web projects in MVC 6

By default the wwwroot folder will act as the root for your website and all the static files such as images, scripts, styles will reside in this folder. And the sensitive files like project.json, appsettings.json etc are not under wwwroot folder and will never be accessible if our site is compromised. Thus instead of blacklisting, we are giving access only to those files which are accessible.

Given below is the new structure for an MVC project in MVC 6. You can see that all the controllers , model, repository etc are residing outside of the wwwroot folder and also it has got a nice icon to distingush it from other folders too. The wwwroot folder brings in a clear seggregation between code files and static files. All the files inside the wwwroot folder can be sent to the client in response for the requests from server whereas all the things outside of remains in the dev machine.

So all our css, images and js file are under the wwwroot folder and our Views folder is residing in the root of the project. So whenever to want to access the styles or images in your views, you can use the ~ operator to to get the direct path to wwwroot folder like the sample given below

<link rel="stylesheet" href="~/css/custom.css" />

Eventhough wwwroot is root folder by default, you can change it to any other folder using configuration options in the project.json file

Use the webroot key in the projects.json file to specify the new location for the root folder as shown above.