Adding a 200 page for client-side routing

When you are building client-side or single-page JavaScript app—taking advantage of pushState and the HTML5 History API, or using a framework React, Angular, or Ember—you need to ensure that your URLs will reach your router.

To take advantage of this with Surge, add a 200.html file into the root of your project. Now, when a request for a URL comes in where you don’t have a static HTML page, it will reach your 200 page instead, allowing you to use your client-side router.

Create this file using your favourite text editor, or the command line:

echo '<h1>Hello, catch all</h1>' > 200.html

Once you’ve published your project, all requests will fallback to this page.

The 200 page and clean URLs

Surge’s 200.html file is a fallback, like the 404.html file, but for single page apps and client-side routing.

For example, a basic project might contain an index.html page, and about.html page, and a client-side router which has been included in app.js:

my-project.surge.sh/
  ├─200.html
  ├─index.html
  ├─about.html
  └─app.js

Once this project is published on Surge, if a visitor requests /about, that static page will be served as normal. If a visitor requests /login, there is no static page to serve, but the 200 page will be served instead.

Inside the 200.html file, you can load your app as you would normally, for example:

<!-- 200.html -->
<script src="app.js"></script>

This basic approach can work with any client side JavaScript framework.

Framework compatibility

The 200 page helps you re-route all requests to your client-side application, improving the usefulness of your URLs whether you are using…