Steps to start typescript project with visual studio:
1. create empty project under visual c# -> Asp.net Web Application -> select empty
2. now goto to project.json and entry the dependency of typecript under dependencies as: "Microsoft.AspNet.StaticFiles": "1.0.0-rc1-final"
3. after that goto starup.cs file and write these two method calling:
a. app.UseDefaultFiles();
b. app.UseStaticFiles();
under public void Configure(IApplicationBuilder app) definition.
4. now create a folder for script.
under this create one script file.
5. And then create typescript configuration file by right click on script folder and then select typecript configuration file.
6. after that write your file name under files attribute.
example: like this:
"files": [
"./app.ts"
]
7. Now its time to set up npm :
to do this first right click on the project -> new item -> web -> npm configuration file ->by default its name is package.json
under this we write this code for "gulp" and "del" with "devdependencies".
Now when you save this file then visual studio shoul installing gulp and del for the project if isnot happening or to crass check just right click on the package.json and select
restore packages.
8. Now next step is to set up gulp to do that just add one more script file with name "gulpfile.js" under project tree.
and this code inside this:
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'))
});
and now right click on gulpfile and select task runner explorar and you will see "default" and "clean" tasks , if not then refresh.
9. now write html file under wwwroot
with index.html
<!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>
10. now run the project
1. create empty project under visual c# -> Asp.net Web Application -> select empty
2. now goto to project.json and entry the dependency of typecript under dependencies as: "Microsoft.AspNet.StaticFiles": "1.0.0-rc1-final"
3. after that goto starup.cs file and write these two method calling:
a. app.UseDefaultFiles();
b. app.UseStaticFiles();
under public void Configure(IApplicationBuilder app) definition.
4. now create a folder for script.
under this create one script file.
5. And then create typescript configuration file by right click on script folder and then select typecript configuration file.
6. after that write your file name under files attribute.
example: like this:
"files": [
"./app.ts"
]
7. Now its time to set up npm :
to do this first right click on the project -> new item -> web -> npm configuration file ->by default its name is package.json
under this we write this code for "gulp" and "del" with "devdependencies".
Now when you save this file then visual studio shoul installing gulp and del for the project if isnot happening or to crass check just right click on the package.json and select
restore packages.
8. Now next step is to set up gulp to do that just add one more script file with name "gulpfile.js" under project tree.
and this code inside this:
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'))
});
and now right click on gulpfile and select task runner explorar and you will see "default" and "clean" tasks , if not then refresh.
9. now write html file under wwwroot
with index.html
<!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>
10. now run the project
No comments:
Post a Comment