How to Serve a Static Blog inside a React App in Amazon Cloudfront

Asked Sep 18 '18 at 11:52

Active Sep 19 '18 at 15:10

Viewed 110 times

I have a react site and a jekyll blog. I want them to be hosted with Amazon cloud-front in following mannger

example.com -> serves the react site example.com/blog -> serves the static blog's index.html

I have built the react app and put it in to a s3 bucket. Then I have created a subdirectory called blog and uploaded all the blog content there. Then I have setup a cloud-front distribution for mydomain.com

If I visit example.com it serves the react website. If I visit example.com/blog by directly entering the url on the browser, in some browsers it works fine as well. But if I click the anchor link on the react website which links to mysite.com/blog instead of redering the blog, it renders the same page with messed up css and assets. Seems like the react app rewrites the requests and renders a react page instead of sending the requests to the backend.

I do not use react-router. Here is the anchor that I use in the react app to link the blog

<a className="ml-nav-item" 
   href="http://example.com/blog/index.html" 
   rel="noopener noreferrer" 
   target="_blank">
  Blog
</a>

edited Sep 19 '18 at 15:10

Christopher Moore

3,071
4
30
46

asked Sep 18 '18 at 11:52

Buddhika Jayawardhana

Is this page a regular html file in the s3 bucket or a js file? – Demon Sep 19 '18 at 14:39
It's a regular html file. No JS files – Buddhika Jayawardhana Sep 20 '18 at 10:39
1

I was able to resolve this by unregistering service worker according to this : https://stackoverflow.com/questions/49604821/cache-busting-with-create-react-app – Buddhika Jayawardhana Sep 20 '18 at 11:13

How to Serve a Static Blog inside a React App in Amazon Cloudfront

0 Answers0