How to Clone AngularJS 2 Web Project from github with NPM Command and Git Bash

สวัสดีครับ วันนี้ท๊อปจะมานำเสนอวิธีการทดสอบ Web Application ที่ถูกพัฒนาด้วย AngularJS 2 ซึ่ง ณ.ปัจจุบันนี้ ก็เป็นที่นิยมอย่างมากในหมู่นักพัฒนา Web Application

สิ่งที่เราจะต้องมี คือ...

1. NodeJS เพื่อการลอง Package ด้วย cmd
2. github
3. Typescript Library
4. Json Package

วันนี้ท๊อปจะยกตัวอย่าง Dashboard Project จาก https://github.com/start-angular/SB-Admin-BS4-Angular-2 โดยที่ท๊อปจะ Clone Project มาไว้ที่เครื่องตัวเอง...

ขั้นตอนการ Setup Project

ให้เราเริ่ม Setup Package ที่จำเป็นตามคำสั่งดังต่อไปนี้

$ npm install -d : คำสั่งสำหรับลง Package

$ npm update -d : คำสั่งเพื่อ Update Package
$ npm -v : คำสั่งเพื่อตรวจสอบเวอร์ชั่นของ npm
$ npm install gulp -g : คำสั่งเพื่อลง gulp Package

$ npm install typescript-node -g : คำสั่งเพื่อลง Typescript Package

ขั้นตอนการ Clone Project

1. เราต้องการ Clone โปรเจคจาก github มาไว้ที่เครื่องของเรา
$ git clone https://github.com/start-angular/SB-Admin-BS4-Angular-2.git

2. ตรวจสอบ npm เพื่อลง Type Script
npm install -g ts-node

โดยเมื่อ Clone ลงมาที่เครื่องตาม Path ที่ระบุแล้ว ก็จะมี Folder ของ Project ปรากฏออกมา ดังรูป

3. เขียน command prompt เพื่อ Run คำสั่ง $ cd `project-directory` เพื่อ Setup Project ตาม Folder ที่ได้ Clone จาก github ลงมา

หลังจากนั้น Git Bash จะสั่ง Run Command ด้วยคำสั่ง $ npm install เพื่อลง Web Project

เมื่อลง Clone Project เสร็จแล้ว เราจะสั่ง Run Web Project ด้วยคำสั่ง $ npm start

หลังจากนั้น Server ก็จะสั่ง Start Server ขึ้นมา ผ่าน Localhost ตามที่ได้ Configuration ไว้

Project ถูก Start ขึ้นมาเรียบร้อย....

References : 

http://startangular.com/

https://help.github.com/articles/cloning-a-repository/

https://github.com/mgechev/angular2-seed/issues/132