New ASP.NET 5 Project from Scratch with Visual Studio 2015 – Part 1

1 Comment

Series Overview

This post is part 1 of a series:
1. New ASP.NET 5 Project from Scratch with Visual Studio 2015 – Part 1 (this one)
2. New ASP.NET 5 Project from Scratch with Visual Studio 2015 – Part 2

In this series, I’m going to document the process of creating a new ASP.NET 5 (MVC 6) project in Visual Studio 2015.

Visual Studio 2015 comes with a few new ASP.NET 5 templates, but in this series I’m going to start with the “Blank” template because it will add less to the project automatically, giving us the opportunity to go through the steps ourselves. I’l start from File > New Project… and, eventually, have all the pieces of a real-world web application.

In this first post, I will create a new empty project and then walk you through all the differences you’ll notice between the new project structure and that of an ASP.NET 4.x project. As others have noted, jumping into an ASP.NET 5 project unprepared may give an experienced ASP.NET developer a strong sense that their cheese has been moved. If you follow through this series, I hope to take a little of the bad surprise out of that learning process.

File > New Project…

The first difference you’ll notice is the option of using either ASP.NET 4.6 or ASP.NET 5 when you create your new ASP.NET project.

2015-07-07 21_20_46-New ASP.NET Project - WebApplication6

New ASP.NET Project Dialog

If you select an ASP.NET 4.6 template, you will experience something a lot like what you’re used to with previous version of ASP.NET. In the ASP.NET 5 section, there are two options–“Web API” and “Web Site”–which will add a lot of dependencies to the new project for you. I’ve selected “Empty” so we can go through all the steps manually together and hopefully understand them better as a result.

After letting Visual Studio create the project for you, you’ll notice several differences in the Solution Explorer from what you may be used to.

2015-07-07 21_32_10-WebApplication6 - Microsoft Visual Studio

Solution Explorer

Here’s a file-by-file overview of what you’re seeing in Solution Explorer, and the purpose of each of those files:

global.json

global.json is added as to the “Solution Items” virtual folder of files that are in the solution, but not in a specific project. It is used to configure the entire solution. By default, it lists the sub-directories that contain code as well as the version of the DNX (.Net Execution Environment) Visual Studio should use to open this solution.

Properties

The properties folder is for holding project properties and settings, pretty much just like it has been in previous versions of .NET.

References folder

2015-07-07 22_45_32-WebApplication6 - Microsoft Visual Studio

This folder displays server-side references to other .NET components used by this project. This hasn’t changed much from previous versions of .NET, but one important difference you will notice is that the References folder now contains two sub-directories: one for the full .NET runtime references (DNX 4.5.1) and one for .NET Core references (DNX Core 5.0).

If you’d like to know more about .NET Core, read this great blog post introducing the concept on MSDN.

src folder

Code projects and files are placed in a src folder to make it easier to exclude other files in sibling folders from source control (such as files generated by your build process).

wwwroot folder

The main project includes a wwwroot folder. This folder is meant to be the root of you web site and to hold just the files your web server will be allowed to serve. In previous versions of ASP.NET, private files (such as .cshtml and .config files) were mixed in with public files and had to be explicitly blocked from being served. Now these sensitive files will be in a different directory, keeping things more secure.

Dependencies folder

This folder holds client-side dependencies. The files beneath this folder are managed automatically using client-side package managers such as Bower and NPM. We’ll go into more details with this later in the series.

project.json

The project.json file is the new way to configure an ASP.NET project. This includes several project-level settings as well as server-side dependencies in the “dependencies” section. These are the same dependencies that appear under the References folder described above. You can also specify the root public folder for the web server using the “webroot” setting. The “frameworks” section specifies the DNX version just like the solution’s global.json file does. The “commands” section is for configuring what the specified command-line commands do. And finally, Both “publishExclude” and “exclude” are used to exclude files or directories from either the packaging process or the build process, respectively.

Project_Readme.html

The Project_Readme.html links you to a lot of great getting-started information about your new ASP.NET project. After you’ve reviewed the information, this file can be deleted.

Startup.cs

You can think of Startup.cs as the new Global.asax. It’s the place were you’ll run your server-side code to bootstrap and configure your application. It’s actually the direct descendant of the OWIN Startup.cs file you may have seen in some more recent ASP.NET project templates. We’ll focus a lot more on this in my next post in this series when we look at adding MVC to this ASP.NET project.

So, What’s Next in the Series?

In my next post in this series, I’ll add the components we’ll need to get MVC 6 working in our new project. Then, in future posts, I’ll add server-side dependencies using NuGet, add client-side components with Bower, and also show you how to run client-side tasks with grunt.

Stay tuned, it should be fun!