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