How to deploy a React app to a subdirectory

Let’s be honest, you’re deploying your app to GitHub Pages, amirite?

Photo by Shopify on Burst

For the past month or so I’ve been working on a prototype app built with the React JavaScript library. It’s been a lot of fun and I always enjoy the challenge of learning something completely new!

I got the app to a point where I wanted to show my teammates my progress in order to get some feedback on the usability and accessibility of the app. In order to do so, I had to deploy the production build of the app to a subdirectory on our web server.

After the initial deploy, I loaded up the app in my browser only to be met with a completely blank screen! What was happening here? I quickly jumped over to Google to help me figure this out.

Note: This post assumes you’re using create-react-app and react-router v4+.

After a bit of searching around and reading some docs I was able to get things up and running! Here’s what I found which will hopefully help you, dear reader, get your own React app up and running in a subdirectory! 🚀

1. Set the basename

Setting the basename attribute on the <Router /> component tells React Router that the app will be served from a subdirectory.