React Webpackプロジェクトへのフックアップ

Reactプロジェクトにexpressを追加して、フォーム情報を格納するデータベースへの接続を開始しようとしています。私はこれを設定する方法がかなり失われています。現在私はwebpackを使用していて、Reactビューをレンダリングするdevサーバを作成しています。私のスタックは次のように見えます。React Webpackプロジェクトへのフックアップ

Webpack - React - Babel - SASS。

React Routerは現在、自分のページへのすべてのナビゲーションリンクを処理しています。私はそれを私のローカルホスト上で実行する方法をほとんど実行しています。だから今私は連絡先のフォームデータを処理し、私がプロジェクト用に作成したmongoDBに入れる方法を見つけなければなりません。過去に私はエクスプレスw/handlebars & mongooseをmongoDBに接続するアプリケーションを作ったので、私はプロジェクトにexpressを追加できると思った！私はリアクションアプリにサーバを接続する方法と、webpack-dev-serverとどうやって衝突するのか、何が分からないのかを知りません。

express-react-router-views express mongooseをインストールしました。基本的に何か私は自分のサーバーを稼働させる必要があると思っていました。

誰かが私のReactプロジェクト（ルート）をエクスプレスサーバーにリンクする方法を知っていますか？

私のレイアウトwebpackはJSXをすべて取り出し、新しいindex.htmlとbundle.jsを持つパブリックフォルダ内のバンドルに吐き出します。他のすべてのもの（コンポーネント、ルーター、サス）は私のappフォルダの中にあります。これまで私はアプリケーションフォルダ内にサーバーフォルダを作成していました（外部にあるはずですか？）、server.jsファイルを作成しました。今私はこれを全部引っ張る方法がかなり失われています。ファイルwebpack.config.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); 
});

...

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' 
      }] 
    } 
};

出典

2016-12-13 user3622460

WebPACKのワット/ Expressを使用してのように私は2台のlocalhostsサーバ私のウェブサイトに終わるだろうと思われる - 私に混乱しています – user3622460