How To Deploy Node JS API and React JS app in Azure App services

Hello Thirupathi,

To identify and resolve why your React.js application is not receiving data from your Node.js API after deployment, follow these steps: 

Step 1: Diagnose connectivity between React and Node.js

If your React front-end is deployed on a different domain or port than your Node.js API, your web browser will block cross-origin requests by default due to the Same-Origin Policy. 

How to check:

1. Open your React application in a web browser.
2. Open the browser's developer tools (right-click, then click Inspect).
3. Navigate to the Console tab.
4. Look for "CORS policy" or "Cross-Origin Request Blocked" errors. 

How to fix (in your Node.js API):

• Install the cors middleware using npm install cors.
• In your Node.js Express server file, add the following code to enable CORS from all origins:javascript `const express = require('express'); const cors = require('cors'); const app = express(); app.use(cors()); ` Use code with caution.
• For better security, specify the exact domain of your React app instead of using a wildcard (*). Replace 'https://your-react-app.azurewebsites.net' with your actual URL:javascript app.use(cors({ origin: 'https://your-react-app.azurewebsites.net' })); Use code with caution.
  • Save the file, re-deploy your Node.js API, and check if the React app can now receive data. 

Step 2: Verify API endpoint URLs

In your React app, API calls often point to http://localhost:5000 during local development. After deployment, these endpoints must be updated to use the production URL of your Node.js App Service, such as https://your-api-app.azurewebsites.net. 

How to check:

1. In your React app's source code, find where API requests are made (e.g., using fetch or axios).
2. Confirm that the base URL is not hardcoded to localhost. 

How to fix:

• Use environment variables: The best practice is to set the API URL in a production environment variable within the React App Service.
  1. In the Azure Portal, go to your React App Service.
     1. Navigate to Settings > Configuration and find the Application settings.
        1. Add a new setting named REACT_APP_API_URL (or a similar name) with the value of your Node.js API's URL (https://your-api-app.azurewebsites.net).
• Update your React code to use the environment variable:javascript const API_URL = process.env.REACT_APP_API_URL; fetch(`${API_URL}/your-endpoint`); Use code with caution.  

Step 3: Check database connection in the Node.js API

If the API endpoint is reachable but no data is returned, the Node.js API may be failing to connect to the database. 

How to check (via App Service logs):

1. In the Azure Portal, go to your Node.js App Service.
2. Navigate to Monitoring > Log Stream. This will show you real-time logs from your application.
3. Look for any database connection errors, authentication failures, or other exceptions. 

How to fix:

1. Check the database connection string: A common mistake is not providing the database connection string in the production environment.
   • In the Azure Portal, go to your Node.js App Service and navigate to Settings > Configuration.
     • Add a new Application setting for your database connection string, matching the environment variable name used in your Node.js code (e.g., DATABASE_URL).
       • Ensure the value is the correct connection string for your production database.
       1. Allow network access: Your database may be configured to block access from outside its virtual network.
          • For Azure databases like Azure Database for MySQL or Azure Cosmos DB, you must configure network settings to allow connections from your App Service.
            • Add a firewall rule to permit access from the App Service's outbound IP addresses. 

Step 4: Examine API and deployment issues

Other issues might prevent your API from running correctly in the production environment. 

How to check:

1. In the Azure Portal, go to your Node.js App Service.
2. Check the Log Stream again and look for:
   • npm install errors or missing dependencies.
     • Port-related issues. Azure App Service may require your Node.js server to listen on the PORT environment variable. 

How to fix:

1. Configure the port: Modify your Node.js code to listen on the port specified by the environment variable PORT:javascript const port = process.env.PORT || 8080; app.listen(port, () => { console.log(`Server listening on port ${port}`); }); Use code with caution.
2. Check environment-specific configurations: Review your Node.js code for any logic that depends on the NODE_ENV variable. Make sure that your app is using the correct production configuration, not the development settings.

Regards,

Raviteja M.