0

I'm trying to connect node.js with react.js but proxy is not working

this is server.js server starts on localhost:5000

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

server.use(cors())

server.get('/api',(req,res)=>{
    res.json({"server":["ready","link start"]})
})

server.listen(process.env.PORT || 5000,()=>{
    console.log('link start.....!!!');
})

this is package.json in react and i don't know why the proxy does not work

{
  "name": "clone",
  "devServer": {
    "inline": true,
    "contentBase": "./dist",
    "proxy": {
      "/api/**": {
        "target": "http://localhost:5000/",
        "secure": false
      }
    }
  },
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "express": "^4.18.1",
    "nodemon": "^2.0.18",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
  "main": "index.js",
  "keywords": [],
  "author": "",
  "license": "ISC"
}

this is App.js App.js react

import logo from './logo.svg';
import './App.css';
import React,{useEffect,useState} from 'react';

function App() {
  const [backend,setbackend]=useState([{}]);
  useEffect(()=>{
    fetch('/api').then(
       response => response.json()
    ).then(
      data=>{
        setbackend(data)
      }
    )
  },[])

  return (
    <div></div>
  );
}

export default App;

I want to start react on localhost:5000

  • how should I do it
  • I don't know what is wrong

*- thank you for help

Trevor Johnson
  • 874
  • 5
  • 19
Rapeepath
  • 1
  • Can you please share the error you are encountering with the API call in the React app? – Trevor Johnson Jun 28 '22 at 21:40
  • sorry there is no error, but when i setup proxy there is no happen react still started on localhost:3000 – Rapeepath Jun 29 '22 at 17:25
  • Your server is running on localhost:5000. Your react app is running on localhost:3000. You cannot run two apps on the same port. The "proxy" config in your package.json is to proxy http requests from localhost:3000 to localhost:5000. – Trevor Johnson Jun 29 '22 at 22:09
  • you need to remove package-lock.json and node_modules from React app then do npm install for more information this is the answer https://stackoverflow.com/questions/48291950/proxy-not-working-for-react-and-node – Naved Khan Nov 17 '22 at 17:26

0 Answers0