One of the advantages of building a static-front end application in React is the ability to cache and serve it using AWS S3 and CloudFront. This allows for some pretty awesome performance as well as some great cost savings. This works perfectly well for single page applications, but you may run into several small issues when routing on the front-end.
The Dreaded 404
The Fix That Broke Something Else
If you redirected your Error Document back to index.html, you will notice that your static routing works correctly, but you will still be dealing with a 404 error. In your console, you will still most likely be seeing something like
Failed to load resource: the server responded with a status of 404 () whenever you try to load a route, such as /about, within your application. Receiving a 404 error, even when your application works, can cause search engines to avoid indexing the site. On top of that, if you try to audit in Google chrome, it will tell you that something is wrong very quickly.
A Proper Fix
Now that we know what not to do, let’s talk about the proper way to fix this application. What we need to do first is login to AWS and open up your CloudFront distribution for our React App. In the top tabs, click on Error Pages.
On this page, you want to click Create Custom Error Response. This will allow us to specify handling for a 404 error. Here you will want to enter the following settings:
- HTTP Error Code – 404: Not Found
- TTL – 60s
- Customize Error Response – Yes
- Response Page Path – /index.html
- HTTP Response Code – 200: OK
Click Yes, Edit to save your settings, and you should be good to go!
(Optional): If you are still getting a 404 error, you may need to create an invalidation for your CloudFront cache. By clicking the Invalidations tab, clicking Create Invalidation and entering the path to your React Application (I used /* to invalidate all paths).
Once the cache has cleared and updated on your CloudFront distribution, your 404 errors should go away, and your static routing should work as expected!