Post
Ask Question

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

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);  
  5.   
  6.        // For the wwwroot folder  
  7.        app.UseStaticFiles();  
  8.   
  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#. 


Similar Articles