Merge pull request #159 from remarkablemark/master

Update example app with 404 and 500

Author: samsel

example/Readme.md

@@ -13,7 +13,7 @@ This movie catalog app illustrates the usage of react-engine to build and run an
 ```shell
 # cd `into_this_dir`
 $ npm install
-$ npm start
+$ npm start # or `npm run dev`
 $ open http://localhost:3000
 ```
 
@@ -202,7 +202,7 @@ $ open http://localhost:3000
     res.render(req.url, {
       movies: require('./movies.json')
     });
-  });  
+  });
 
   // add the error handler middleware
   app.use(function(err, req, res, next) {
@@ -224,7 +224,7 @@ $ open http://localhost:3000
       // any other error we just send the error message back
       return res.status(500).send(err.message);
     }
-  });  
+  });
 
   // the last step in the server side is to configure the express app to listen on port 3000
   app.listen(3000, function() {
@@ -243,7 +243,7 @@ $ open http://localhost:3000
   # 2. json-loader for webpack to load json files
   $ npm install babel-loader json-loader --save
 
-  # next, add a webpack configuration file  
+  # next, add a webpack configuration file
   $ touch webpack.config.js
 
   # configure webpack to build a bundle.js file using public/index.js as the main file
@@ -299,6 +299,3 @@ $ open http://localhost:3000
   $ touch public/styles.css
   # copy the contents for this file from http://bit.ly/1m2co1B
 ```
-
-### to-do
-* add support for [404 and 500 pages](https://github.com/samsel/react-engine/tree/9666fb3bf47f29981dbdcb4160445e3efce67b5c/example/old/public/views)

example/package.json

@@ -3,7 +3,8 @@
   "version": "1.0.0",
   "main": "index.js",
   "scripts": {
-    "start": "webpack && node index.js"
+    "start": "webpack && node index.js",
+    "dev": "webpack -w & nodemon index.js"
   },
   "author": "Sam Selvanathan ([email protected])",
   "dependencies": {
@@ -19,5 +20,8 @@
     "react-router": "^2.4.0",
     "serve-favicon": "^2.3.0",
     "webpack": "^1.12.9"
+  },
+  "devDependencies": {
+    "nodemon": "^1.9.2"
   }
 }

example/public/routes.jsx

@@ -21,13 +21,15 @@ import { Router, Route, IndexRoute, Redirect, browserHistory } from 'react-route
 import Layout from './views/layout.jsx';
 import ListPage from './views/list.jsx';
 import DetailPage from './views/detail.jsx';
+import Error404 from './views/404.jsx';
 
 module.exports = (
   <Router history={browserHistory}>
     <Route path='/' component={Layout}>
       <IndexRoute component={ListPage} />
       <Route path='/movie/:id' component={DetailPage} />
       <Redirect from='/gohome' to='/' />
+      <Route path='*' component={Error404} />
     </Route>
   </Router>
 );

example/public/views/404.jsx

@@ -0,0 +1,29 @@
+/*-------------------------------------------------------------------------------------------------------------------*\
+|  Copyright (C) 2016 PayPal                                                                                          |
+|                                                                                                                     |
+|  Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance     |
+|  with the License.                                                                                                  |
+|                                                                                                                     |
+|  You may obtain a copy of the License at                                                                            |
+|                                                                                                                     |
+|       http://www.apache.org/licenses/LICENSE-2.0                                                                    |
+|                                                                                                                     |
+|  Unless required by applicable law or agreed to in writing, software distributed under the License is distributed   |
+|  on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for  |
+|  the specific language governing permissions and limitations under the License.                                     |
+\*-------------------------------------------------------------------------------------------------------------------*/
+
+'use strict';
+
+var React = require('react');
+var Layout = require('./layout.jsx');
+
+module.exports = React.createClass({
+  displayName: '404',
+
+  render: function render() {
+    return (
+      <h1>URL: {this.props.location.pathname} - Not Found(404)</h1>
+    );
+  }
+});

example/public/views/500.jsx

@@ -0,0 +1,33 @@
+/*-------------------------------------------------------------------------------------------------------------------*\
+|  Copyright (C) 2016 PayPal                                                                                          |
+|                                                                                                                     |
+|  Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance     |
+|  with the License.                                                                                                  |
+|                                                                                                                     |
+|  You may obtain a copy of the License at                                                                            |
+|                                                                                                                     |
+|       http://www.apache.org/licenses/LICENSE-2.0                                                                    |
+|                                                                                                                     |
+|  Unless required by applicable law or agreed to in writing, software distributed under the License is distributed   |
+|  on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for  |
+|  the specific language governing permissions and limitations under the License.                                     |
+\*-------------------------------------------------------------------------------------------------------------------*/
+
+'use strict';
+
+var React = require('react');
+var Layout = require('./layout.jsx');
+
+module.exports = React.createClass({
+  displayName: '500',
+
+  render: function render() {
+    return (
+      <div>
+        <h1>Internal Service Error (500)</h1>
+        <h3>Error message: {this.props.err.message}</h3>
+        <code>{this.props.err.stack}</code>
+      </div>
+    );
+  }
+});

example/public/views/detail.jsx

@@ -18,6 +18,7 @@
 var React = require('react');
 
 module.exports = React.createClass({
+  displayName: 'Detail',
 
   render: function render() {
     var movieId = this.props.params.id;

example/public/views/layout.jsx

@@ -18,9 +18,9 @@
 var React = require('react');
 
 module.exports = React.createClass({
+  displayName: 'Layout',
 
   render: function render() {
-
     return (
       <html>
         <head>

example/public/views/list.jsx

@@ -19,9 +19,9 @@ var React = require('react');
 var Router = require('react-router');
 
 module.exports = React.createClass({
+  displayName: 'List',
 
   render: function render() {
-
     return (
       <div id='list'>
         <h1>Movies</h1>

example/server.js

@@ -71,12 +71,17 @@ app.use(function(err, req, res, next) {
     return res.redirect(302, err.redirectLocation);
   }
   else if (err._type && err._type === ReactEngine.reactRouterServerErrors.MATCH_NOT_FOUND) {
-    return res.status(404).send('Route Not Found!');
+    return res.status(404).render(req.url);
   }
   else {
     // for ReactEngine.reactRouterServerErrors.MATCH_INTERNAL_ERROR or
     // any other error we just send the error message back
-    return res.status(500).send(err.message);
+    return res.status(500).render('500.jsx', {
+      err: {
+        message: err.message,
+        stack: err.stack
+      }
+    });
   }
 });
 

lib/client.js

@@ -57,7 +57,9 @@ exports.boot = function boot(options, callback) {
     Router = require('react-router');
     RouterComponent = Router.Router;
     match = Router.match;
-    browserHistory = Router.browserHistory;
+
+    // compatibility for both `react-router` v2 and v1
+    browserHistory = Router.browserHistory || require('history').createHistory();
   } catch (err) {
     if (!Router && options.routes) {
       throw err;