javascript - React JS App becomes blank white screen when deployed with AWS Amplify - Stack Overflow

admin管理员组

文章数量:1404927

I have a React JS app that works on local host, but when I deploy to AWS amplify displays as a blank white screen with no body. The browser tab shows the correct title and icon.

The page returns status code 403 and I believe there is a CORS issue? I have been unable to correct this in my code or on the Amplify console. Can someone point me towards what is causing my problem? I have successfully deployed a different React app with Amplify.

I have a React JS app that works on local host, but when I deploy to AWS amplify displays as a blank white screen with no body. The browser tab shows the correct title and icon.

The page returns status code 403 and I believe there is a CORS issue? I have been unable to correct this in my code or on the Amplify console. Can someone point me towards what is causing my problem? I have successfully deployed a different React app with Amplify.

• javascript
• css
• reactjs
• aws-amplify

Share Improve this question Follow edited Mar 3, 2022 at 4:37 sideshowbarker♦ 88.6k3030 gold badges215215 silver badges212212 bronze badges asked Mar 3, 2022 at 4:11 ZdubyaZdubya 10111 silver badge77 bronze badges 10

• 1 In React, blank white screens are usually associated with an error. Open the browser console and edit your question with the one you see. Also, it'd be strange if a 403 error (Unauthorized) meant CORS issues. – code Commented Mar 3, 2022 at 4:16
• I included a photo of the error with my post. Here's a link to my site: main.d19qyiuqppvhny.amplifyapp. – Zdubya Commented Mar 4, 2022 at 0:56
• What I mean is the browser console. Sure enough, I see an error. Looks like the files you're requesting have restricted access. Are you sure you configured your public files correctly? – code Commented Mar 4, 2022 at 0:59
• No, I've been all over google and stack overflow but I don't know how to configure it. Can you point me in the right direction? – Zdubya Commented Mar 4, 2022 at 1:29
• Hopefully this will help: aws.amazon./getting-started/hands-on/host-static-website – code Commented Mar 4, 2022 at 1:32

 |  Show 5 more ments

2 Answers 2

Sorted by: Reset to default 4

In my case I needed to change the homepage url in the package.json to match my Amplify URL. To do this add, or modify, the following line in your package.json:

 "homepage": "{Amplify-URL}/#/"

The Amplify URL can be found in the Amplify console under App settings -> Domain Management -> URL.

Hopefully this helps!

In the build settings i.e. the amplify.yml file, you need to specify under artifacts the base directory which webpack or the build tool being used will generate.In my case this is the dist directory, because due to running yarn build mand.

 artifacts:
    # IMPORTANT - Please verify your build output directory
    baseDirectory: dist

本文标签： javascriptReact JS App becomes blank white screen when deployed with AWS AmplifyStack Overflow