How to: Deploy your React/Router4 app using Surge.sh

Originally published 1.17.2017 — last updated 3.10.2018

I’m really enjoying building apps with React Router 4. The Route path and Route exact path patterns are super simple and straight-forward. I just finished building a basic portfolio site for my projects. My router component looks like this:

Clean, simple and you don’t have to mess with hashHistory or browserHistory as your router will match the URL directly to a component.

In the past I’ve deployed simple sites/apps to gh-pages but I’ve had some issues with using React-router as gh-pages doesn’t seem to support browserHistory . I did a little digging and it seems they also do not support router4. That’s when I turned to http://surge.sh A super simple interface for quickly deploying Front-End apps. Surge supports router4 with a simple configuration tweak. They also support using custom domains. In order to get React-router working on your Surge page you just need to change your index.html file to 200.html. This will load your app anytime a 200 response is sent and allow the router to match the route to a component. This is called push-state routing. This lets you send a direct link to your /Contact page for example.

I’m using create-react-app to build my app. My project lives in the /src folder and the build output lives in the /build folder.

Before you deploy, be sure to rename your index.html file to 200.html in your /build folder.

To get started you’ll need to install the Surge CLI

$ npm install --global surge
// In your project directory, run:
$ surge

If you’ve never used Surge before you’ll be prompted to setup an account. It will then give you a couple of prompts to get your app deployed.

By default Surge will look at the root folder for your app. You’ll need to add /build to the path to point it to the build folder. You’ll also want to replace the domain entry with your custom domain.

Note: If you’re using a custom domain follow these guides to point to the surge hosting from your domain provider: https://surge.sh/help/adding-a-custom-domain

Surge - surge.sh
email: your@email.com
token: *****************
project path: /path-to-your-project/build
domain: your-custom-domain

Note: This example assumes that your project is compiled to the build folder. If you’re not using build you’ll need to change this in the project path.

That’s it! You’re ready to deploy and your project should be available. You should be able to view your app and be able to directly link to any of your routes.

Making it even easier

I love the simplicity in this setup. To make it even simpler, I added a deploy script to my package.json that takes care of renaming my index.html file and runs Surge by pointing it to the build folder and my custom domain.

"scripts": {
"deploy": "npm run build && mv build/index.html build/200.html && surge build your-custom-domain",
}

Notes:
If not using a custom domain, omit your-custom-domain
If not using build for your output folder, change build/index.html to the location of your output directory.

Credit: I found this script here

Now I can use npm run deploy to build, configure and push my updated code in one step!

I hope other folks find this helpful! Leave a comment if you find any errors in this or if you have any feedback! :)