javascript - 将 Express 连接到 React webpack 项目

Question

我正在尝试将 Express 添加到我的 React 项目中，以便开始连接到数据库来存储表单信息。我非常不知道如何设置它。目前我正在使用 webpack 并创建一个开发服务器来渲染我的 React View 。我的堆栈看起来像...

Webpack - React - Babel - SASS。

React Router 目前正在处理我的页面的所有导航链接，并且它几乎按照我希望的方式在本地主机上运行。所以现在我必须找到一种方法来处理联系人表单数据并将其放入我为该项目创建的 mongoDB 中。过去我制作了一个使用express w/handlebars & mongoose连接到mongoDB的应用程序，所以我想让我们将express添加到项目中!我只是不知道如何将服务器连接到我的 React 应用程序中，以及它将如何与 webpack-dev-server 发生冲突等等。

我安装了express-react-router-views express mongoose - 基本上是我认为我可能需要启动并运行我的服务器的任何东西。

有人知道如何将我的 React 项目(路由)链接到 Express 服务器吗？

我的 webpack 布局获取了所有 JSX 并将其放入公共(public)文件夹中的一个包中，其中包含新的 index.html 和 bundle.js。其他所有内容(组件、路由器、sass)都位于我的应用程序文件夹中。到目前为止，我在应用程序文件夹内创建了一个服务器文件夹(应该在外面吗？)并创建了一个 server.js 文件。现在我完全不知道如何将这一切连接起来。

server.js 文件

import express from 'express';
import { Router, Route, Redirect, IndexRoute, Link, hashHistory } from 'react-router'; 
import ExpressReactRouter from 'express-react-router-views';
import routes from '../utils/Routes.js';


var express = require('express');

var app = express();
// Set the engine as .jsx or .js
app.engine('.jsx', ExpressReactRouter.engine({
  routes: routes
}));

// Set the view engine as jsx or js
app.set('view engine', 'jsx');

// Set the custom view
app.set('view', ExpressReactRouter.view);

app.get('/public/', function(req, res) {
  // You can replace req.url with the view path that you've set on the routes file
  res.render(req.routes);
});

webpack.config.js 文件...

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');


var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry: [
    './app/App.js'
  ],
  output: {
    path: __dirname + '/public',
    filename: "bundle.js"
  },
  plugins: [HTMLWebpackPluginConfig],
  devServer: {
       inline:true,
       contentBase: './public',
       port: 3333
     },
  module: {
    loaders: [{ 
         test: /\.js$/, 
         exclude: /node_modules/, 
         loader: "babel-loader"
      },
        {
              test: /\.scss$/,
              loader: 'style!css!sass'
            }]
  }
};

Answer 1

您可以使用“react-router”中的匹配功能，它可以帮助您在服务器端使用您的 react 路由。请看一下这个项目，我认为如何使用它非常清楚。

https://github.com/erikras/react-redux-universal-hot-example/blob/master/src/server.js#L84