React SPA blank page when deployed using AWS S3 + CloudFront

Question

I uploaded React Single Page App to AWS S3 served with CloudFront. I have two buckets and two CDN (one public and one private) and restricted viewer access using signed cookies on 'private' CDN. My page loads blank after redirecting from the 'public' bucket/CDN.

This is html I see when inspected using Google Chrome:

And error:

Snippet from the request/response headers:

I have set two error pages in CloudFront 403/404 to return 200 and index.html response page. If I remove 403 or change to respond as 403 all of the page content files return 403. My S3 bucket is set to allow GetObject to CloudFront OAI and so does CloudFront distribution use the same identity.

The page is served using custom domain registered and set up in Route53. I tried specifying homepage in the package.json file, but I get the same result if I either:

• add 'homepage' in the package.json file using my custom domain
• use "homepage":'.'
• Don't specify homepage

I've searched every solution out there but nothing seems to work.

UPDATE: If I turn off 'Restrict viewer access' on the private CDN, my page loads fine (picking up cookies set by the 'public' cdn).

Answer 1

Your web app is a SPA application, but access to the js file on clouldfront is restricted, so the application crashes.

You need to set up a separate error pages. eg 403.html . And configure in the console.