Our WorkAbout UsOur ApproachThe Journal
Contact »
« Back to the journal
PHP, Javascript & React

Hosting a ReactJS app (with routing) on AWS S3

By:

Mark Biek
Mark Biek

on 4/8/2019

As you may or may not already know, it’s super simple to host a static website from an AWS S3 bucket.

It’s fast, cheap, and you can even use a custom domain.

This makes it a great candidate for hosting React single-page applications!

One small issue is handling routing on the front-end.

If you’re using react-router, you already have friendly urls (like /page1 and /page2) for the different “pages” of your React app.

The problem on S3 is, without server-side rendering, when you refresh the page on one of those virtual urls, you’ll either get a 404 or 403 error since there isn’t a corresponding file in the S3 bucket.

Luckily there is a simple, albeit strange way, to handle it.

The first step is adding Routing Rules to the “Static website hosting” properties of your bucket.

props.png

The rules should look something like

This will make S3, in the case of any 404 or 403 error, rewrite the url with a #!/ prefix.

For example, if you navigate to http://mystaticsite.com/page1 and that’s a React route, it’ll change the url to http://mystaticsite.com/#!/page1.

Then we need to add a little code to our React app to change the url back to our friendly format (because #!/ urls are gross).

We’ll add the code below, just before our React app is rendered.

We check to see if the url is in #!/something format.

If it is, we grab the /something portion of the url and use the browser history API to replace the url.

Share to

Related Posts

Websites
What's the JAMstack?

By:Alec Robertson

As a front-end developer in 2020, it is time that I fulfill the FEDeral mandate that I publish words regarding the JAMStack. If you follow too many developers on Twitter, it’s likely you’ve heard about the Next Big Thing in web development, but I’d like to put this trend (fad? movement?) into context to better understand what’s truly new about this approach and whether it’s worth using.

Read More »
Recursive asynchronous calls with JavaScript and ES6

By:Mark Biek on 1/30/2018

ES6 generator functions make recursive asynchronous calls (relatively) easy.

Read More »