added example razzle + react router 3 (#539)

* added example razzle + react router 3

* Remove yarn.lock

* Fix pkg.json

examples/with-react-router-3/.gitignore

@@ -0,0 +1,12 @@
+logs
+*.log
+npm-debug.log*
+.DS_Store
+
+coverage
+node_modules
+build
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

examples/with-react-router-3/README.md

@@ -0,0 +1,19 @@
+# Razzle x React Router 3
+
+## How to use
+Download the example [or clone the whole project](https://github.com/jaredpalmer/razzle.git):
+
+```bash
+curl https://codeload.github.com/jaredpalmer/razzle/tar.gz/master | tar -xz --strip=2 razzle-master/examples/with-react-router-3
+cd with-react-router-3
+```
+
+Install it and run:
+
+```bash
+yarn install
+yarn start
+```
+
+## Idea behind the example
+This is a basic, bare-bones example of how to use Razzle and React Router 3.

examples/with-react-router-3/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "razzle-examples-with-react-router-3",
+  "version": "0.1.0",
+  "license": "MIT",
+  "scripts": {
+    "start": "razzle start",
+    "build": "razzle build",
+    "test": "razzle test --env=jsdom",
+    "prestart:prod": "razzle build",
+    "start:prod": "NODE_ENV=production node build/server.js"
+  },
+  "dependencies": {
+    "express": "^4.16.2",
+    "prop-types": "^15.6.1",
+    "razzle": "^0.8.12",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-router": "^3.2.0",
+    "react-router-redux": "4.0.8",
+    "react-router-scroll": "0.4.2"
+  }
+}

examples/with-react-router-3/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+

examples/with-react-router-3/src/About.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Link } from 'react-router';
+import App from './App';
+import './Home.css';
+
+class About extends React.Component {
+  render() {
+    return (
+      <App>
+        <div className="Home">
+          <div className="Home-header">
+            <h2>About page</h2>
+          </div>
+          <p>
+            <Link to="home">Home</Link>
+          </p>
+        </div>
+      </App>
+    );
+  }
+}
+
+export default About;

examples/with-react-router-3/src/App.css

@@ -0,0 +1,5 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}

examples/with-react-router-3/src/App.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import './App.css';
+
+class App extends React.Component {
+  render() {
+    return <div>{this.props.children}</div>;
+  }
+}
+
+export default App;

examples/with-react-router-3/src/Home.css

@@ -0,0 +1,37 @@
+.Home {
+  text-align: center;
+}
+
+.Home-logo {
+  animation: Home-logo-spin infinite 20s linear;
+  height: 80px;
+}
+
+.Home-header {
+  background-color: #222;
+  height: 150px;
+  padding: 20px;
+  color: white;
+}
+
+.Home-intro {
+  font-size: large;
+}
+
+.Home-resources {
+  list-style: none;
+}
+
+.Home-resources > li {
+  display: inline-block;
+  padding: 1rem;
+}
+
+@keyframes Home-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

examples/with-react-router-3/src/Home.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Link } from 'react-router';
+import logo from './react.svg';
+import App from './App';
+import './Home.css';
+
+class Home extends React.Component {
+  render() {
+    return (
+      <App>
+        <div className="Home">
+          <div className="Home-header">
+            <img src={logo} className="Home-logo" alt="logo" />
+            <h2>Welcome to Razzle</h2>
+          </div>
+          <p className="Home-intro">
+            To get started, edit <code>src/App.js</code> or{' '}
+            <code>src/Home.js</code> and save to reload.
+          </p>
+          <p>
+            <Link to="about">About</Link>
+          </p>
+          <ul className="Home-resources">
+            <li>
+              <a href="https://github.com/jaredpalmer/razzle">Docs</a>
+            </li>
+            <li>
+              <a href="https://github.com/jaredpalmer/razzle/issues">Issues</a>
+            </li>
+            <li>
+              <a href="https://palmer.chat">Community Slack</a>
+            </li>
+          </ul>
+        </div>
+      </App>
+    );
+  }
+}
+
+export default Home;

examples/with-react-router-3/src/client.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import Routes from './routes';
+import { hydrate } from 'react-dom';
+
+hydrate(<Routes />, document.getElementById('root'));
+
+if (module.hot) {
+  module.hot.accept();
+}

examples/with-react-router-3/src/index.js

@@ -0,0 +1,28 @@
+import app from './server';
+import http from 'http';
+
+const server = http.createServer(app);
+
+let currentApp = app;
+
+const port = process.env.PORT || 3000;
+
+server.listen(port, error => {
+  if (error) {
+    console.log(error);
+  }
+
+  console.log(`🚀 started at: http://localhost:${port}`);
+});
+
+if (module.hot) {
+  console.log('✅  Server-side HMR Enabled!');
+
+  module.hot.accept('./server', () => {
+    console.log('🔁  HMR Reloading `./server`...');
+    server.removeListener('request', currentApp);
+    const newApp = require('./server').default;
+    server.on('request', newApp);
+    currentApp = newApp;
+  });
+}

examples/with-react-router-3/src/routes.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Router, Route, browserHistory } from 'react-router';
+
+import Home from './Home';
+import About from './About';
+
+const Routes = props => {
+  return (
+    <Router history={browserHistory} {...props}>
+      <Route path="/" component={Home} />
+      <Route path="home" component={Home} />
+      <Route path="about" component={About} />
+    </Router>
+  );
+};
+
+export default Routes;

examples/with-react-router-3/src/server.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import express from 'express';
+import { match, RouterContext } from 'react-router';
+import { renderToString } from 'react-dom/server';
+
+import getRoutes from './routes';
+
+const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);
+
+const server = express();
+server
+  .disable('x-powered-by')
+  .use(express.static(process.env.RAZZLE_PUBLIC_DIR));
+
+server.use((req, res) => {
+  match(
+    { routes: getRoutes(), location: req.url },
+    (error, redirectLocation, renderProps) => {
+      if (error) {
+        res.status(500).send(error.message);
+      } else if (redirectLocation) {
+        res.redirect(302, redirectLocation.pathname + redirectLocation.search);
+      } else if (renderProps) {
+        // You can also check renderProps.components or renderProps.routes for
+        // your "not found" component or route respectively, and send a 404 as
+        // below, if you're using a catch-all route.
+        const context = {};
+        const markup = renderToString(<RouterContext {...renderProps} />);
+
+        if (context.url) {
+          res.redirect(context.url);
+        } else {
+          res.status(200).send(
+            `<!doctype html>
+                <html lang="">
+                <head>
+                    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+                    <meta charset="utf-8" />
+                    <title>Welcome to Razzle</title>
+                    <meta name="viewport" content="width=device-width, initial-scale=1">
+                    ${
+                      assets.client.css
+                        ? `<link rel="stylesheet" href="${assets.client.css}">`
+                        : ''
+                    }
+                    ${
+                      process.env.NODE_ENV === 'production'
+                        ? `<script src="${assets.client.js}" defer></script>`
+                        : `<script src="${
+                            assets.client.js
+                          }" defer crossorigin></script>`
+                    }
+                </head>
+                <body>
+                    <div id="root">${markup}</div>
+                </body>
+            </html>`,
+          );
+        }
+      } else {
+        res.status(404).send('Not found');
+      }
+    },
+  );
+});
+
+export default server;