I have a webhook on another service provider which sends data to my app on render.
My service on render is composed of 2 parts, a node server and a react client. Before implementing webhook i was able to communicate between client and server. Right after i added webhook on PORT 10000, i started to get “cannot GET” message on the client side. On the documentation it reads,
Render forwards inbound traffic to only one HTTP port per web service. However, your web service can bind to additional ports to receive traffic over your private network.
Does this mean i can only receive POST requests or GET requests on a single web service?
What I need to have is to listen to a webhook from a public provider → Parse and filter JSON data → use the data in React app
Can you please help me with the workaround? It is frustrating for me as a newbie developer to encounter more and more obstacles as I just say “oh yes I did it now”
Every app is different, their purpose, style & implementation can vary wildly so providing specific advice can be difficult. You’ve not provided too much technical detail here, but it sounds like you may be misunderstanding how React and a backend server/API usually communicate or maybe how to prepare a React app for production. Web Services can only expose one port to the public internet, which is almost all cases is enough.
The most common set up we see on Render is a separation of frontend and backend services.
React apps are often static client-side code (unless it uses server-side rendering, SSR). When deploying to Render they’re often deployed to a Static Site as per our guide: https://docs.render.com/deploy-create-react-app. Build the React app for production and deploy the static files.
The backend would then be deployed to a Web Service, and the client-side React code would reference the backend’s URL to communicate from the client-side (the browser).
Another approach can be to serve the React files and the backend through one Web Service.
The official Create React App deployment docs show an example of that approach: https://create-react-app.dev/docs/deployment/#other-solutions. The React app still needs to be built for production, but instead of being served by a Render Static Site, you would configure your backend to serve those files.
However, even though both the frontend and backend are being served from a single service in this scenario, the React app will still be making calls from the client side (from the browser, not privately/server-side).
Before integrating the webhook, i was building both react client and node.js server on web service using “concurrently”. In that case, everything was working fine. I was able to interact with the client while the server had an event listener on a blockchain.
After i also needed a data provider and implemented webhook, i started to get “cannot GET” message on the client, while node.js server doing successfully what it has to do (Listening for webhook events & listening for blockchain events)
So, i think i can not have a web service using 2 ports one for POST requests and other for GET requests? I should build one web service that hosts my Node.js server that listens for webhooks and one static React site?
