The Empty template isn't as empty as you might think. The project template is not empty, instead it contains the minimal content required to make it an MVC project. There are no scripts or content and the Models, Controllers, and App_Data folders are empty.

The Basic template is essentially the new version of the MVC 3 Empty template. This template adds the Content and Scripts folder to the Empty template and includes additional assembly references that are required for some of the new features of MVC 4.

This template will be the template from which most sites will be created. This template includes everything present in the Basic template but adds an Account and Home controller to the structure to enable authentication against the traditional ASP.NET SQL Server Membership structure and, new to MVC 4, third-party authentication providers such as Microsoft, Google, and Facebook through the DotNetOpenAuth library.

The Intranet Application template is a variation of the Internet Application template. It has been altered to support Windows authentication as the authentication mechanism.

If you are sure that almost all of your traffic will be from mobile devices, you will want to create your application from the Mobile Application template. This template adds support for jQuery Mobile to the Internet Application but removes the DotNetOpenAuth library support in favor of traditional forms authentication.

New to ASP.NET MVC 4 is the Web API. The Web API provides an easy way to develop RESTful HTTP services and APIs that understand XML and JSON content types. This project template provides the base for constructing new services utilizing the Web API.

We will create our sample application from the Internet template. We do this for a couple of reasons. First, most of the applications that we implement and support on a day-to-day basis require us to target both desktop browsers as well as mobile browsers. Second, by developing from the Internet template, we can learn more about what is necessary to support the mobile web from the perspective of ASP.NET MVC 4 as well as a general application development perspective.

Select Internet Application from the template options and click on the button labeled OK.

Congratulations! You have just created your first ASP.NET MVC 4 project.

If you are unfamiliar with NuGet, NuGet is a .NET platform package management system. Its goal is to simplify the management of third-party libraries, tools, and scripts within .NET projects. It is now a first-class member of Visual Studio 2012 and the MVC project templates.

If you examine the project we just created, you will notice there is a packages.config file at the bottom of the solution.

This file is a NuGet package list and contains a list of all the external dependencies to the project. For the Internet Application template, the file includes references to DotNetOpenAuth, Entity Framework, jQuery, knockoutjs, non-core Microsoft libraries, Modernizr, Netwonsoft's JSON library, and WebGrease.

In prior versions of MVC, all of the application bootstrap code was located in the Global.asax code-behind. New in MVC 4, you will notice that the class within the Global.asax file contains only a single method named Application_Start. Have a look at the following piece of code:

protected void Application_Start()
{
  AreaRegistration.RegisterAllAreas();
  WebApiConfig.Register(GlobalConfiguration.Configuration);
  FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
  RouteConfig.RegisterRoutes(RouteTable.Routes);
  BundleConfig.RegisterBundles(BundleTable.Bundles);
  AuthConfig.RegisterAuth();
}

This method invokes several other classes with which you may be unfamiliar. While it is true that some new functionality regarding bundling and the Web API are reflected in the class names, these names also identify the functionality that has been present in prior versions such as area registration and routing. These new classes encapsulate the traditional configuration information you might expect to see here and the classes exist in the project's App_Start folder.

This new organization of code provides for better separation of functionality and makes the Global.asax code-behind a lot easier to read and digest.

Now that we've seen some of the structural changes that have taken place inside the new MVC 4 project templates, let's examine how the output of the new project templates looks by launching the project from within Visual Studio 2012.

Responsive design means an app has been designed to attempt to present itself properly within any browser window and to continually respond to changes in the size of the browser window or in the content that the page, itself, is displaying.

Notice how the content of the browser window has reorganized itself to work within a smaller browser window. All of the content is still logically grouped and is available to the user and there is no horizontal scroll bar present indicating that while the content may have collapsed it still will display within the window.

This compressed view does allow you to get an idea of how the site will appear on a mobile device, but if you really want to know how it will look, then you should view the app in an emulator.

It would be pretty useful for us to launch our app from within Visual Studio 2012 and have an emulator, or multiple emulators, open up the landing page. Fortunately for us, Visual Studio 2012 supports the simultaneous launching of multiple browsers when attempting to run or debug an app.

To configure Visual Studio to launch multiple browsers simultaneously, we first need to add an empty HTML page to our solution. The empty HTML page will add no functionality and exists only to gain us access to the context menu that will allow us to set the default browser/browsers for our app.

To add a new HTML page file to the project, right-click on the BrewHow project to bring up the project context menu. From the menu, select Add and then select HTML Page.

You will be presented with a dialog box asking you to specify a name for the item. Name the file anything you'd like (the sample project filename is browser.html) and then click on the button labeled OK.

Right-click on the HTML page you just added to the project and select Browse With… from the context menu.

This will bring up the Visual Studio 2012 Browse With dialog box. This dialog box allows us to set the default browser with which we will view our app when launching it from within Visual Studio.

We are going to use Google Chrome and the Opera Mobile emulator as our default browsers for the BrewHow project.

Since Opera Mobile isn't a browser that's typically registered with Visual Studio, we first need to tell Visual Studio where it can be found. Click on the Add… button on the Browse With dialog box to begin registering the browser.

Assuming you have installed the Opera Mobile emulator in the default location, enter the following values into the dialog box to register an emulator for Opera Mobile running on a Samsung Galaxy S II and then click on OK.

You should now see Opera Mobile displayed in the Browse With dialog box.

Hold down the Ctrl key, click on both Google Chrome and Opera Mobile, click on the button labeled Set as Default and then close the dialog box.

If you were successful, you should notice that the text beside the Start Debugging button in Visual Studio now says Multiple Browsers.

Press Ctrl + F5 to launch the app without debugging and Visual Studio will open the BrewHow app in both Chrome and the Opera Mobile emulator.