Kodemonk

Setting Up the Environment

Before we dive into setting up the environment, let me brief upon tools & technologies we will be using during this series –

  • npm – As a Package Manager and build tool Download here
  • typings – typings definition manager [tsd already deprecated].
  • Visual Studio Code – Editor Download here
  • browserify/watchify – To bundle our code
  • lite-server – To deploy our code onto an http server and watch for file changes

Steps for environment setup –

  • Download & Install latest version of node from http://nodejs.org
  • Install typings globally with following command, please use sudo if required.

npm install -g typings

  • Create a project folder and initialize a node project using following command and it will generate a package.json file

npm init

  • Update package.json to include required dependencies and dev dependencies and perform npm install

"dependencies": {
"angular": "^1.5.10",
"angular-ui-bootstrap": "^2.4.0",
"angular-ui-router": "^0.3.2",
"ui-select": "^0.19.6"
},
"devDependencies": {
"@types/node": "^7.0.0",
"browserify": "^13.3.0",
"concurrently": "^3.1.0",
"lite-server": "^2.2.2",
"tslint": "^4.3.1",
"typescript": "2.0.10",
"uglify": "^0.1.5",
"watchify": "^3.8.0"
},

  • Create an empty typings.json file at root of your project folder to store typings dependencies. Please go through the documentation of typings here to install required definitions in your project folder. I will list my typings.json file here. You can do a typings install directly after putting the following content in your typings.json file.

 

{
"globalDependencies": {
"angular": "registry:dt/angular#1.5.0+20160819155010",
"angular-animate": "registry:dt/angular-animate#1.5.0+20160709061515",
"angular-cookies": "registry:dt/angular-cookies#1.4.0+20160317120654",
"angular-mocks": "registry:dt/angular-mocks#1.5.0+20160608104721",
"angular-resource": "registry:dt/angular-resource#1.5.0+20160613142217",
"angular-sanitize": "registry:dt/angular-sanitize#1.3.0+20160317120654",
"angular-translate": "registry:dt/angular-translate#2.4.0+20160729132354",
"angular-ui-router": "registry:dt/angular-ui-router#1.1.5+20160810191828",
"es6-shim": "registry:dt/es6-shim#0.31.2+20160602141504",
"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
"jquery": "registry:dt/jquery#1.10.0+20160704162008"
},
"dependencies": {
"angular-ui-bootstrap": "registry:dt/angular-ui-bootstrap#0.13.3+20161224095612",
"ui-select": "registry:dt/ui-select#0.13.2+20160708003927"
}
}

PS: If you are behind a proxy, you might need to create a .typingsrc and .npmrc file in your profile folder i.e. if on windows it should be inside C:\Users\username\. Please follow along .npmrc and .typingsrc to proceed with installation.

 

Next article coming soon!!!

Share This:

Next Post

© 2017 Kodemonk

Theme by Anders Norén