Allow /404 file to act as wildcard route

[scottnonnenberg]

Didn't see a way to put a 'not found' page in place, thought I'd add one.

Scenario: I've created a 404 page for nginx, but when it loads fully I get an empty screen because react-router doesn't know about the random URL the user attempted to load. This change allows me to put a 404.jsx somewhere in the project, and that is automatically registered as the wildcard handler.

[KyleAMathews]

@scottnonnenberg Gatsby is using React Router 2.0 now which means the syntax for adding wildcard routes has changed somewhat. Would you mind creating a new PR against master?

[scottnonnenberg]

Updated! Includes my changes from #174.

[scottnonnenberg]

Rebased on latest master.

[KyleAMathews]

Thanks!

So one quick thought looking at this — I think this * route is going to cause problems right now. React Router matches routes top-to-bottom which means this 404 route will block every route defined after it.

So I think the algorithm should be:

1. add routes for all pages except the 404 page.
2. add a route for the 404 page (if there is one) to the end of the list.

Thoughts?

[scottnonnenberg]

Good call. Closer to my original implementation.

That should do it! Nice to be online at about the same time. :0)

[KyleAMathews]

Indeed :)

Thanks! Merging and I'll do a quick new release.

If you have a bit more time, adding a follow-up PR to document this in the README.md would be 💯

[KyleAMathews]

Published 0.8.7 with this 💯 Will also add a sample 404 page to the three official starters. This is awesome thanks @scottnonnenberg!

[clouddra]

thanks @scottnonnenberg for 404 page routing.
It works when I tried running in develop mode but breaks when I ran the built version of the site.
I have also tried testing it on the official starters and it does not work as well.

[KyleAMathews]

Can you give more details? e.g. Steps to reproduce?
On Wed, Mar 9, 2016 at 6:57 PM clouddra notifications@github.com wrote:

thanks @scottnonnenberg https://github.com/scottnonnenberg for 404 page
routing.
It works when I tried running in develop mode but breaks when I ran the
built version of the site.
I have also tried testing it on the official starters and it does not work
as well.

—
Reply to this email directly or view it on GitHub
#121 (comment).

[scottnonnenberg]

One thing to keep in mind is that for the built version of the site, you need to set up your server to show the 404 file anytime it can't find a real file on disk. In nginx, that looks like this:

error_page 404 /404/index.html;

Note that this will NOT work if you're just using a simple pass-through file server like python -m SimpleHTTPServer 8000

[clouddra]

@KyleAMathews
if you have you pushed 404 pages into your starters' gh-pages you can try this http://gatsbyjs.github.io/gatsby-starter-documentation/some_link

@scottnonnenberg
From what you have said I presume that it would not work for gh-pages?

[scottnonnenberg]

For github pages, looks like our path might not match (their /404.html vs our /404/index.html), and you'll need to have a custom domain: https://help.github.com/articles/creating-a-custom-404-page-for-your-github-pages-site/

Simple solution for now: copy the file to the location github pages expects, and move your github pages to custom domain.

[KyleAMathews]

@scottnonnenberg great research. @clouddra I switched the 404 url in starters to /404.html e.g. gatsbyjs/gatsby-starter-documentation@7534eed to simplify getting started on something like this.

[clouddra]

@scottnonnenberg @KyleAMathews Thanks for the help. Will try it out.

[SachaG]

@KyleAMathews should the same frontmatter appear in here, too?

https://github.com/gatsbyjs/gatsby-starter-default/blob/master/pages/404.md

[KyleAMathews]

@SachaG yes it should :-) I'll add that real quick. Thanks for bringing your fine-toothed bug-finder comb!

[jlengstorf]

Hiya @scottnonnenberg! 👋

This is definitely late, but on behalf of the entire Gatsby community, I wanted to say thank you for being here.

Gatsby is built by awesome people like you. Let us say “thanks” in two ways:

1. We’d like to send you some Gatsby swag. As a token of our appreciation, you can go to the Gatsby Swag Store and log in with your GitHub account to get a coupon code good for one free piece of swag. (We’ve got t-shirts and hats, plus some socks that are really razzing our berries right now.)
2. If you’re not already part of it, we just invited you to join the Gatsby organization on GitHub. This will add you to our team of maintainers. You’ll receive an email shortly asking you to confirm. By joining the team, you’ll be able to label issues, review pull requests, and merge approved pull requests.

If you have questions, please don’t hesitate to reach out to us: tweet at @gatsbyjs and we’ll come a-runnin’.

Thanks again! 💪💜

[jlengstorf]

Hiya @scottnonnenberg! 👋

This is definitely late, but on behalf of the entire Gatsby community, I wanted to say thank you for being here.

Gatsby is built by awesome people like you. Let us say “thanks” in two ways:

1. We’d like to send you some Gatsby swag. As a token of our appreciation, you can go to the Gatsby Swag Store and log in with your GitHub account to get a coupon code good for one free piece of swag. (We’ve got t-shirts and hats, plus some socks that are really razzing our berries right now.)
2. If you’re not already part of it, we just invited you to join the Gatsby organization on GitHub. This will add you to our team of maintainers. You’ll receive an email shortly asking you to confirm. By joining the team, you’ll be able to label issues, review pull requests, and merge approved pull requests.

If you have questions, please don’t hesitate to reach out to us: tweet at @gatsbyjs and we’ll come a-runnin’.

Thanks again! 💪💜