How Can I render my react components on the server without heavily modifying my existing app?
Question
My server.js file is written in node and looks like this:
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);
}
});
My index.html looks like this:
<!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>
My index.js file which includes my react router code looks like this:
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'));
I am using webpack to build and include assets like sass and images. I was able to use this tutorial to render a single page via the server, but it appeared with no css and images and it also appears to completely change the flow of the app in a way that doesn't seem good. Any examples of light weight simple apps not using 800000 different libraries that render on the server?
2 answers
solution1
1 2016-05-10 09:30:56
The main problem is Node doesn't know how to handle requiring your non js / json assets.
One solution supported out of the box by Webpack is to use target: 'node' and output.libraryTarget: commonjs2 which will generate a bundle ready to be require d in Node.
You'll also want to look at the ExtractTextPlugin to extract your CSS into a separate file, otherwise html will render un-styled until the JS has downloaded.
It get's a little more complicated when using React Router but there's some good documentation here - https://github.com/reactjs/react-router/blob/master/docs/guides/ServerRendering.md
solution2
0 2016-05-10 05:02:54
I was looking for similar thing and found this blog useful. You should try following it too, it will be easy to setup, and get started with. Server side rendering with react, node & express
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.