use captive content in \public folder as an iframe source in react

Question

My react project has some areas where we want to use third-party tools (articulate storyline) which creates a HTML5 page (along with its media resources). If we place that folder on our web server separate from the react project or point the iframe to a youtube URL all is fine.

If we place the folder in \public or \src, how can we suppress react handling of the file or folder. What is happening is it recursively showing the react app instead of the wished for file.

  <div class="iframe-container">
    <iframe
      width="560"
      height="315"
      src="../../Public/Buckconverter/story.html"
      frameborder="0"
      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
      loading="lazy"
      allowfullscreen
    ></iframe>
  </div>

I have reviewed: How add raw html file to public folder in create-react-app

and

https://create-react-app.dev/docs/using-the-public-folder/#adding-assets-outside-of-the-module-system

score 0 · Answer 1 · answered Aug 25 '21 at 20:50

0

src={`${process.env.PUBLIC_URL}/Buckconverter/story.html`}

answered Aug 25 '21 at 20:50

Hamidreza

1,360
11
18

sorry, it is still retrieving a recursive copy of what seems like app.js with the default nave header and page content instead of the story.html – phoenixAZ Aug 25 '21 at 22:38
@phoenixAZ Add your `router` file to your question. – Hamidreza Aug 26 '21 at 06:35
Function App() { return (

/>
); } – phoenixAZ Aug 26 '21 at 13:20

score 0 · Answer 2 · answered Aug 27 '21 at 00:09

0

The suggestion to put it in Public was the right one top stop routing processing - I had a flaw in path src={`${process.env.PUBLIC_URL}

answered Aug 27 '21 at 00:09

phoenixAZ

429
3
17

use captive content in \public folder as an iframe source in react

2 Answers2