ASP.NET Core Using TypeScript (2.6) With RequireJS In C#

Introduction

This article demonstrates how to create and use an application in ASP.NET Core using TypeScript (2.6) with RequireJS (2.3.5) in C#. This article starts with the introduction of the ASP.NET Core. After that, it demonstrates how to implement TypeScript (2.6) with RequireJS (2.3.5).

Creating an ASP.NET Core application

Step 1

Step 2

Once you click on the OK button you will get an empty created project as shown in the below screenshot.

Step 3

Create folders in wwwroot as below.

Download required libs in order to start working on it. And dump into “libs” folder.

Create two more files “config.ts” and “app.ts” in “src” folder.

Now, application will look like the below screenshot.

Step 4

Make some project setting.

Right-click on the project, not a solution and set “Module System” as “UMD”.
Set “TypeScript Script Compiler output directory to” your “XXXXX\wwwroot\scripts\js”
Specify root directory of TypeScript to “XXXX\wwwroot”.

See the below screenshot:

Step 5

Save the project setting and re-build the solution and you will get the output as the below screen:

Step 6

Add the below code in index.html.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script data-main="scripts/js/config" src="libs/require.js"></script>
</head>
<body>
<h1 id="msg">Home Page !</h1>
</body>
</html>

Step 7

Add the below code in “src/config.ts”.

declare var requirejs: any;
requirejs.config({
baseUrl: 'scripts',
paths: {
app: 'js/app',
jquery:'libs/jquery-3.3.1.min'
}
});
requirejs(['app'], function (app) {});

Step 8

Add the below code in “src/app.ts”.

import { LandingPage } from "./app/LandingPage"
var obj = new LandingPage();

Step 9

Create one file “LandingPage.ts” in folder “src/app” add code.

export class LandingPage {
constructor() {
console.log("This message is comming from Landing Page!");
}
}
requirejs(['jquery'], function ($) {
$("#msg").text("This message is comming from Landing Page!");
});

Now the final project output will be shown as below:

Step 10

Add the below lines of code in “Statup.cs”

DefaultFilesOptions DefaultFile = new DefaultFilesOptions();
DefaultFile.DefaultFileNames.Clear();
DefaultFile.DefaultFileNames.Add("index.html");
app.UseDefaultFiles(DefaultFile);
// For the wwwroot folder
app.UseStaticFiles();
//app.Run(async (context) =>
//{
// await context.Response.WriteAsync("Hello World!");
//});

See the below screenshot:

Step 11

Now run the application and see the output.

Since this message is coming from “wwwroot/src/app/LandingPage.ts” which is referenced in “wwwroot/src/app.ts” which is also referenced in “wwwroot/src/config.ts” which is again referenced in “wwwroot/index.html” so we can say that our APS.NET Core application has implemented with TypeScript (2.6) & RequireJS (2.3.5) and working perfectly fine.

Congratulation you have successfully configured TypeScript (2.6) & RequireJS (2.3.5) in ASP.NET Core.

That's all for this tutorial.

Summary

In this article, I discussed how we can create a TypeScript with RequireJS in ASP.NET Core application in C#.