React site only shows HTML page on refresh

ScottCPetty · August 2, 2024, 3:51pm

Site: https://dungeondelvegame.netlify.app/

Site Overview: Netlify

GitHub Repo: GitHub - ScottCPetty/capstone_frontend

Our React site renders a game that we built in HTML and JS (not very elegant, but it’s what we could do with our skills and time). When it’s hosted locally, it works fine. But on Netlify, if you refresh the game page, it only renders the HTML and JS. This means all of the React stuff (nav bar, high score, even CSS) is gone, and the game is all but unplayable.

We’ve tried making the game refresh itself, but that doesn’t work. Tried searching the forums and asking the AI, neither one seemed to help me.

nathanmartin · August 3, 2024, 1:07am

@ScottCPetty This is occurring because your React based main site is a Single Page Application (SPA), and you’re encountering additional confusion because you also have a separate game.html file.

To run through and explain.

Everything works when you load:
https://dungeondelvegame.netlify.app

This is because you’ve loaded the main application.
Changes to other pages occur only “in the application”, they’re effectively simulated.

A simple way to demonstrate this is with your /login page, which isn’t a traditional page at all.

If you navigate to /login you see:

If you look at the network tab of your developer tools, you’ll find no request was made for /login

But if you try to refresh on that page, or navigate directly to /login you will get a 404
https://dungeondelvegame.netlify.app/login

If you look at the network tab of your developer tools, you’ll find it did make a request for /login

So while your site has a /login page, it does not have a /login.html page.

The issue with your /game page is the same, except your site does have a /game.html page.

github.com

ScottCPetty/capstone_frontend/blob/main/public/game.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dungeon Crawler Game</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <img src="./warlord-helmet.png" alt="player" class="icon" />
    <img src="./crowned-skull.png" alt="boss" class="icon" />
    <img src="./stairs-25.png" alt="stairs" class="icon" />
    <div class="game-wrapper">
      <div id="left-sidebar">
        <div id="character-portrait">
          <img src="./assets/gamer1.jpg" alt="Character Portrait" />
        </div>
        <div id="instructions">
          <h3>Instructions</h3>
          <p>Use W, A, S, D to move.</p>

This file has been truncated. show original

Your /public/game.html file will be getting output as /game.html
When the browser makes an actual request to /game it will be given that file.
That file does not contain any of the React logic, so that’s why none of it displays.

I can’t advise precisely what you need to do with the game files themselves, as I’ve barely looked at them, but the main fix you’re looking for is in the documentation here:

https://docs.netlify.com/frameworks/react/
https://docs.netlify.com/configure-builds/javascript-spas/

The rewrite rule that you add to your _redirects file is outlined here:
https://docs.netlify.com/routing/redirects/rewrites-proxies/#history-pushstate-and-single-page-apps

Adding that would ensure that a request for /login is returned the contents for your /index.html file, which in turn will handle the /login route and display the appropriate content.

In the case of your /game route, you would need to ensure there is no /game.html file, otherwise that would take precedence and be served instead of the rewrite.

You could remove it if it’s unnecessary, or otherwise rename it so the paths do not collide.

ScottCPetty · August 3, 2024, 2:05am

Aaah, thank you. I didn’t know Netlify worked that way with React apps. I changed the file names for the game’s HTML and JS, and then added the _redirects file. Just in time for the deadline too, lol. Thanks again.