React + Express - 開発時に/ buildの代わりに提供するもの

Question

create-react-appを使用してReactアプリケーションを初期化しました。これで、ExpressクライアントからReactクライアントアプリケーションを提供しています。

マイアプリの構造は、私エクスプレスサーバがserver/である

project/ 
    build/ 
    server/ 
    src/ 

で、アプリがsrc/であり、そしてアプリはnpm run buildでbuild/に構築されますリアクトリアクトMY。

私のExpressアプリケーションは（下に示すように）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'を使用できますか？

I.e.関連する質問は、「react-scripts startのReactサーバーを実行すると、どこから提供されているのですか」という疑問がありますか？編集：どのようにその場所にソースファイルを構築することが非常に迅速なように彼らは監視されていますか？

Answer 1

ほとんどの回答ボイラープレートは、[webpack dev server/browserify] +ホットリロードをdevモードで使用しているので、あなたの変更（および変更のみ）はオンザフライでコンパイルされ、ブラウザはウォッチャーによってリフレッシュされます。

それは基本的にあなたがそれはあなたの場合にはボンネットの下に行われていますその

var compiler = webpack(webpackConfig) 

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

のように表現するためにプラグミドルウェアですが、ファイルがメモリに書き込まれます。