react + express 创建工程

react是前端主流框架, 但是缺乏后端, 目前后端常用的是express, 但是没有脚手架把他们结合起来.

先来看看原生的express工程.

原生expres工程

1. 安装 express 和 express-generator

npm install -g express express-generator

2. 创建工程

$ express

这样创建出来的工程前端模板是ejs或jade, 都不主流.  我们看看react

 

创建react+express工程

1. 创建react工程

create-react-app ex-act

 

2. 安装express

npm install express --save

 

3. 添加express.js

内容如下

const express = require('express')
const path = require('path')
const apiRouter = require('./routes/api')

const app = express()

app.use(express.static(path.join(__dirname, 'build')))
app.use('/api', apiRouter)

app.listen(8080)

创建routes/api.js 用于放置api请求代码

var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});

module.exports = router;

 

4. 添加proxy和concurrently

npm install proxy concurrently --save-dev

在package.json里面添加proxy, 告诉react需要的api地址.

"proxy": "http://localhost:8080"

配置concurrently同时启动前端后端.

"scripts": {
 "client": “ npm start",
 "server": “node  express.js",
 "dev": “concurrently \"npm run server\" \"npm run client\""
 },