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
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.
create-react-app to build my app. My project lives in the
/src folder and the build output lives in the
Before you deploy, be sure to rename your
index.html file to
200.html in your
To get started you’ll need to install the Surge CLI
$ npm install --global surge
// In your project directory, run:
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.shemail: firstname.lastname@example.org: *****************project path: /path-to-your-project/builddomain: 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.
"deploy": "npm run build && mv build/index.html build/200.html && surge build your-custom-domain",
If not using a custom domain, omit
your-custom-domainIf 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! :)