建立自己的Express專案

還記得我們建立的Express專案嗎？
不記得的話Terminal輸入安裝

$ npm install express-generator -g //全域安裝
$ epxress MyTestProject //生成專案MyTestProject

如果出現以下畫面，即完成建立專案MyTestProject。

$ express MyTestProject

  warning: the default view engine will not be jade in future releases
  warning: use `--view=jade' or `--help' for additional options


   create : MyTestProject/
   create : MyTestProject/public/
   create : MyTestProject/public/javascripts/
   create : MyTestProject/public/images/
   create : MyTestProject/public/stylesheets/
   create : MyTestProject/public/stylesheets/style.css
   create : MyTestProject/routes/
   create : MyTestProject/routes/index.js
   create : MyTestProject/routes/users.js
   create : MyTestProject/views/
   create : MyTestProject/views/error.jade
   create : MyTestProject/views/index.jade
   create : MyTestProject/views/layout.jade
   create : MyTestProject/app.js
   create : MyTestProject/package.json
   create : MyTestProject/bin/
   create : MyTestProject/bin/www

   change directory:
     $ cd MyTestProject

   install dependencies:
     $ npm install

   run the app:
     $ DEBUG=mytestproject:* npm start

可以看到最後六行的指令：

change directory://進入我們創建專案的資料夾
     $ cd MyTestProject

   install dependencies://安裝本專案所需套件
     $ npm install

依序照著下方輸入，將可以DEBUG模式啟動專案伺服器。若不使用DEBUG模式監控，直接輸入$ npm start即可。

   run the app://執行專案伺服器
     $ DEBUG=mytestproject:* npm start

> mytestproject@0.0.0 start /path/MyTestProject
> node ./bin/www

現在，我們可以另開一個瀏覽器視窗，網址列輸入

http://localhost:3000/

可以看到

噢！這是你的網站！沒錯！回到Terminal可以看到

GET /stylesheets/style.css 200 4.759 ms - 111
GET /favicon.ico 404 10.961 ms - 1302

這表示網站後端的伺服器，收到了你開啟網頁的指令，回傳了網頁該有的資訊給瀏覽器，所以才會看到上面的頁面。接著，我們來了解一下網站架構。