Hi,
I’m currently building a multiplayer card game using React.js, Node.js and Socket.io. The server is deployed using Heroku but the React front-end has been deployed using Netlify (https://spadehouse.netlify.app). However, after joining a room, refreshing the page or trying to open the same link in a new tab/window will create a GET 404 error or a “Failed to load resource: the server responded with a status of 404 ().”
The way the multiplayer part works is that when a new game is created, a randomly generated room id is appended to the URL in the form of SpadeHouse(room number here). Then, when the user sends this URL to someone else, the room number will be read from the URL and that user will be connected to the same room.
This query string mechanic works locally but it doesn’t seem to work on Netlify, and the error messages make it seem like it’s trying to read the URL as if it were an actual page when it doesn’t actually exist as a file or anything it just has the connection/room info appended to the URL for others to automatically join. If this is really what’s happening, is there a way to prevent Netlify from thinking this way? The correct query string parameters are being passed in the Network table of Chrome’s developer tools, I am not getting any server-related errors, and so far all the server-related functionality seems to be working correctly, so I believe this is just a front-end issue. Thank you.
Since I am a new user I can only post one screenshot, so here is my package.json file:
In my redirects folder I have: /* /index.html 200
UPDATE
I have it working now. For those of you who have a similar problem, add the _redirects folder to the public directory of your React app and then run npm build. I forgot the build step…
