I am working on a React app that's running on AWS Amplify. My React app is using the react-router-dom library to route to different components. After running amplify publish in the CLI, at the root of the app (obktraining.com) everything is fine in the browser, I can also route to other components in the app just fine as well. But when I refresh my browser while I am on a route (obktraining.com/menu), I get an Access Denied error message.
I have found other posts about similar issues regarding rewrites and redirects in Amplify, but the solutions given do not work for me.
Here is an image of the error:
My Amplify app rewrites & redirects :
Again, the error only displays when I refresh on a route (obktraining.com/menu or obktraining.com/drinks) not on obktraining.com. Is the issue being caused by the react-router-dom library or is it an issue with Amplify settings? I am not sure where to go from here.
I have been facing the same error since days.The error is being caused by the amplify settings. The solution is simple,
Edit your Rewrites and redirects by adding a new rule.
source address = </^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>
target address = /index.html
status = 200 (Rewrite)
Country code can be left blank
Save and try refreshing your app again. It should probably work.
use this for reference: https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa
Then you can just put in (as Dhruv Godambe posted above)
</^((?!.(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$).)*$/>
as the Source address and
/index.html as your target address
You can navigate to 'rewrites and redirects' in your app from AWS Amplify console and click on edit and select open text editor, and add this piece of code in your array(if present) else put the array braces around it.
{
"source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>",
"target": "/index.html",
"status": "200",
"condition": null
}
Reference: https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa
Reference:
https://docs.aws.amazon.com/amplify/latest/userguide/manual-deploys.html
I have faced the same problem.
I was using Manual Zip File (Compressed) download (wrong).
Here is how to deploy manually correctely:
Run this command
npm run build
Now a build folder will be created.
2. Compress the content of this folder
Not the content of the whole project.
You chnage directory to the build folder and Compress the content in side.
3. Upload that compressed file Inside the build directory
Now this should work just fine.
:)
The correct rule should be like this:
Source address: </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>
Target address: /index.html
Status: 200
I was getting the an Access Denied error message too. The error went away when I followed the documentation described in the answer above, but then I got the white screen problem described above too.
Reviewing the steps I noticed the auto-complete for the "Destination Address" listed in the "Rewrites and redirects" settings was /. When I tried using / as the "Destination Address" instead of /index.html I no longer got the white screen and got the expected page content.
Sharing what I found in case this helps others who are seeing a white screen after fixing the error with the rewrite rule described in the answers above. (Note as of Nov 2022 the "Rewrites and redirects" setting page uses the wording "Target Address" instead of "Destination Address".)
I have faced the same problem. I was zipping build folder, but not the contents within the zip folder.
Here is how I fixed it:
Run build command
npm run build
Now a build folder will be created inside your project directory.
Open build folder.
Compress the contents of build folder, and not build folder.
Now upload this new zip created from sub files and folders from build folder.
App will run fine on AWS Amplify.
I got the same error,
I zipped the build folder first then uploaded it and got that error,
but when I just uploaded the folder without zipping it, it worked fine !! weird!!
in my application I used the port 8080
I have my App react (create-app-react...) My app access to file .json in the folder assets. In my test in local no problem but when publish in IIS (npm run build) can't access a this file .json, in console obtain this error: GET http://localhost:3700/assets/locales/en/isotope.json 404 (Not Found).
My structure app ...
assets
locales
es
isotope.json
static
css
js
index.html
...
Can you help me??
The problem was not having included in the MIME Types (IIS) the .json.
Now Work It!!!
Thanks
You have to manually copy the resources that are not added via require or import. Make sure you have assets folder in the site root on the server.
Everything is working when I run locally, but when I deploy I'm getting this error.
I have a folder structure like this:
Root
content
project
[some_project]
my_post_markdown.md
[some_sub_folder]
[another_sub_folder]
index.html
Build
[some_file.js]
I am able to get my_post_markdown.md to render and link to [some_sub_folder]/[another_sub_folder]/index.html.
The problem is that index.html relies on Build/[some_file.js] and is unable to load it. I'm seeing the folowing in my console
The real errors I see are:
Loading failed for the with source “https://www.greghilston.com/project/global_game_jam_2019/web/Build/UnityLoader.js“. web:10:1
ReferenceError: UnityLoader is not defined[Learn More]
How can I get the sub folder's file accessible by my html file?
I followed the steps outlined in this blog post:
https://medium.com/#aboutin/unity-github-pages-and-file-organization-575ce082b591
Put index.html and all files in /Build and /TemplateData into the same directory.
Modify index.html to remove “Build/” and “TemplateData/” from all file locations.
I am uploading images to my applications storage/app/public/avatars directory. The files are uploading and are there in this folder - i have checked it. And loading the page shows the image as long as i am in my local pc. Then i moved the project to a shared hosting. Since then the images are not loading. From chrome console network tab i can see for the images laravel is throwing 404 error.
Here is what i have tried:
On the remote machine i recreated the symbolic link in my public folder as storage that is pointing to the storage/app/public folder.
Tried to copy and paste the image src directly into the browser - getting NotFoundException in RouteCollection.php
Cleared views, cache, config cache
Spent 5 hours trying to figure it out. Works fine on local pc. Just not on the shared hosting.
Desperately seeking help :(
After a bad night sleep of 4 hours i started again and found the problem. Very novice mistake, but can be ver hard to locate.
Here is what it is. I uploaded my laravel project folder to a shared hosting. Say my project name is myproject. This folder is at the same level as the public_html folder. Then i copied the contents of the myproject/public folder to the public_html folder.
As you know, you are supposed to create the symbolic link inside your public directory and the link should point to the storage/app/public directory (if you are using the public disk driver for your file storage). I did create the symbolic link inside the public folder, but at the wrong public folder. Since i copied the contents of public folder to the public_html folder, i should have created the symbolic link inside the public_html folder, not inside myproject/public folder!!
----public_html
---css
---js
---(other files etc. etc)
---storage <= this is where the symbolic link should be
----myproject
---public
---css
---js
---(other files etc. etc)
---storage <= not here!!
Very stupid of me.
btw, below is a tutorial of how to transfer a local laravel project to a shared hosting:
guide to deploy laravel 5 app on shared hosting
I have Silverlight app and when I want to do some action Firebug show me that on this two files I have 404 not found error.
So should I insert this files somewhere in my solution or to IIS rootwww directory?
Or it's other solution of this error?
You should put those files in the root virtual directory of IIS, which defaults to C:\Inetpub\wwwroot\, such that the file shows up as "http://<yourdomain>/clientaccesspolicy.xml", or "http://<yourserver>/clientaccesspolicy.xml".