reactjsaws-amplify

White Screen When Deploying React JS Build on AWS Amplify


he Problem:

I'm encountering a recurring issue with my React application deployed on AWS Amplify. After deployment, the app initially displays a white screen, and additional manual changes are required to make it work.

Setup:

Hosting Platform: AWS Amplify Frontend Framework: React.js Version Control: Bitbucket

Steps to Reproduce:

Merge a branch into master, triggering an automatic deployment on AWS Amplify. After deployment, accessing the app results in a white screen. To resolve, I modify the Rewrites and Redirects rules: Change the rule from 200 to 404 and redeploy. After redeployment, the app loads successfully. However, refreshing any page causes the white screen to reappear. I must then revert the rule back from 404 to 200 and redeploy again to fix it. This cycle repeats with every new deployment.

What I’ve Tried:

Adjusting Rewrites and Redirects to manage the issue temporarily. Ensuring my react-router-dom setup includes proper configuration. Any guidance or suggestions to resolve this issue would be greatly appreciated!

My Questions:

Can AWS Amplify automatically handle this without requiring manual changes in the redirect rules after each deployment? Why does refreshing a page trigger this issue, and how can I avoid it entirely?


Solution

  • So, after loads of debugging and eating amazons head, they have only one solution and that is to keep all the pages in redirects rules

    like

    [
          {
            "source": "/*",
            "status": "200",
            "target": "/index.html"
          },
          {
            "source": "/Dashboard/",
            "status": "301",
            "target": "/Dashboard"
          },
          {
            "source": "/Dashboard",
            "status": "200",
            "target": "/index.html"
          },
          {
            "source": "/ActiveNumber/",
            "status": "301",
            "target": "/ActiveNumber"
          },
          {
            "source": "/ActiveNumber",
            "status": "200",
            "target": "/index.html"
          }
        ]
    

    and on... for each page!

    very lame to be honest. but thats the only solution that the wizzes at AWS could figure out.