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.
- jquery-3.3.1.min.js
- js
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);
-
-
- app.UseStaticFiles();
-
-
-
-
-
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#.