ASP.NET Core and TypeScript
1. INSTALLATION
1.1. Install ASP.NET Core and TypeScript
First we need to install ASP.NET Core and Visual Studio 2015 . If your version of Visual Studio has not been installed TypeScript, you can install it manually (this is the following tutorial).
1.2. Create demo application
On the menu bar of Visual Studio, follow these steps:
- Step 1: Select File
- Step 2: Select New Project (Ctrl + Shift + N)
- Step 3: Select Visual C #
- Step 4: Select ASP.NET Web Application
- Step 5: Select ASP.NET 5 Empty
Please uncheck "Host in the cloud" when we only run on local (our computer)
Then click "OK" and test it, make sure it runs well :))
1.3. Server settings
In project.json file we add another "dependencies":
1 | "Microsoft.AspNet.StaticFiles": "1.0.0-rc1-final" |
The result will look like this
1 2 3 4 5 | "dependencies": { "Microsoft.AspNet.IISPlatformHandler": "1.0.0-rc1-final", "Microsoft.AspNet.Server.Kestrel": "1.0.0-rc1-final", "Microsoft.AspNet.StaticFiles": "1.0.0-rc1-final" }, |
Replace the contents of Configure in the Startup.cs file to:
1 2 3 4 5 6 | public void Configure (IApplicationBuilder app) { app.UseIISPlatformHandler (); app.UseDefaultFiles (); app.UseStaticFiles (); } |
2. MORE TYPESCRIPT
The next step is to add a folder for TypeScript.
We still call it scripts
2.1. Add TypeScript code
Right-click the scripts folder and click New Item . Then select the typescript file (it can be in the core .Net) and fill in the Name text box is app.ts. Finally click Add .
2.2. Example code
Type the following code into app.ts.
1 2 3 4 5 | function sayHello () { const compiler = (document.getElementById ("compiler") as HTMLInputElement) .value; const framework = (document.getElementById ("framework") as HTMLInputElement) .value; return `Hello from $ {compiler} and $ {framework}!`; } |
2.3. Install to build
2.3.1. Configure TypeScript's compiler
Right-click the scripts folder and click New Item . Then select the TypeScript Configuration File and use the default name tsconfig.json .
Replace the contents of the file tsconfig.json as follows:
1 2 3 4 5 6 7 8 9 10 11 12 | { "compilerOptions": { "noImplicitAny": true, "noEmitOnError": true, "sourceMap": true, "target": "es5", }, "files": [ "./app.ts" ], "compileOnSave": true } |
2.3.2. Install NPM
Now we need to install NPM to be able to download the JavaScripts library package. Right-click the project and click New Item . Then select NPM Configuration File and use the default package.json name . Inside devDependencies add gulp and del .
1 2 3 4 | "devDependencies": { "gulp": "3.9.0", "del": "2.2.0" } |
2.3.3. Install gulp
Finally, add a new JavaScript file named gulpfile.js with the content:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | /// <binding AfterBuild = 'default' Clean = 'clean' /> / * Tập tin này là một mục nhập chính chính cho các Gulp xác định xác định và dùng Gulp plugins. Click here to learn more. http://go.microsoft.com/fwlink/?LinkId=518007 * / var gulp = require ('gulp'); var del = require ('del'); var paths = { scripts: ['scripts / ** / *. js', 'scripts / ** / *. ts', 'scripts / ** / *. map'], }; gulp.task ('clean', function () { return del (['wwwroot / scripts / ** / *']); }); gulp.task ('default', function () { gulp.src (paths.scripts) .pipe (gulp.dest ('wwwroot / scripts')) }); |
The first line tells Visual Studio to run the default task after the build is complete. It will also run task clean when you ask Visual Studio to delete the build.
Now right-click on gulpfile.js and click Task Runner Explorer .
2.4. Write an HTML page
Add a New Item named index.html in the wwwroot directory .
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <! DOCTYPE html> <html> <head> <meta charset = "utf-8" /> <script src = "scripts / app.js"> </script> <title> </title> </head> <body> <div id = "message"> </div> <div> Compiler: <input id = "compiler" value = "TypeScript" onkeyup = "document.getElementById ('message'). InnerText = sayHello ()" /> <br /> Framework: <input id = "framework" value = "ASP.NET" onkeyup = "document.getElementById ('message'). InnerText = sayHello ()" /> </div> </body> </html> |
2.5. Test
Now test the project, see how the results are :)))
So, together we built an ASP.NET Core application with small TypeScript. See you guys in the next series ?