第一步：新建Express项目

第一步：新建Express项目

创建一个新目录newedenfaces，进入目录并创建两个空文件 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"
}

这是我们的应用所需要的所有依赖包，简要介绍如下：

包名称	描述
alt	React的Flux实现
async	异步流程控制
babel	ES6转换为ES5
body-parser	渲染POST请求数据
colors	美化控制台输出结果
compression	Gzip压缩
express	Node.js Web框架
mongoose	MongoDB ODM
morgan	HTTP请求日志
react	React框架
react-router	React路由库
request	HTTP请求库
serve-favicon	提供favicon.png
socket.io	显示有多少用户在线
swig	渲染HTML
underscore	JS辅助库
xml2js	将XML渲染为JSON

在终端输入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，因为这段代码从两年前到现在基本没有变过。并且，如果你第一次使用ES6，至少这个Express app对你来说还算熟悉。

然后，新建文件夹public，这里是我们放文件如图片、字体，以及压缩后的CSS和JS文件。

现在你可以在终端输入npm start启动应用，确保Express app没有问题。

注意：你现在可以使用node server.js来直接启动应用，但之后我们将使用Babel来预编译文件，也就是说你需要运行babel-node server.js来启动应用。

现在你应该可以看到终端输出“Express server listening on port 3000.”