iframe with local html on React or Angular

user_8259623 0
Viewed 290

I'm trying to show a local html file in an iframe. In both Angular and React, It works on development mode, but on production (AWS Amplify) I get the error "cannot match any routes".

I tried all the answers on previous similar questions but no solution for me. I tried many sorts of locations( in src, in public, creating assets folder etc ). I tried many sorts of address syntax such as:

<iframe src="address.html"></iframe>
<iframe src="./address.html"></iframe>
<iframe src="../address.html"></iframe>
<iframe src="./assets/address.html"></iframe>
<iframe src="../assets/address.html"></iframe>
<iframe src={process.env.BASE_URL + "/assets/address.html"}></iframe>
<iframe src="https://awsAmplifyAddress.com/assets/address.html"></iframe>

etc...

Help...

aws-amplify angular reactjs src iframe
2 Answers

Please read the below question first answer answer

you have implemented the catch-all strategy in which all the requests to the server respond index.html which again starts rendering your app and app try to find address.html page your app route which doesn't exist in your app.

user_76883200

Abishek, you saved me so much time. Thank you so much! I completely forgot about the single page routing issue. So the solution for me was to:

  1. Go to AWS Amplify console
  2. Go to Rewrites and Redirects
  3. Add html to the source address which is for redirecting files.

See the added image Html is added

user_82596230
Related