Skip to content

Instantly share code, notes, and snippets.

Last active August 29, 2015 14:10
Show Gist options
  • Save irvinebroque/3e5de38acf0dba9cc1ab to your computer and use it in GitHub Desktop.
Save irvinebroque/3e5de38acf0dba9cc1ab to your computer and use it in GitHub Desktop.
Server-side React-Router v0.11 + React-Hot-Loader
// This little dev server is basically a wrapped express server that 'hot loads' our javascript for super fancy and fast live reload in development
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');
var port = process.env.HOT_LOAD_PORT || 3001;
new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath,
hot: true
}).listen(port, 'localhost', function (err, result) {
if (err) {
console.log('Listening at localhost:' + port);
// Use JSX on the server
require('node-jsx').install({extension: '.js'})
// Pulls in environment variables from a .env file. Will need something better here when we go to production.
var dotenv = require('dotenv');
// Stupid simple server
var express = require('express');
// For dealing with cross-origin stuff.
var cors = require('cors');
// Use React on the server
var React = require('react');
// Route config
var routes = require('./routes');
// Head
var Head = React.createFactory(require('./components/Head'));
// Require React-Router
var Router = require('react-router');
var Route = Router.Route;
var NotFoundRoute = Router.NotFoundRoute;
var DefaultRoute = Router.DefaultRoute;
var Link = Router.Link;
var RouteHandler = Router.RouteHandler;
// Setup the express server
var server = express();
// Serves up a static directory for the webpack-compiled Javascript and CSS
server.use('/build', express.static(__dirname + '/build'));
// Serves up a static directory for images and other assets that we don't (yet) require via Webpack
server.use('/static', express.static(__dirname + '/static'));
// Cross-origin resource sharing
// Our handler for all incoming requests
server.use(function (req, res, next) {
// Head is treated as a special component that we only render server-side.
var head = React.renderToStaticMarkup(Head());
// Run react-router on the server, req.path, function (Handler) {
// Content is the route handler, which then handles all the routing and kicks back HTML with React.renderToString
var content = React.renderToString(React.createElement(Handler, null), null);
// In development, the compiled javascript is served by a WebpackDevServer, which lets us 'hot load' scripts in for live editing.
if (process.env.NODE_ENV === "development") {
res.write('<script src="http://localhost:3001/build/js/client.js" defer></script>');
// In production, we just serve the pre-compiled assets from the /build directory
if (process.env.NODE_ENV === "production") {
res.write('<script src="/build/js/client.js" defer></script>');
var port = process.env.PORT || 3000;
console.log('server.js is listening on port ' + port);
'use strict';
var webpack = require('webpack');
module.exports = {
cache: true,
resolve: {
extensions: ['', '.js', '.jsx']
entry: [
output: {
path: __dirname+'/build/js',
filename: 'client.js',
publicPath: '/build/js'
plugins: [
new webpack.HotModuleReplacementPlugin()
module: {
loaders: [
{ test: /\.js$/, loaders: ['react-hot', 'jsx'] }
Copy link

Moved this into a repository here:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment