跳至主要内容

[Express] 建立Express環境

TL;DR​

使用基本的createServer方法來開啟伺服器雖然可以運行，但是管理上不易。Express是一個後端框架，本篇介紹如何架設Express環境，並透過Express來讓我們更方便的管理我們的路由。

參考資料​

相關連結​

Express App Generator​

我們進到Express的Getting Start，發現官方推薦使用Generator的方式去產生我們的初始環境。

without options​

You can run the application generator with the npx command (available in Node.js 8.2.0).

npx express-generator

在第一次運行的時候可能會詢問安裝：

Need to install the following packages:
express-generator@4.16.1

直接選y安裝即可

info

如果Node.js的版本較舊，可以先使用npm安裝之後再透過套件來產生環境

For earlier Node versions, install the application generator as a global npm package and then launch it:

npm install -g express-generator
express

with options​

如果有其他的選項需要設定，例如我們需要使用ejs的樣板引擎等等，我們需要在初始化環境之前就給予參數，才會產生相對應的執行環境。

如果不知道參數是什麼我們可以使用以下指令：

npx express-generator -h

接著就會收到回應告訴我們該如何增加我們需要的參數設定：

╭─    ~/Desktop/tmp ───────────────────────────────── ✔  at 18:00:58  ─╮
╰─ npx express-generator -h                                                  ─╯

  Usage: express [options] [dir]

  Options:

        --version        output the version number
    -e, --ejs            add ejs engine support
        --pug            add pug engine support
        --hbs            add handlebars engine support
    -H, --hogan          add hogan.js engine support
    -v, --view <engine>  add view <engine> support (dust|ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
        --no-view        use static html instead of view engine
    -c, --css <engine>   add stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain css)
        --git            add .gitignore
    -f, --force          force on non-empty directory
    -h, --help           output usage information

舉例來說，假設我們需要使用ejs的樣版引擎，另外因為我們也許會使用git，我需要他順便幫我建立gitignore檔案，我們可以輸入：

npx express-generator --view=ejs myejsapp --git

接著就會回傳告訴我們已經建立完成，並且也告訴我們接下來應該怎麼樣運行專案。

response
change directory:
$ cd myejsapp

install dependencies:
$ npm install

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

透過VS Code開啟myejsapp的專案之後，我們可以看到專案結構如下

.
├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.ejs
    └── index.ejs

note

專案結構可以使用tree這個套件去顯示，另外我習慣加上-L 2限制目錄在兩層內，以及--gitignore來排除被gitignore所忽略的資料夾(如node_modules等等)

這邊列出依照npx express-generator --view=ejs myejsapp --git指令產生的內容：

app.js
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

到目前為止簡單的執行環境就建立完成了。 我們可以根據需求，再額外使用npm去安裝我們需要的套件。