Problem while inserting a standalone game project (HTML/JS) inside a React component in production mode

1

I want to render a standlone html js project (game project) inside a react component. In my local machine it works fine with this code:

const GAME_URL = "/src/StandloneGames/Tetris/index.html"; 

const Tetris = () => {
  return (
    <TetrisWrapper>
      <div>
        <iframe src={GAME_URL} className="iframe"></iframe>
      </div>
    </TetrisWrapper>
  );
};

export default Tetris;

But when i have used Render for deployment i received 404 error !

Here are Render settings :

render config
render config973×468 21.8 KB

2

Hey,

There could be different reasons to that.

It looks like there’s a typo in the folder name “StandloneGames”. Should it be “StandaloneGames”?

Ensure that the ‘GAME_URL’ path resolves correctly within the Render server. Consider using relative paths rather than absolute ones.

On a side note, any reason for not directly deploying the single index.html? What’s the role of the ‘TetrisWrapper’ component in this setup? And is React essential here?

Jérémy.
Render Support, UTC+3

1 Like
3

Hello ,
-So in all the project i have used ‘StandloneGames’ ! (without ‘a’)
-Using absolute path , I have succeeded one time to run the component correctly ! (but when i have tried to add more routes i I lost them all !)
-‘TetrisWrapper’ is used for styling reason (using styled components)

I’ll try another time to present the problem (it works fine locally) :
This is a global image:

render problem
render problem1763×485 73.1 KB

-For render redirects rewrites (I ahve already tried many things with Redirects/Rewrites but now are empty) :

4

Hey,

I’m not entirely certain about the steps you’ve taken, but it seems you might be encountering a 404 error due to missing static files. Without direct access to your service, it’s challenging to pinpoint the issue, even with the screenshots you’ve provided.

To address this, ensure you’ve set up re-writes to direct incoming requests to your index.html or to your client-side router.

Jérémy.
Render Support, UTC+3

1 Like
6

Hey,

Are you OK with providing your website URL here?

Jérémy.
Render Support, UTC+3

7

123
1231045×561 202 KB

8

Hey,

These errors are related to your code, and there’s limited assistance I can offer without access to it. I’d recommend using Google to troubleshoot the issues you’re encountering. If you need further assistance from us, please share the steps you’ve taken and any other relevant details.

Jérémy.
Render Support, UTC+3