How Can I render my react components on the server without heavily modifying my existing app? - Twitter bootstrap

AndrewFont
May 3, 2016
145 views
0 votes
2 Answers

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?

Answers

- MuhammadFaizan
- May 10, 2016 at 7:02 am
- 0 votes
0
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

Login or Signup to reply.

- RichardScarrott
- May 10, 2016 at 11:30 am
- 0 votes
0
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 required 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

Login or Signup to reply.