👌 Zero Config Client Side Routing With Surge.sh

Charlie Gleason
superhighfives
Published in
1 min readJun 8, 2017

--

Using create-react-app, react-router, and zero configuration

Quick tip—if you’ve built something fancy with create-react-app and react-router and you’re not doing any server side stuff (as in, it’s all on the client side), you can get Surge to automatically catch and pass requests to your app. All you need to do is duplicate your index.html after the build step, naming it 200.html.

You can see this in action here. Without the 200.html, visiting /lyrics would result in a 404:
https://stretchurskin.com/lyrics

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

With create-react-app it’s as easy as amending your build step in your package.json:

"build": "react-scripts build && cp build/index.html build/200.html"

And deploying:

surge build

And then celebrating, because you are a success. 💖

--

--

Charlie Gleason
superhighfives

A thirty-something with feelings, interested in outer space and the acquisition and distribution of high fives.