How do I get sever.js working after deploying to Azure Web Apps?

Question

I recently deployed my React and Node js web app to Azure web apps but I'm having an issue accessing APIs in my backend server.

For example, running locally, the following works correctly.

const response = await fetch(http://localhost:5000/api/some-function)

const data = await response.json()

For deployment, I would use

const response = await fetch(http://{app-name}.azurewebsites.net/api/some-function)

const data = await response.json()

which fails to work properly.

This is what I have in my package.json:

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --passWithNoTests",
    "eject": "react-scripts eject"
  },

When I'm testing locally I would always have to start the server doing node server.js manually. But, I'm not quite sure how this will work when deploying to Azure. Can someone please help explain what I'm doing wrong? The server uses process.env.PORT, so I don't think I'm using the incorrect port. Thank you!

Edit: I ended up installing concurrently and editing the start script to.

   "start": "concurrently  \"react-scripts start\" \"node server.js\"" 

Final Edit: I changed the start script to just use node server.js and used the following for the front end.

app.use('/', express.static(__dirname + '/build'));
const PORT = process.env.PORT || 5000;
app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, '/build', 'index.html'));
});
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Answer 1

Hi @Elythorix Thanks for bringing this our attention. There are a few things to check to get your Node.js backend communicating properly with your React frontend when deployed to Azure App Service:

1. In your local environment, you manually start your server with node server.js. In Azure, you need to specify this command in your package.json under the scripts section. You can add a start script like "start": "node server.js". This tells Azure how to start your application
2. Make sure both the React and Node.js apps are deployed to the same App Service instance. They need to share the domain name to communicate.
3. In your Node.js app, listen on process.env.PORT for the port instead of a hardcoded one. Azure will assign a port.
4. If your frontend and backend are deployed separately, you might run into Cross-Origin Resource Sharing (CORS) issues. Make sure the correct CORS settings are in place in your Azure App Service

Hope that helps.

-Grace