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 informationexpress -h

建立完成后的架构如下
注意：其中 run the app 指令是有问题的，且 win & osx 会不同(后述)

command line 提示 (PowerShell)
实际的资料夹结构 (程式进入点在 bin/www)

Install dependencies

cd myappnpm 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 layoutblock content    script(src='/javascripts/index_bundle.js')    h1= title    p Welcome to #{title}

npm start 后连入 http://localhost:3000/开启chrome (F12)，可以看到console有印出我们debug的字样啰!