Intro

express與express-generator的差別?

• express : 建立normal web架構
• express-generator : 建立web app架構 (equal to 應用程式)

Installation

npm install -g express-generator

Initiate a new app

建立專案資料夾名為 'myapp' 的應用程式
--git 自動加入.gitignore，把所有可以不用push上repo的檔案/資料夾都幫你寫好
-v or --view 選擇server side要使用的template engine，這邊使用pug (前身為jade)

express -v pug --git myapp
# for more information
express -h

建立完成後的架構如下
注意：其中 run the app 指令是有問題的，且 win & osx 會不同(後述)

• command line 提示 (PowerShell)
  
• 實際的資料夾結構 (程式進入點在 bin/www)
  

Install dependencies

cd myapp
npm install

• package.json中可以看到此專案相依套件清單
  

How to trace DEBUG (server side)?

由於express-generator有幫我們安裝debug
所以執行npm start 前可以把需要顯示的debug設定好

SET DEBUG=myapp:* ; npm start
// 或是
$env:DEBUG="myapp:*" ; npm start
# myapp:* 顯示全部
# 注意：windows無法使用 "&" 連接兩個要執行的command，需使用";"
# 官方是說windows & PowerShell (win10)的指令不同，不過目前試過都可以
# 但如果你的vsc是PowerShell就只能使用2.
# 可將整串指令加入package.json中scripts.start內 (但只支援1.寫法)

• debug官方的說明
  

# DEBUG環境的設定
$env:DEBUG="*" # 顯示全部
$env:DEBUG="myapp:*" # 顯示namespace為myapp開頭全部
$env:DEBUG="*,-express:*" # 顯示全部，但除了namespace開頭為express

• 將DEBUG指令加到npm start中，以及在vsc terminal執行的結果
  
• Ref: package.json中指令的操作

How to trace DEBUG (client side)?

Intro & Install browserify

由於前端的js無法像後端一樣，使用require引用模組套件
因此需要browserify將有使用require模組的 js 轉為前端可讀的 js

npm install -g browserify
# 其他專案可能也會使用到，所以全域安裝

Edit relative file

• public/javascripts/index.js

var debug = require('debug')('myapp:index-client')
debug('hello!')

• 轉為前端可讀懂的js:

browserify index.js -o index_bundle.js

• 於前端頁面 views/index.pug 引入

extends layout
block content
    script(src='/javascripts/index_bundle.js')
    h1= title
    p Welcome to #{title}

• npm start 後連入 http://localhost:3000/
• 開啟chrome (F12)，可以看到console有印出我們debug的字樣囉!