使用 AWS Amplify 部署时，React JS 应用程序变为空白屏幕

Question

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.

Answer 1

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!

Answer 2

In the build settings ie 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 command.

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