React + Express - 在开发过程中代替/构建什么

我使用create-react-app来初始化我的React应用程序，现在我正在从Express服务器提供React客户端应用程序。React + Express - 在开发过程中代替/构建什么

我的应用程序结构

project/ 
    build/ 
    server/ 
    src/

在我的Express服务器是server/，我作出反应的应用程序是在src/，并作出反应的应用程序被内置到build/与npm run build。

因为我的快递服务应用程序的“内置”应用程序（如下图所示，服务从build/目录中的文件），我需要npm run build每次我改变任何客户端代码的时候，为了让我的浏览器以反映更改。

// server/app.js 

const express = require('express'); 
const path = require('path'); 


const app = express(); 
var server = require('http').Server(app); 
var io = require('socket.io')(server); 


// Serve static assets 

app.use(express.static(path.resolve(__dirname, '..', 'build'))); 


// sockets 

require('./sockets')(io); 


// serve main file 

app.get('*', (req, res) => { 
    res.sendFile(path.resolve(__dirname, '..', 'build', 'index.html')); 
}); 


module.exports = server;

由于构建步骤需要多少秒，这显然是从何时只是react-scripts start服务的应用程序做出反应，并让它监视代码更改，并立即在浏览器中反映他们的一大步了。

我知道我可以使用NODE_ENV === 'production'检查，如果我在生产或开发，但由于我在发展，到哪里都是我应该服务的，而不是在build/的那些文件？

I.e.或许一个相关的问题是“当我运行与react-scripts start的React服务器时，它们从哪里服务？”？编辑：他们如何被观看，以便建立源文件到那个地方是非常快？

来源

2017-03-26 tscizzle

这不是真的回答这个问题，但我意识到绕过这个问题是我只想添加Express应用程序来服务于其他目的（例如处理套接字通信），它并不重要为React应用程序本身提供服务。因此，如果块（isProduction基于NODE_ENV），则将'//服务静态资产'和'//服务主文件'部分放在'isProduction'中;在开发中，我将有2台服务器运行，React dev服务器和Express服务器和客户端将除index.html的最初请求之外的所有请求改为Express服务器。 – tscizzle

大多数反应样板使用[webpack开发服务器/ browserify] +在开发模式下热重新加载，所以您的更改（和只有您的更改）在飞行中编译和浏览器刷新一个观察。

它基本上是你插上来表达这样的

var compiler = webpack(webpackConfig) 

var devMiddleware = require('webpack-dev-middleware')(compiler, { 
publicPath: webpackConfig.output.publicPath, 
quiet: true 
}) 
app.use(devMiddleware)

它的引擎盖下做你的情况中间件，文件将被写入到内存中。

来源

2017-03-27 10:25:48

React + Express - 在开发过程中代替/构建什么

回答

相关问题