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

ASP.NET Core

Step 2

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

ASP.NET Core

Step 3

Create folders in wwwroot as below.

ASP.NET Core

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

  1. jquery-3.3.1.min.js
  2. js

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

Now, application will look like the below screenshot.

ASP.NET Core

Step 4

Make some project setting.

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

See the below screenshot:

ASP.NET Core

Step 5

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

ASP.NET Core

Step 6

Add the below code in index.html.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title></title>
  6. <script data-main="scripts/js/config" src="libs/require.js"></script>
  7. </head>
  8. <body>
  9. <h1 id="msg">Home Page !</h1>
  10. </body>
  11. </html>

Step 7

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

  1. declare var requirejs: any;
  2. requirejs.config({
  3. baseUrl: 'scripts',
  4. paths: {
  5. app: 'js/app',
  6. jquery:'libs/jquery-3.3.1.min'
  7. }
  8. });
  9. requirejs(['app'], function (app) {});

Step 8

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

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

Step 9

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

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

Now the final project output will be shown as below:

ASP.NET Core

Step 10

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

  1. DefaultFilesOptions DefaultFile = new DefaultFilesOptions();
  2. DefaultFile.DefaultFileNames.Clear();
  3. DefaultFile.DefaultFileNames.Add("index.html");
  4. app.UseDefaultFiles(DefaultFile);
  6. // For the wwwroot folder
  7. app.UseStaticFiles();
  9. //app.Run(async (context) =>
  10. //{
  11. // await context.Response.WriteAsync("Hello World!");
  12. //});

See the below screenshot:

ASP.NET Core

Step 11

Now run the application and see the output.

ASP.NET Core

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#.