It is a quite reading if you are coming from a .net development experience to work on client side programming , below are few steps which can be used to get started with the modern web development stack .
Basically you would need a Laptop or desktop as usual :) windows or IOS license is all you need
and then
1)Code editor : you can use notepad++ , atom , sublime , I personally use VSCode editor (https://code.visualstudio.com/) Its completely freeeeeeeee !!
2)Git : If you need to have a repository and manage versions , you can use VSTS too . (https://git-scm.com/)
3)NodeJs :Platform used to build and test application
4)NPM : .net developers can compare this to NugetPackage manager .this helps us to download and install the required package which will be used in the web development
5)Typescript : You can refer this for installation , I would prefer global installation (https://www.npmjs.com/package/typescript)
6)Task runners: Which will help to automate the development life cycle , there are many Gulp,Grunt,Webpack etc , I have used Webpack in the below sample . The help to automate compilation , bundling of the files even magnification of JS files .
Getting started :
1)Open VS code
2)cmd (can be any terminal) -- > npm init (Package.json will be created)
3)cmd --> npm install --save-dev typescript (Creates the local typescript files and a compile component tsc)
4)Create folder to add a .ts file (custom coding files)
5)Create tsconfig.json and provide entries (Files to be included for transpiling)
for Webpack
1)cmd -- >npm install --save-dev ts-loader (Installs ts loader locally -this helps webpack to compile ts files)
2)cmd --> npm install --save-dev webpack (Installs webpack loacally)
3)Add "webpack.config.js" (This will be used for compiling and build )
4)run "node_modules\.bin\webpack" (provides the output of the build which is a js file which can be directly used in HTML)
Debugging
1)Add line "debugger" in any ts file
2)Open up the html in debug mode , this enters the debug mode but the code is in transpiled state , to get the code in typescript format , perform below steps
3)Open "tsConfig.json" --> add property "ComplierOptions" -->"sourceMap" :true
4)Open "Webpack.config.js --> inside exports add -->devtool: 'source-map',
5)This would load the ts file in the browser
Http-server
1)Cmd -- > Install --save-dev http-server (to install the http server locally)
Auto build through webapcak
2)webpack.config.js --> add property --> watch:true ;
3)To test or run an application in local server use cmd --> node_modules\.bin\http-server
Jquery
1)cmd --> npm install --save jquery (This will install the Jquery package globally- as this package has to be released to browser)
2)run as admin Cmd -- >npm install --save-dev @types/jquery (This will install the Jquery declaration file , this is one of the way to work with Jquery)
3)May get a error on Jquery , if so add the property "lib": ["dom","es5","es2015.iterable"]
4)cmd -- >node_modules\.bin\webpack should give you the bundled file including the Jquery library .
Get started with the project from repository
1) cmd -- > npm install (This would install all the required package into node modules by referring the package.json)
-------------------------------------------------------------------------------------------------------------------------
tsconfig.json
package.json
webpack.config.js
alert.ts
sample.ts
index.html
Note:
--save-dev will install the packages locally in the loacl project
-g will install the package global
Basically you would need a Laptop or desktop as usual :) windows or IOS license is all you need
and then
1)Code editor : you can use notepad++ , atom , sublime , I personally use VSCode editor (https://code.visualstudio.com/) Its completely freeeeeeeee !!
2)Git : If you need to have a repository and manage versions , you can use VSTS too . (https://git-scm.com/)
3)NodeJs :Platform used to build and test application
4)NPM : .net developers can compare this to NugetPackage manager .this helps us to download and install the required package which will be used in the web development
5)Typescript : You can refer this for installation , I would prefer global installation (https://www.npmjs.com/package/typescript)
6)Task runners: Which will help to automate the development life cycle , there are many Gulp,Grunt,Webpack etc , I have used Webpack in the below sample . The help to automate compilation , bundling of the files even magnification of JS files .
Getting started :
1)Open VS code
2)cmd (can be any terminal) -- > npm init (Package.json will be created)
3)cmd --> npm install --save-dev typescript (Creates the local typescript files and a compile component tsc)
4)Create folder to add a .ts file (custom coding files)
5)Create tsconfig.json and provide entries (Files to be included for transpiling)
for Webpack
1)cmd -- >npm install --save-dev ts-loader (Installs ts loader locally -this helps webpack to compile ts files)
2)cmd --> npm install --save-dev webpack (Installs webpack loacally)
3)Add "webpack.config.js" (This will be used for compiling and build )
4)run "node_modules\.bin\webpack" (provides the output of the build which is a js file which can be directly used in HTML)
Debugging
1)Add line "debugger" in any ts file
2)Open up the html in debug mode , this enters the debug mode but the code is in transpiled state , to get the code in typescript format , perform below steps
3)Open "tsConfig.json" --> add property "ComplierOptions" -->"sourceMap" :true
4)Open "Webpack.config.js --> inside exports add -->devtool: 'source-map',
5)This would load the ts file in the browser
Http-server
1)Cmd -- > Install --save-dev http-server (to install the http server locally)
Auto build through webapcak
2)webpack.config.js --> add property --> watch:true ;
3)To test or run an application in local server use cmd --> node_modules\.bin\http-server
Jquery
1)cmd --> npm install --save jquery (This will install the Jquery package globally- as this package has to be released to browser)
2)run as admin Cmd -- >npm install --save-dev @types/jquery (This will install the Jquery declaration file , this is one of the way to work with Jquery)
3)May get a error on Jquery , if so add the property "lib": ["dom","es5","es2015.iterable"]
4)cmd -- >node_modules\.bin\webpack should give you the bundled file including the Jquery library .
Get started with the project from repository
1) cmd -- > npm install (This would install all the required package into node modules by referring the package.json)
-------------------------------------------------------------------------------------------------------------------------
tsconfig.json
{
"files": [
"./ts-src/alert.ts"
],
"compilerOptions": {
"lib": [
"dom",
"es5",
"es2015.iterable"
],
"sourceMap": true,
"outDir": "./dist1/",
"noImplicitAny": true,
"module": "commonjs",
"target": "es5",
"jsx": "react",
"allowJs": true
}
}
package.json
{
"name": "typescriptwithjquery",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@types/jquery": "^3.2.12",
"http-server": "^0.10.0",
"ts-loader": "^2.3.7",
"typescript": "^2.5.2",
"webpack": "^3.5.6"
},
"dependencies": {
"jquery": "^3.2.1"
}
}
webpack.config.js
const path = require('path');
module.exports = {
devtool: 'source-map',//only to debug
entry: './ts-src/alert.ts',
module: {
rules: [{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}]
},
resolve: {
extensions: [".tsx", ".ts", ".js"]
},
//watch:true,
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
alert.ts
import news from './sample'
import * as $ from 'jquery'
/*
window.onload = function(){
var a1 = new news();
a1.msg();
}
*/
$(function(){
$('#btn1').on("click",function(){
var a = new news();
a.msg();
});
});
sample.ts
import * as $ from 'jquery'
export default class message{
msg(){
$("#btn1").html('Thilosh');
alert('hi');
}
}
index.html
<html>
<head>
<script src="dist/bundle.js" ></script>
</head>
<body>
<button id="btn1" >click here</button>
</body>
</html>
Note:
--save-dev will install the packages locally in the loacl project
-g will install the package global
