CODEWITHSUNDEEP
javascriptcssreactjsaws-amplify
Zdubya
Zdubya

Reputation: 91

React JS App becomes blank white screen when deployed with AWS 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.

Body missing from dev console

Error reading

Upvotes: 3

Views: 5211

Answers (2)

Daniel
Daniel

Reputation: 11

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 command.

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

Upvotes: 1

Kenton Blacutt
Kenton Blacutt

Reputation: 190

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!

Upvotes: 4

Related Questions