👌 Zero config client side routing with Surge.sh

Charlie Gleason
Jun 8, 2017 · 1 min read

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. 💖

superhighfives

Tutorials and thoughts on front end development

Charlie Gleason

Written by

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

superhighfives

Tutorials and thoughts on front end development

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade