Working With SPA Template in Visual Studio 2013 RC

Introduction

This article introduces ASP.NET Web Applications using the Single Page Application project template newly defined in the Visual Studio 2013 Release Candidate version. In the previous version of Visual Studio this was named SPA Template but in this version Microsoft renamed this project template.

In that context, I am defining the various types of templates available with the Visual Studio 2013 RC as in the following:

Empty template
Web Forms template
MVC template
Web API template
Single Page Application template
Facebook template

So, let's start to create a Single Page Template with an application. You can also review my previous article to create an application with these templates.

Single Page Application Template

This application is based on this template loading an HTML page at first and then dynamically updating the page instead of loading the page. When the page loads initially, the SPA integrates with the server by AJAX.

It creates an application in which HTML 5, Java Script and KnockoutJS is used on the client-side and the Web API on the server-side.

Note: Microsoft continues to improve the Single Page Application template. Additional improvements might be released in the next version of Visual Studio.

So, create an ASP.NET Application with the SPA template using the following procedure.

Step 1: Create a new ASP.NET Web Application.

Step 2: Select the "Single Page Application" project template.

Note: There is only one authentication provided here by Individual User Account.

Step 3: Debug your application in your selected browser.

As you can see, when the application is debuged the Login Page appears first. You need to login to enter your application or you can register yourself. Have a look.

Registration in the application

After registration, the the application is automatically opened at the home page with your User Name.

Login with Different External Authentication

As you can see in the following image, there not another service to login my application.

You can also login your application with the external authentication providers like:

Facebook
Google
Microsoft
Twitter

If you want to create an external authentication in your application then use the following procedure:

Step 1: Open the "Startip.Auth.cs" file from your Solution Explorer.

Step 2: Register yourself as an app developer in Facebook, Microsoft and Twitter.

Step 3: Now as you can see, the authentication is disabled. So un-comment all of it and paste in the App Id and App Secret here.

Then paste in the id and secret.

Step 4: Debug your application and now you can login your application with other login services also.

Summary

So this article will help you to create an ASP.NET Web application using the Single Page Application project template. You can also learn to login your application with external authentication providers for your application.

Thanks for reading.