How to set up nodejs requests with heroku

I have a PERN react-native expo app that currently has fetch requests, origin, and server ports configured like this (shown below) and it's my first time using Heroku. I'm trying to get my app working with heroku instead of relying on my local machine, but I'm having trouble correctly modifying the urls.

This is how I had it working on my mac without heroku, and the commented out lines are what I'm trying now that I have a heroku app (using an example name):

In server/index.js:

const io = new Server(server, {
  cors: {
    origin: "http://127.0.0.1:3000",
   // origin: "https://my-example-app.herokuapp.com",
    credentials: true,
  },
});

app.use(
  cors({
    origin: "http://127.0.0.1:3000",
    // origin: "https://my-example-app.herokuapp.com",
    credentials: true,
  })
);

server.listen(4000, () => {
  console.log("server listening on port 4000");
});

In app/components/LoginScreen.jsx (for example), I have:

            fetch("http://127.0.0.1:4000/auth/login", {
            // fetch("https://my-example-app.herokuapp.com:4000/auth/login", {
              method: "POST",
              credentials: "include",
              headers: {
                "Content-Type": "application/json",
              },
              body: JSON.stringify(vals),
            })

And it's not working. I know I must be doing something wrong with replacing the urls for the server, the requests, and maybe the origins in index.js, too. For each part, the commented out part is what I've tried. What is the correct way to go about this? I have the heroku postgres database configured and working, just not understanding how to make the server part work so that my app doesn't need my local machine turned on in order to have a working server.

Solution

Replace This

server.listen(4000, () => {
  console.log("server listening on port 4000");
});

with This

const port = process.env.PORT || 4000;
server.listen(port, () => {
  console.log("server listening on port 4000");
});

And do not forget to replace the urls....

Also in heroku website there is a documentation that explain what you should do before upload your app.

Edit:- If you have any problem you can visit heroku website https://devcenter.heroku.com/articles/deploying-nodejs

Edit:-

const io = new Server(server, {
  cors: {
    origin: "https://my-example-app.herokuapp.com",
    credentials: true,
  },
});

app.use(
  cors({
    origin: "https://my-example-app.herokuapp.com",
    credentials: true,
  })
);
const port = process.env.PORT || 4000;
server.listen(port, () => {
  console.log("server listening on port " + port);
});

also you should edit your package.json file I assume that the file name of your above code is server.js


{
  "name": "your project name",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    *** Remove any line inside this block and add this one. ***
    "start": "node server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
   
  }
}

Edit :-

I didn't notice this part when I edited last time

fetch("https://my-example-app.herokuapp.com/auth/login",
    {
        method: "POST",
        credentials: "include",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify(vals),
     }
);