我正在使用create-react-app工具构建我的第一个React应用程序，其中包含react-routes，现在我想使用服务器端渲染来避免一次性加载所有页面。
我按照指南安装了express.js，并使用.js文件将客户端和服务器端分离，并运行它：
NODE_ENV=production babel-node --presets 'react,es2015' src/server.js
当应用程序尝试编译sass @import语句时，我会收到错误提示。我认为我必须先提供资产，但我不知道如何在server.js逻辑中插入webpack函数。
create-react-app还有一个npm运行构建命令，用于生产构建并创建js和css文件，因此可能有一些方法可以在编译server.js时跳过资产部分。
Server.js文件内容：
import path from 'path';
import { Server } from 'http';
import Express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { match, RouterContext } from 'react-router';
import routes from './routes';
import NoMatch from './pages/NoMatch';
// initialize the server and configure support for ejs templates
const app = new Express();
const server = new Server(app);
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
// define the folder that will be used for static assets
app.use(Express.static(path.join(__dirname, 'static')));
// universal routing and rendering
app.get('*', (req, res) => {
match(
{ routes, location: req.url },
(err, redirectLocation, renderProps) => {
// in case of error display the error message
if (err) {
return res.status(500).send(err.message);
}
// in case of redirect propagate the redirect to the browser
if (redirectLocation) {
return res.redirect(302, redirectLocation.pathname + redirectLocation.search);
}
// generate the React markup for the current route
let markup;
if (renderProps) {
// if the current route matched we have renderProps
markup = renderToString(<RouterContext {...renderProps}/>);
} else {
// otherwise we can render a 404 page
markup = renderToString(<NoMatch/>);
res.status(404);
}
// render the index template with the embedded React markup
return res.render('index', { markup });
}
);
});
// start the server
const port = process.env.PORT || 3000;
const env = process.env.NODE_ENV || 'production';
server.listen(port, err => {
if (err) {
return console.error(err);
}
console.info(`Server running on http://localhost:${port} [${env}]`);
});