- import React from 'react'
- import path from
- 'path'
- import ReactDOMServer from
- 'react-dom/server'
- import { Provider } from
- 'react-redux'
- import createStore from
- '../common/store'
- import App from
- '../common/container'
- /************ 这部分代码参考自webpack-dev-middleware的官方文档 ************/
- var
- express = require("express"
- );
- var
- webpackDevMiddleware = require("webpack-dev-middleware"
- );
- var
- webpack = require("webpack"
- );
- var
- webpackConfig = require('../../webpack.config.js'
- );
- var
- app =
- express();
- var
- compiler =
- webpack(webpackConfig);
- app.use(webpackDevMiddleware(compiler, {
- // 这个publicPath参数要和webpack.config.js的`output.publicPath`参数保持一致
- publicPath:webpackConfig.output.publicPath
- }));
- /************ 这部分代码参考自webpack-dev-middlemare的官方文档 ************/
- //链接
- https://webpack.js.org/guides/development/#webpack-dev-middleware
- /*
- renderFullPage函数,渲染完整的首屏可视页面(这个页面渲染完毕后将被发送到客户端)
- 第一个参数是被转成字符串的APP,要将其插入入口HMTL文件中
- 第二个参数是初始化的state,将其放入window对象中以便在发送到客户端后能通过window.__INITIAL_STATE__取用
- */
- const renderFullPage
- = (html, preloadState) =>
- {
- return
- `
- window.__INITIAL_STATE__ =${JSON.stringify(preloadState)}
- ${html}
- `
- }
- const handleRender
- = (req, res) =>
- {
- // 初始化store,有两个作用:1.放入Provider的store属性中 2. 通过store.getState()获取初始化的state
- const store =
- createStore()
- // 将APP转成字符串
- const html = ReactDOMServer.renderToString(
- )
- // 取得初始化的state
- const preloadState =
- store.getState()
- // 将渲染完整的首屏可视页面(字符串)发送到客户端显示
- res.send(renderFullPage(html, preloadState))
- }
- // 注册中间件函数,每当从客户端接收到请求的时候,运行handleRender函数
- app.use(handleRender)
- // 监听3000端口
- app.listen(3000, (error) =>
- {
- if (error) {
- console.error(error)
- }
- })
来源: http://www.cnblogs.com/penghuwan/p/7126054.html