[英]ReactJS server side rendering with hot reloading (webpack-dev-server)
我正在嘗試使用ReactJS構建我的第一個服務器端渲染。 我已經從Redux教程中獲得了代碼
運行npm start
( webpack && node server.js
)時,應用程序運行正常。
我想使用熱重裝能夠在開發環境上進行應用程序快速調試。 因此,我在npm配置中添加了start
選項( webpack-dev-server --inline --hot
)。 注意,我沒有index.html文件,因為react-router正在選擇要加載的正確JSX文件。
npm start打開我的公用文件夾並顯示文件,但不啟動我的應用程序。 通常,我會單擊index.html文件,但沒有任何文件。
我不明白發生了什么,也不知道如何解決。 幫助表示贊賞。
的package.json:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.prod.js -p",
"start": "webpack-dev-server --inline --hot",
"dev": "webpack && node server.js"
},
webpack.config.js:
module.exports = {
entry: './client.js',
output: {
filename: 'bundle.js',
path: __dirname + '/public'
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0']
}
}
]
}
};
server.js
require('babel-register')({
presets: ['react', 'es2015', 'stage-0']
});
var express = require('express');
var config = require('config');
var app = express();
var serverConfig = config.get('serverConfig');
app.use(express.static('public'));
app.use(require('./routes/index.jsx'));
app.listen(serverConfig.port, function () {
console.log('FactoryWays server running on port ' + serverConfig.port);
console.log('Press CTRL-C to stop the server.');
});
client.js
var ReactDOM = require('react-dom');
var React = require('react');
var routes = require('./routes/routes.jsx');
var Redux = require('redux');
var Provider = require('react-redux').Provider;
function reducer(state) { return state; }
var store = Redux.createStore(reducer, window.PROPS);
ReactDOM.render(
<Provider store={store}>
{routes}
</Provider>, document
);
路線/ index.jsx:
var router = require('express').Router();
var React = require('react');
var ReactDOMServer = require('react-dom/server');
var ReactRouter = require('react-router');
var Redux = require('redux');
var Provider = require('react-redux').Provider;
function reducer(state) { return state; }
router.get('*', function(request, response) {
var initialState = { title: 'Universal React' };
var store = Redux.createStore(reducer, initialState);
ReactRouter.match({
routes: require('./routes.jsx'),
location: request.url
}, function(error, redirectLocation, renderProps) {
if (renderProps) {
var html = ReactDOMServer.renderToString(
<Provider store={store}>
<ReactRouter.RouterContext {...renderProps} />
</Provider>
);
response.send(html);
} else {
response.status(404).send('Not Found');
}
});
});
module.exports = router;
路線/ routes.jsx:
var React = require('react');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var IndexRoute = ReactRouter.IndexRoute;
var browserHistory = ReactRouter.browserHistory;
module.exports = (
<Router history={browserHistory}>
<Route path='/' component={require('../views/Layout.jsx')}>
<IndexRoute component={require('../views/Index.jsx')} />
</Route>
</Router>
);
意見/ Layout.jsx:
var React = require('react');
var Link = require('react-router').Link;
var connect = require('react-redux').connect;
var Layout = React.createClass({
_handleClick: function() {
alert();
},
render: function() {
var custom = this.props.custom;
return (
<html>
<head>
<title>{custom.title}</title>
<link rel='stylesheet' href='/style.css' />
</head>
<body>
<h1>{custom.title}</h1>
<p>Isn't server-side rendering remarkable?</p>
<button onClick={this._handleClick}>Click Me</button>
{this.props.children}
<ul>
<li>
<Link to='/'>Home</Link>
</li>
<li>
<Link to='/about'>About</Link>
</li>
</ul>
<script dangerouslySetInnerHTML={{
__html: 'window.PROPS=' + JSON.stringify(custom)
}} />
<script src='/bundle.js' />
</body>
</html>
);
}
});
var wrapper = connect(
function(state) {
return { custom: state };
}
);
module.exports = wrapper(Layout);
注意,我沒有index.html文件,因為react-router正在選擇要加載的正確JSX文件
如果您正在運行webpack-dev-server
則仍然需要一個。
Webpack用於將JavaScript捆綁在一起。 而已。 就您而言(基於webpack.config.js
文件),它將在您的public
目錄中輸出bundle.js
文件。
Webpack Dev Server是一個簡單的靜態文件服務器,有助於開發。 它對server.js
的服務器配置一無所知。
package.json中的兩個命令需要不同的設置:
npm start
npm start
運行webpack-dev-server
。 默認情況下, webpack-dev-server
將提供當前目錄的內容,因此您需要將index.html
放在項目的根目錄中。 index.html
的內容很簡單:只是樣板HTML,其中包含鏈接到bundle.js
文件的script
標簽。
npm dev
但是,當您運行npm dev
時,您正在滾動自己的服務器,該服務器在server.js
定義。 在這種情況下,它被配置為為您生成並提供index.html
(以及您需要的所有其他靜態文件)。
如果要進行熱重裝並運行自己的服務器,可以將webpack-dev-middleware添加到Express服務器。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.