paypal · samsel · Oct 18, 2015 · Oct 18, 2015 · Oct 18, 2015 · samsel
diff --git a/README.md b/README.md
@@ -75,11 +75,12 @@ The options object can contain properties from [react router's create configurat
 
 Additionally, it can contain the following **optional** properties,
 
-- `routesFilePath`: <String> - path for the file that contains the react router routes.
+- `routesFilePath`: \<String> - path for the file that contains the react router routes.
                    react-engine uses this behind the scenes to reload the routes file in
                    cases where [express's app property](http://expressjs.com/api.html#app.set) `view cache` is false, this way you don't need to restart the server every time a change is made in the view files or routes file.
-- `renderOptionsKeysToFilter`: <Array> - an array of keys that need to be filtered out from the data object that gets fed into the react component for rendering. [more info](#data-for-component-rendering)
-- `performanceCollector`: <Function> - to collects [perf stats](#performance-profiling)
+- `renderOptionsKeysToFilter`: \<Array> - an array of keys that need to be filtered out from the data object that gets fed into the react component for rendering. [more info](#data-for-component-rendering)
+- `performanceCollector`: \<Function> - to collects [perf stats](#performance-profiling)
+- `page404`: \<Function> - This option allows you to define a custom 404 page when a URL is not matched in your routes. If left undeclared, a default 404 page, interally provided by this library, is rendered.
 
 ###### Rendering views on server side
 ```js

diff --git a/examples/edge/index.js b/examples/edge/index.js
@@ -27,7 +27,8 @@ var app = express();
 // create the view engine with `react-engine`
 var engine = renderer.server.create({
   routes: require(path.join(__dirname, '/public/routes.jsx')),
-  routesFilePath: path.join(__dirname, '/public/routes.jsx')
+  routesFilePath: path.join(__dirname, '/public/routes.jsx'),
+  page404: require(path.join(__dirname, '/public/views/404.jsx'))
 });
 
 // set the engine
@@ -69,14 +70,6 @@ app.use('/', function(req, res, next) {
   next();
 });
 
-// 404 template
-app.use(function(req, res) {
-  res.render('404', {
-    title: 'React Engine Express Sample App',
-    url: req.url
-  });
-});
-
 var server = app.listen(3000, function() {
 
   var host = server.address().address;

diff --git a/examples/edge/public/views/account.jsx b/examples/edge/public/views/account.jsx
@@ -25,9 +25,11 @@ export default React.createClass({
       <div id='account'>
         <h1>{this.props.name}</h1>
         <h6>I am a React Router rendered view</h6>
-        <a href='/some_unknown'>Click to go to an unhandled route</a>
-        <a href='/messages'>Messages</a>
-        <a href='/mymessages'>Redirects to /messages</a>
+        <ul>
+          <li><a href='/some_unknown'>Click to go to an unhandled route</a></li>
+          <li><a href='/messages'>Messages</a></li>
+          <li><a href='/mymessages'>Redirects to /messages</a></li>
+        </ul>
       </div>
     );
   }

diff --git a/lib/server.js b/lib/server.js
@@ -41,6 +41,8 @@ var TEMPLATE = ['<script id="%s" type="application/javascript">var ',
               ].join('');
 var TEMPLATE_REDIRECT = '<html><head><meta http-equiv="refresh" content="0;URL=\'%s\'" /></head></html>';
 
+var Default404 = require('./views/Page404');
+
 exports.create = function create(createOptions) {
 
   createOptions = createOptions || {};
@@ -72,6 +74,7 @@ exports.create = function create(createOptions) {
         // remove all the files under the express's view folder from require cache.
         // Helps in making changes to react views without restarting the server.
         util.clearRequireCache(createOptions.routesFilePath);
+        util.clearRequireCache(createOptions.page404);
         util.clearRequireCacheInDir(options.settings.views, options.settings['view engine']);
       }
 
@@ -146,6 +149,10 @@ exports.create = function create(createOptions) {
             //res.send(404, 'Not found');
           } else {
             debug('server.js match 404 %s', renderProps);
+
+            var component = React.createFactory(createOptions.page404 || Default404);
+
+            return done(null, renderAndDecorate(component(data), data, html));
           }
         });
       } else {

diff --git a/lib/views/Page404.js b/lib/views/Page404.js
@@ -0,0 +1,30 @@
+'use strict';
+
+var React = require('react');
+
+module.exports = React.createClass({
+
+  render: function render() {
+
+    return React.createElement(
+      'html',
+      null,
+      React.createElement(
+        'head',
+        null,
+        React.createElement('meta', {
+          charSet: 'utf-8'
+        })
+      ),
+      React.createElement(
+        'body',
+        null,
+        React.createElement(
+          'h1',
+          null,
+          '404 Page Not Found'
+        )
+      )
+    );
+  }
+});
diff --git a/test/fixtures/assertions.json b/test/fixtures/assertions.json
@@ -1,5 +1,7 @@
 {
   "PROFILE_OUTPUT": "<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>Hello, world!</title></head><body><div id=\"profile\"><h1>Joshua</h1></div><script id=\"react-engine-props\" type=\"application/javascript\">var __REACT_ENGINE__ = {\"__meta\":{\"view\":\"profile.js\",\"markupId\":\"react-engine-props\"},\"title\":\"Hello, world!\",\"name\":\"Joshua\",\"cache\":false};</script></body></html>",
   "PROFILE_OUTPUT_WITH_REACT_ATTRS": "<!DOCTYPE html><html data-reactid=\".2eb4mptwtts\" data-react-checksum=\"-636849162\"><head data-reactid=\".2eb4mptwtts.0\"><meta charset=\"utf-8\" data-reactid=\".2eb4mptwtts.0.0\"/><title data-reactid=\".2eb4mptwtts.0.1\">Hello, world!</title></head><body data-reactid=\".2eb4mptwtts.1\"><div id=\"profile\" data-reactid=\".2eb4mptwtts.1.0\"><h1 data-reactid=\".2eb4mptwtts.1.0.0\">Joshua</h1></div><script id=\"react-engine-props\" type=\"application/javascript\">var __REACT_ENGINE__ = {\"__meta\":{\"view\":\"profile.js\",\"markupId\":\"react-engine-props\"},\"title\":\"Hello, world!\",\"name\":\"Joshua\",\"cache\":false};</script></body></html>",
-  "ACCOUNT_OUTPUT": "<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>Hello, world!</title></head><body><div id=\"account\"><h1>Joshua</h1></div><script id=\"react-engine-props\" type=\"application/javascript\">var __REACT_ENGINE__ = {\"__meta\":{\"view\":null,\"markupId\":\"react-engine-props\"},\"title\":\"Hello, world!\",\"name\":\"Joshua\",\"cache\":false};</script></body></html>"
+  "ACCOUNT_OUTPUT": "<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>Hello, world!</title></head><body><div id=\"account\"><h1>Joshua</h1></div><script id=\"react-engine-props\" type=\"application/javascript\">var __REACT_ENGINE__ = {\"__meta\":{\"view\":null,\"markupId\":\"react-engine-props\"},\"title\":\"Hello, world!\",\"name\":\"Joshua\",\"cache\":false};</script></body></html>",
+  "DEFAULT404_OUTPUT": "<!DOCTYPE html><html><head><meta charset=\"utf-8\"></head><body><h1>404 Page Not Found</h1><script id=\"react-engine-props\" type=\"application/javascript\">var __REACT_ENGINE__ = {\"__meta\":{\"view\":null,\"markupId\":\"react-engine-props\"},\"title\":\"Hello, world!\",\"name\":\"Joshua\",\"cache\":false};</script></body></html>",
+  "CUSTOM404_OUTPUT": "<!DOCTYPE html><html><head><meta charset=\"utf-8\"></head><body><h1><span>Custom 404 Page Not Found - Sorry</span><span>Joshua</span></h1><script id=\"react-engine-props\" type=\"application/javascript\">var __REACT_ENGINE__ = {\"__meta\":{\"view\":null,\"markupId\":\"react-engine-props\"},\"title\":\"Hello, world!\",\"name\":\"Joshua\",\"cache\":false};</script></body></html>"
 }
diff --git a/test/fixtures/views/page404.js b/test/fixtures/views/page404.js
@@ -0,0 +1,31 @@
+'use strict';
+
+var React = require('react');
+
+module.exports = React.createClass({
+
+  render: function render() {
+
+    return React.createElement(
+      'html',
+      null,
+      React.createElement(
+        'head',
+        null,
+        React.createElement('meta', {
+          charSet: 'utf-8'
+        })
+      ),
+      React.createElement(
+        'body',
+        null,
+        React.createElement(
+          'h1',
+          null,
+          'Custom 404 Page Not Found - Sorry',
+          this.props.name
+        )
+      )
+    );
+  }
+});
diff --git a/test/server.js b/test/server.js
@@ -297,3 +297,50 @@ test('all keys in express render `renderOptionsKeysToFilter` should be used to f
   };
   setup(options);
 });
+
+test('route not found and a default 404 is rendered', function(t) {
+
+  var options = {
+    engine: renderer.create({
+      routes: require(path.join(__dirname + '/fixtures/reactRoutes'))
+    }),
+    expressRoutes: function(req, res) {
+      res.render(req.url, DATA_MODEL);
+    },
+
+    onSetup: function(done) {
+      inject('/nonexistentpath', function(err, data) {
+        t.error(err);
+        var $ = cheerio.load(data);
+        $('*').removeAttr('data-reactid').removeAttr('data-react-checksum');
+        t.strictEqual($.html(), assertions.DEFAULT404_OUTPUT);
+        done(t);
+      });
+    }
+  };
+  setup(options);
+});
+
+test('route not found and a custom 404 is rendered with data', function(t) {
+
+  var options = {
+    engine: renderer.create({
+      routes: require(path.join(__dirname + '/fixtures/reactRoutes')),
+      page404: require(path.join(__dirname + '/fixtures/views/page404'))
+    }),
+    expressRoutes: function(req, res) {
+      res.render(req.url, DATA_MODEL);
+    },
+
+    onSetup: function(done) {
+      inject('/nonexistentpath', function(err, data) {
+        t.error(err);
+        var $ = cheerio.load(data);
+        $('*').removeAttr('data-reactid').removeAttr('data-react-checksum');
+        t.strictEqual($.html(), assertions.CUSTOM404_OUTPUT);
+        done(t);
+      });
+    }
+  };
+  setup(options);
+});