Question 262294 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Can we host Frontend in React Js and Backend in Node both on same port?

I am trying to host frontend and backend both on same port but frontend component is not able to call API from backend and one component is not getting loaded in frontend where API function code is described.

While manually I tried, the data is getting loaded from API but in React component it is not getting called. FE and BE both are in same folder having common package.json file.

Tags:

2

Answers


  1. 0

    No. Two processes (servers) cannot bind to the same port. You must host them in different ports.

    Login or Signup to reply.
  2. 0

    sure you can It sounds like you are facing issues with hosting your frontend and backend on the same port, and your React frontend is not able to make API calls to your backend. Here are some common steps and troubleshooting tips to help you resolve this issue:

    1. Check CORS Policy: Cross-Origin Resource Sharing (CORS) can prevent your frontend from making API calls to a different domain or port. Make sure your backend API is configured to allow requests from your frontend domain. You can do this by setting appropriate CORS headers in your backend code.

      Example in Express.js (Node.js backend):

      const express = require('express');
const cors = require('cors');

const app = express();

// Allow requests from your frontend domain
app.use(cors({ origin: 'http://your-frontend-domain.com' }));

// Other middleware and route handling here

// Start the server
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

    2. Check API Endpoint: Ensure that the API endpoints in your frontend code are correctly configured to point to the backend server. Double-check the URL and port in your API calls to make sure they match your backend configuration.

      Example in React:

      const apiUrl = 'http://localhost:3000/api/data'; // Replace with your backend URL

fetch(apiUrl)
  .then(response => response.json())
  .then(data => {
    // Process the data
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

    3. Verify Port Configuration: Make sure that your frontend and backend are actually running on the same port and that there are no conflicting port configurations. Both your frontend and backend should not attempt to use the same port.

    4. Check for Errors: In your frontend code, check the browser’s developer console for any error messages related to failed API requests. This can provide valuable information about what might be going wrong.

    5. Network Request Inspection: You can use browser developer tools (e.g., Chrome DevTools) to inspect network requests. Check if the API requests are being made, and if there are any error responses.

    6. Proxy Configuration: If you’re using a development server like Create React App’s development server (usually runs on port 3000) and a separate backend server, you may need to configure a proxy to forward API requests from the frontend to the backend during development. This is typically done in your package.json file:

      "proxy": "http://localhost:3001" // Replace with your backend URL

    7. Firewall and Security: Ensure that your firewall or security settings are not blocking requests between your frontend and backend.

    8. Console Logging: Add console logs in your frontend code to help debug where the issue might be occurring. Log the API request URL and any error messages.

    By systematically checking these points, you should be able to identify and resolve the issue preventing your React frontend from making API calls to your backend when they are hosted on the same port.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search