Deploying react website on aws, using react-router-dom problem

Question

I have deployed my website on AWS using React and react-router-dom for simple route changing. However, I made a mistake by only uploading the index.html file for both the origin page and error page to S3. Although the website works properly when someone enters the URL and navigates through the routes, neither PageSpeed Insight nor Google Ads/Search Console can recognize the router's URL and show an error. The network shows a 404 error for the document that is supposed to be on that URL.

For example, https://website.com is working correctly and recognized by Google. However, https://website.com/something is sending the user where I want, but it shows a 404 error because something.html is not recognized. As a result, PageSpeed cannot read it, nor can Google Search or Ads recognize it.

score 1 · Answer 1 · answered Apr 07 '23 at 11:05

It sounds like you may need to configure your AWS S3 bucket to serve the website using the React Router. When a user enters a URL with a route like https://website.com/something, the S3 bucket needs to be able to serve the appropriate content for that route. Here are the steps you can follow to configure your S3 bucket to serve a React Router website:

Make sure that your S3 bucket is configured to host a static website. You can do this by going to the Properties tab of your bucket in the AWS console and enabling static website hosting.

Create an index document and an error document. These documents will be served by the S3 bucket when users access the root URL or an invalid URL. You can use the index.html file for both of these documents.

In the S3 console, go to the Permissions tab and add a new Bucket Policy. Here is an example policy you can use:

{ "Version":"2012-10-17", "Statement":[ { "Sid":"PublicReadGetObject", "Effect":"Allow", "Principal": "", "Action":["s3:GetObject"], "Resource":["arn:aws:s3:::your-bucket-name/"] } ] }

Configure your React Router to use HashRouter instead of BrowserRouter. This will ensure that the router works with the S3 hosting.

Build your React app and upload the build files to your S3 bucket.

With these steps, your React Router website should now be configured to work properly with AWS S3 hosting.

Natasha Loiseau · Answer 2 · 2023-05-05T16:39:36.467

You can use the index.html for both the index and the error document -- that part should be fine. The issue with with how S3 handles a static website.

I updated my redirection rules on the Static website hosting settings for the bucket to be like below. This changes a url from https://website.com/something to https://website.com/#!/something, which my react router can interpret. I found this site, which helped me figure out the direction I needed to go in: https://via.studio/journal/hosting-a-reactjs-app-with-routing-on-aws-s3. Hope this helps!

[
    {
        "Condition": {
            "HttpErrorCodeReturnedEquals": "404"
        },
        "Redirect": {
            "HostName": "site-url.com",
            "Protocol": "https",
            "ReplaceKeyPrefixWith": "#!"
        }
    },
    {
        "Condition": {
            "HttpErrorCodeReturnedEquals": "403"
        },
        "Redirect": {
            "HostName": "site-url.com",
            "Protocol": "https",
            "ReplaceKeyPrefixWith": "#!"
        }
    }
]

Edit: You could also just modify your CloudFront distribution to redirect as well like described in this answer (which I've also tested myself and found to be working, and a much easier fix) https://stackoverflow.com/a/71591815/1588149

Deploying react website on aws, using react-router-dom problem

2 Answers2