clientside-routing.md

The Problem

We don't want hashes in our urls. But we also don't want exceptions, broken routes, and users to return without the right url. This document details how I solved the problem for http://jimmyl.ee - a static website hosted on S3.

My Router

import reducers from './reducers/index';
import { middleware } from './common/middleware';
import { createRoutes } from './common/routing';
import { Router } from 'react-router';
import { Provider } from 'react-redux';

const store = middleware.createStore(reducers);
const app = (
  <Provider store={ store }>
    <Router history={ middleware.history }>{createRoutes()}</Router>
  </Provider>
);

Within createRoutes()

import base from '../components/base/index';
import pageWritingCSS from '../pages/writing-css/index';
import pageCSSAnimations from '../pages/css-animations/index';
import pageHome from '../pages/home/index';
import pageNotFound from '../pages/not-found/index';
import pageStats from '../pages/site-stats/index';

<Route path="/" component={base}>
   <IndexRoute component={pageHome} onEnter={dispatchEnterEvent} />
   <Route path="/site-analysis" component={pageWritingCSS} onEnter={dispatchEnterEvent} />
   <Route path="/animation-performance" component={pageCSSAnimations} onEnter={dispatchEnterEvent} />
   <Route path="/writing-css" component={pageWritingCSS} onEnter={dispatchEnterEvent} />
   <Route path="*" component={pageNotFound} onEnter={dispatchEnterEvent} />
</Route>

• if the route isn't matched, then wildcard regex is invoked and the pageNotFound is rendered to the screen.

Example of matching

Example of not found

Solution

I have a cloudfront distribution, and on that cloudfront distribution I have a custom error response.

When I click edit, I have the following settings:

1. HTTP Error Code: 404: Not Found
2. Customize Error Response: Yes
3. Response Page Path: /index.html
4. HTTP Response Code: 200: OK

On S3

1. I have 'Use this bucket to host a website' with endpoint: http://jimmyl.ee.s3-website-us-west-2.amazonaws.com
2. Index Document: index.html
3. Error Document: index.html

Explanation:

Through this method I'm able to have the loaded document handle the 404 after JS is excecuted instead of the server.

Hope this helps!

👍