Merge pull request #41 from piotrwitek/browser-history-with-api-fallback

piotrwitek · web-flow · commit 9c097cb329a5 · 2017-02-13T02:48:18.000+01:00
Browser history with api fallback
diff --git a/index.html b/index.html
@@ -3,11 +3,11 @@
 
 <head>
   <meta charset="utf-8">
-  <meta name="description" content="">
+  <meta name="description" content>
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   <title>React / Redux / TypeScript - starter-kit</title>
-  <link rel="stylesheet" href="assets/loader-styles.css">
-  <link rel="stylesheet" href="https://unpkg.com/blaze@3.2.0">
+  <link href="assets/loader-styles.css" rel="stylesheet">
+  <link href="https://unpkg.com/blaze@3.2.0" rel="stylesheet">
 </head>
 
 <body>
@@ -36,7 +36,7 @@
     // hot-reload config
     SystemJS.import('systemjs-hot-reloader').then(function(HotReloader) {
       // if you're running server on custom port please remember to update below
-      new HotReloader.default('http://localhost:8888');
+      new HotReloader.default('http://localhost:3000');
     });
     // load main module of your app with SystemJS
     SystemJS.trace = true;
diff --git a/package.json b/package.json
@@ -48,7 +48,7 @@
     "husky": "^0.11.8",
     "jest": "^17.0.3",
     "jspm": "0.17.0-beta.32",
-    "jspm-hmr": "^0.5.0",
+    "jspm-hmr": "1.0.0-0",
     "regenerator": "^0.9.5",
     "shelljs": "^0.7.5",
     "shx": "^0.2.1",
diff --git a/server.js b/server.js
@@ -1,7 +1,24 @@
 'use strict';
 const jspmHmrServer = require('jspm-hmr');
+
 const options = {
-  open: true
+  fallback: '/index.html',
+  verbose: false,
 };
 
-jspmHmrServer.start(options);
+// SERVER
+const server = jspmHmrServer.createServer(options);
+
+server
+  .listen(3000, (err) => {
+    console.log('[debug] %j', server.address());
+    console.log('\n>>> hit CTRL-C twice to exit <<<\n');
+  })
+  .on('error', function (err) {
+    if (err.code === 'EADDRINUSE') {
+      console.log(`\n[WARNING] Selected address is in use: ${URL}`);
+      console.log(`[WARNING] Please try again using different port or address...\n`);
+
+      process.exit();
+    }
+  });
diff --git a/src/app.tsx b/src/app.tsx
@@ -2,16 +2,17 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
-import { Router, Route, hashHistory } from 'react-router';
+import { Router, Route, browserHistory } from 'react-router';
 import { syncHistoryWithStore } from 'react-router-redux';
 // app imports
 import { MainLayout } from './layouts/main-layout';
 import { HomeContainer } from './containers/home-container/index';
 import { CssModulesContainer } from './containers/css-modules-container/index';
+import NotFoundContainer from './containers/not-found/index';
 import CurrencyConverterContainer from './containers/currency-converter-container/index';
 
 import { store } from './store/index';
-const history = syncHistoryWithStore(hashHistory, store) as any;
+const history = syncHistoryWithStore(browserHistory, store) as any;
 
 function App() {
   return (
@@ -21,6 +22,7 @@ function App() {
           <Route path="/" component={HomeContainer} />
           <Route path="/currency-converter" component={CurrencyConverterContainer} />
           <Route path="/css-modules" component={CssModulesContainer} />
+          <Route path="*" component={NotFoundContainer} />
         </Route>
       </Router>
     </Provider>
diff --git a/src/containers/not-found/index.tsx b/src/containers/not-found/index.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { Link } from 'react-router';
+import { PageSection } from '../../components/page-section';
+import { PageHero } from '../../components/page-hero';
+
+export default function () {
+  return (
+    <article>
+      <PageHero title="404 Not Found" subtitle="Page not found" />
+      <PageSection className="o-container o-container--small u-centered">
+        <Link to="/">Back to Home</Link>
+      </PageSection>
+      <br />
+    </article>
+  );
+};
diff --git a/yarn.lock b/yarn.lock
