Trying to create a basic web application and host it on render with a socket.io "backend"

1

Hello, I am a beginner developer who has just finished my first react project. I created a multiplayer chess application that uses socket.io as a “backend” to send requests from two different clients and tell them about the state of the game, move the pieces, set up a win condition and reload when players leave.

This all works on the localhost in react. However I am having some issues getting it to work when I host it to render. I am positive I am messing some sort of setting up. I tried using the the static site option that render has. However while it loads my front end correctly. My backend service doesn’t seem to work.

I tried to fix it by using a web service and then utilizing npm install; npm run build for my (I don’t have much familiarity with yarn) for my build command.
Then for the start command I added my npm run “startServer” script that I created in my package.json (“node multiplayer_chess_backend/src/index.js”).

However I got a “CANNOT GET /” error when I attempted this.

I managed to get a production react app running locally on it’s default port with npx serve -s build

However I heard that you need to use a static server for it to work with render?
How would I deploy a static server for a react app? Also how would I utilize socket.io if I only had a static server, wouldn’t I need a web service as well? How would I combine both static server and web service? I heard it’s possible to use monorepository with render.yaml files. But I am a bit confused by the documentation.

I am probably making some simple mistake, but I genuinely wish to improve, and would greatly appreciate if someone could help me solve this problem.

Thanks for your time,
-Evan

2

By the way, here is my repository for this app.

3

So I think I found a solution to my problem.
The reason the backend wasn’t connecting to the frontend was because I had to create both a web service for my backend and a static webpage for my react app front end.

I then needed to make sure that my socket.io/cors connection between backend and frontend matched the render website links that would be generated. I also had to ensure that I used a rewrite setting in render so that all links would be rewritten to /index.html.

With that I was able to deploy my app successfully, although it is clear I need to optimize the size of the site and some other connection settings.

Thanks,
-Evan

4

Hey Evan,

I’m glad to hear that the issue was resolved from our end. If you’re still experiencing any problems, please reach out to us using the “Contact Support” form in the dashboard. We’ll be happy to investigate the issue further.

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

5

Thanks Jeremy!

6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.