Skip to content

Instantly share code, notes, and snippets.

@jimmylee
Last active March 30, 2017 00:18
Show Gist options
  • Save jimmylee/26c8960754f0b88974d88be8e34fc667 to your computer and use it in GitHub Desktop.
Save jimmylee/26c8960754f0b88974d88be8e34fc667 to your computer and use it in GitHub Desktop.

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

screen shot 2017-03-22 at 10 10 51 am

Example of not found

screen shot 2017-03-22 at 10 12 11 am

Solution

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

screen shot 2017-03-22 at 10 15 20 am

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!

@richcsmith
Copy link

👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment