如何在服务器上呈现我的反应组件而不用大量修改现有的应用程序？
我的server.js文件是写在节点上，如下所示：
var path = require('path'); var express = require('express'); var app = express(); var PORT = process.env.PORT || 8080 // using webpack-dev-server and middleware in development environment if(process.env.NODE_ENV !== 'production') { var webpackDevMiddleware = require('webpack-dev-middleware'); var webpackHotMiddleware = require('webpack-hot-middleware'); var webpack = require('webpack'); var config = require('./webpack.config'); var compiler = webpack(config); app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath })); app.use(webpackHotMiddleware(compiler)); } app.use(express.static(path.join(__dirname, 'dist'))); app.get('*', function(request, response) { response.sendFile(__dirname + '/dist/index.html') }); app.listen(PORT, function(error) { if (error) { console.error(error); } else { console.info("Listening on port %s", PORT); } }); 我的index.html如下所示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>what ever</title> <link href="https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" media="screen" title="no title" charset="utf-8"> </head> <body> <div id='root'/> </body> <script src="/bundle.js"></script> </html>
我的index.js文件包含了我的反应路由器代码，如下所示：
import React from 'react'; import { render } from 'react-dom'; import { Router, Route, browserHistory, hashHistory } from 'react-router'; /*----------- STYLESHEETS -----------*/ require('./assets/stylesheets/base.scss'); let history = process.env.NODE_ENV === "production" ? browserHistory : hashHistory; /*----------- ROUTE COMPONENTS -----------*/ import Home from './components/home'; import Company from './components/company'; import Features from './components/features'; import Help from './components/help'; import SignUp from './components/signup'; import Work from './components/work'; render(( <Router history={history}> {/** ###### HOME ROUTE ###### */} <Route path="/" component={Home} /> <Route path="/company" component={Company} /> <Route path="/help" component={Help} /> <Route path="/features" component={Features} /> <Route path="/signup" component={SignUp} /> <Route path="/work" component={Work} /> {/** ###### END HOME ROUTES ###### */} </Router> ), document.getElementById('root'));
我正在使用webpack来构build和包含sass和图像等资源。 我能够使用这个教程来通过服务器渲染一个页面，但是它没有出现css和图像，它似乎也以一种看起来不太好的方式完全改变了应用程序的stream程。 轻量级的简单应用程序的任何例子不使用800000不同的库，在服务器上呈现？
主要的问题是Node不知道如何处理需要你的非js / json资源。
Webpack开箱即用的解决scheme之一就是使用target: 'node'和output.libraryTarget: commonjs2 ，它将在Node中生成一个准备好require的包。
您还需要查看ExtractTextPlugin以将您的CSS 解压缩到单独的文件中，否则，html将呈现非样式，直到JS已经下载。
使用React Router的时候会稍微复杂些，但是这里有一些很好的文档 – https://github.com/reactjs/react-router/blob/master/docs/guides/ServerRendering.md
我正在寻找类似的东西，发现这个博客有用。 你也应该尝试跟随它，这将很容易设置，并开始使用。 服务器端渲染与反应，节点和expression