My static websites url changed when I changed whats in my s3 bucket

Question

This is my first time using AWS and it's been a week since I started running my site. For the first week https://www.example.com (my domain name instead of example) ran perfectly fine. It's a static website, just some ReactJS components no servers. Yesterday, I updated my code to make some changes to the site, and once it was all working, I built it, and put it onto my s3 bucket. The website wasn't updating, so I figured I'd wait till today. Today, the website just shows a blank screen. I tried performing invalidations, re entering everything into s3, changing the code and building it again, but nothing worked.

But what I did find was when I do https://www.example.com/about , my website loads the new, updated version of what is in my s3 bucket. What caused this change, and how can I get it back to loading without the /about? My site does include an about section, and others, but when I click on those the link becomes https://www.example.com/about#about, which I don't want at all.

Thank you so much

Accepted Answer

This is quite a mystery. Missing a lot of details, here are my first thoughts on this:

**Potential Causes:**

**Index Document Setting:** Ensure that the index document setting in your S3 bucket is correctly configured to point to your main index file (e.g., index.html). This setting controls the initial page that is loaded when visitors access your site.

**Browser Caching:** Sometimes browsers cache older versions of the site. Try clearing your browser's cache, or use an incognito window, and then accessing the website again.

**React Router Configuration:** Since you're using React, you might be using a client-side router (e.g., react-router-dom). Ensure that it is configured correctly to handle your routes and that it is not causing the URL to change unexpectedly.

**Possible Solutions:**

**Review S3 Configuration:** Double-check your S3 bucket configuration, ensuring that the bucket hosting and endpoint settings are correctly configured.

**Review CloudFront Settings:** Since you are using AWS CloudFront for distribution, check your settings to ensure that you've set the default root object to your main HTML file (usually index.html).

**Update React Router Configuration:** Review your React Router configuration to ensure that the routes are set up correctly. If necessary, update the base URL in your router configuration to match the URL of your S3 bucket.

**URL Rewriting:** You may need to configure URL rewriting to ensure that all routes point to your index.html file. You can do this using routing rules in your S3 bucket settings.

**Invalidate CloudFront Cache:** If you're using CloudFront, perform a cache invalidation to remove the old version of your site from CloudFront's cache. I know you mentioned you did this already but just adding it for good measure.

**Check Console Errors:** Open your browser’s console to check for any errors that might provide clues about the issue.

I hope this helps you track it down, and please update the question once you do to close the loop, I am genuinely curious what is causing this behavior for you.

My static websites url changed when I changed whats in my s3 bucket

Relevant content