第一步：新建Express項目

創(chuàng)建一個新目錄newedenfaces，進入目錄并創(chuàng)建兩個空文件 package.json和server.js：

注：我的OS X終端使用了Monokai主題和oh-my-fish框架以提供Fish shell.

打開package.json并粘貼下面的代碼：

{
  "name": "newedenfaces",
  "description": "Character voting app for EVE Online",
  "version": "1.0.0",
  "repository": {
    "type": "git",
    "url": "https://github.com/sahat/newedenfaces-react"
  },
  "main": "server.js",
  "scripts": {
    "start": "babel-node server.js",
    "watch": "nodemon --exec babel-node -- server.js"
  },
  "dependencies": {
    "alt": "^0.17.1",
    "async": "^1.4.0",
    "babel": "^5.6.23",
    "body-parser": "^1.13.2",
    "colors": "^1.1.2",
    "compression": "^1.5.1",
    "express": "^4.13.1",
    "mongoose": "^4.0.7",
    "morgan": "^1.6.1",
    "react": "^0.13.3",
    "react-router": "^0.13.3",
    "request": "^2.58.0",
    "serve-favicon": "^2.3.0",
    "socket.io": "^1.3.6",
    "swig": "^1.4.2",
    "underscore": "^1.8.3",
    "xml2js": "^0.4.9"
  },
  "devDependencies": {
    "babelify": "^6.1.3",
    "bower": "^1.4.1",
    "browserify": "^11.0.0",
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "^2.3.1",
    "gulp-concat": "^2.6.0",
    "gulp-cssmin": "^0.1.7",
    "gulp-if": "^1.2.5",
    "gulp-less": "^3.0.3",
    "gulp-plumber": "^1.0.1",
    "gulp-streamify": "0.0.5",
    "gulp-uglify": "^1.2.0",
    "gulp-util": "^3.0.6",
    "vinyl-source-stream": "^1.1.0",
    "watchify": "^3.3.0"
  },
  "license": "MIT"
}

這是我們的應用所需要的所有依賴包，簡要介紹如下：

在終端輸入npm install安裝依賴。

如果你使用Windows，可以使用cmder控制臺模擬器，可以達到接近OS X/Linux終端的效果。

打開server.js粘貼下面代碼，下面是最基礎的Express應用，足夠我們開始了。

var express = require('express');
var path = require('path');
var logger = require('morgan');
var bodyParser = require('body-parser');

var app = express();

app.set('port', process.env.PORT || 3000);
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, 'public')));

app.listen(app.get('port'), function() {
  console.log('Express server listening on port ' + app.get('port'));
});

注意：盡管我們將使用ES6編寫React app，但在這兒我還是決定使用ES5，因為這段代碼從兩年前到現(xiàn)在基本沒有變過。并且，如果你第一次使用ES6，至少這個Express app對你來說還算熟悉。

然后，新建文件夾public，這里是我們放文件如圖片、字體，以及壓縮后的CSS和JS文件。

現(xiàn)在你可以在終端輸入npm start啟動應用，確保Express app沒有問題。

注意：你現(xiàn)在可以使用node server.js來直接啟動應用，但之后我們將使用Babel來預編譯文件，也就是說你需要運行babel-node server.js來啟動應用。

現(xiàn)在你應該可以看到終端輸出“Express server listening on port 3000.”