Can a React app link to a static html on the public folder?

990 Views Asked by At

I'm creating a react app with react-router to change pages but I have a static html which contains a Unity webgl. I'm not able to embed the webgl on the react app or not sure if it's possible but I'm sure that the Unity webgl works on a standalone html since it runs during the build and run of Unity so I just want to dump the Unity build files (UnityWebGl.html, Build folder, TemplateData folder) in the public folder of the website then use a href tag on react to link to it without being intercepted by react-router.

Honestly I was able to make it work on my first try using a href tag but was stupid enough not to git commit. This seems to be unstable too so I would like to know the proper way of linking to a static html in react app without using a backend server.

So I added the UnityWebGl.html, Build and TemplateData folder which are created by Unity on the public folder of the website. [Image]: https://i.stack.imgur.com/DWiQF.png

This is the href tag on a component that links to the static html: <a target="_blank" href="/UnityWebGl.html"><Button>View Demo</Button></a>

I didn't add the route for the static html on the react-router but not sure if I have to since I'm not using the Link to go to the static html page:

<Router>
  <div className="App">
    <Switch>
      <Route exact path="/unitywebglsamples">
        <Header />
        <Samples />
      </Route>
      <Route exact path="/myhomepage">
        <Header />
      </Route>
      <Route exact path="/">
        <Header />
      </Route>
    </Switch>
  </div>
</Router>

BTW I've seen a few similar questions here in stack but all of them didn't have a valid answer or didn't worked for me.

UPDATE: I kind of gave up on this. Maybe React JS is not ready to host WebGl or static html or I just don't know how to do both but for those who are also stuck with this problem, I have an alternative solution. Just upload your WebGL build folder in https://simmer.io to host it temporarily until a tested solution comes into play.

1

There are 1 best solutions below

0
On

Maybe I don't fully understand the question. But how about simply creating a component with an iframe showing this html file? I understand, this file is not in your hands, but given from elsewhere, so that you cannot put it's contents into a component yourself?