通过 env 将 Node.js 连接到 React.js 的问题

Question

I have created my fullstack (Node.js and React.js) blog app and now when I want to deploy my frontend and of course backend, I have noticed, that I don't know how to do it in a proper way.

My application works fine when I use localhost but if I deploy it, my links won't be like "localhost:8080/api/blablabla", but for example some heroku slug (url) and my Node.js routes.

In my Node.js it looks like this:

And here below my app.js code:

And from React.js (frontend side) it looks like this:

So, the question is what I need to add. I suppose, that on React (frontend) must me something like env. variables with backend link? And before it, better to add backend to know what the slug (url) would be, because it is random. But I dont know do I need to add something on backend or not.

If I wrote something wrong, I will be really appreciate if you correct me:)

ThanK you in advance

Answer 1

In the last React.js image you have shared, I can see you are using axios to send the GET request. However, you are providing a url which is a localhost one. So I assume you are trying to make a request to the backend that you have hosted on Heroku, but instead, the url is pointing to your local environment. What I would recommend doing is changing the http://localhost:5000 part to the Heroku app's url.