TypeScript and ASP.NET Core with Visual Studio 2015

With the new rc2 release of ASP.NET a lot happened with what we previously knew as ASP.NET 5. Not only did the naming of the framework change (ASP.NET 5 to ASP.NET Core), but also the tools we previously used for ASP.NET 5 got changed and renamed. In Visual Studio a few things changed as well, such as the templates and some tooling.

However, this post is not about to go into the details of all changes, but rather show how to get from first TypeScript file to executing it in the web browser as fast as possible.

OBS! For version disclaimer & project setup – see the bottom of the post

Aim of this post

If you want to start playing around with TypeScript and ASP.NET Core and want to get going as quickly as possible, this is the post for you. The purpose of the post is to show how to get TypeScript files transpiled to JavaScript and serve these and other static html files with ASP.NET Core.

Step 1 – Create New Project

First we need to create a new web project:
Select File -> New -> Project and then the ASP.NET Core Web Application.
Create a new ASP.NET Core Web APP

Then select the Empty template.
Select the Empty template

Step 2 – Add static file serving to the pipeline

In the newly created solution, open the Startup.cs file and replace the Configure method with the following code:

        public void Configure(IApplicationBuilder app)
        {
            app.UseDefaultFiles();
            app.UseStaticFiles();
        }

Add the missing dependency to Microsoft.AspNetCore.StatiFiles using the helpful light bulb (Ctrl + .).

Step 3 – Add an html file

Add an index.html file inside the wwwroot folder.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <h1>Hello TypeScript fans!</h1>
</body>
</html>

Step 4 – Add a TypeScript file and produce JavaScript

Add a TypeScript file (file.ts) and enter some simple code in it, for ex:

(() => { alert("Made with TypeScriptâ„¢"); })();

Notice that the file get’s transpiled when you press save and the JavaScript file is saved in the same folder as the TypeScript file.
TypeScript file transpiles to JavaScript on save

Step 5 – Reference the JavaScript file

Add a reference to the JavaScript file in the html file created earlier, for ex in the header tag.

<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="file.js"></script>
</head>

Run the project

Start the project (Ctrl + F5) and a browser should open up, load the index.html file and pop the alert.

Version Disclaimer & Project Setup

The code for this post was written using Visual Studio 2015 Enterprise with Update 2, ASP.NET Core with runtime rc-2. The code was tested in Microsoft Edge.

Visual Studio had the following products installed:

  • ASP.NET and Web Tools 2015.1 14.1.20512.0
  • ASP.NET Web Frameworks and Tools 2012.2 4.1.41102.0
  • ASP.NET Web Frameworks and Tools 2013 5.2.40314.0
  • Microsoft .NET Core Tools (Preview 1) 14.1.20512.0
  • TypeScript 1.8.31.0

Happy coding! 🙂

Basic TypeScript on ASP.NET Core with Visual Studio 2015 in 5 steps
Tagged on:             

2 thoughts on “Basic TypeScript on ASP.NET Core with Visual Studio 2015 in 5 steps

Leave a Reply

Your email address will not be published. Required fields are marked *