React APP with Express node.js backend.  API calls not reaching the backend.

David Barman
David Barman used Ask the Experts™
on
Needs some advice regarding REACT with an Express front end for API database requests.  I have added the proxy entry the package.json file.  However, the api requests are still be served by the REACT app.  I need some advice on what I am doing wrong.

Here is my package.json file:
{
"name": "ubwo",
"version": "0.1.0",
"private": true,
"proxy":"localhost:5000/",
"dependencies": {
"react": "16.8.6",
"react-dom": "16.8.6",
"react-redux": "7.1.0",
"react-router": "5.0.1",
"react-router-dom": "5.0.1",
"react-scripts": "3.0.1",
"redux": "4.0.1",
"redux-thunk": "2.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"resolutions": {
"browserslist": "4.6.2",
"caniuse-lite": "1.0.30000974"
}
}

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Hi,

You need the backend Express server
Without the backend Express server, React client still run

Here is a  JSON example with Express server that runs on port 5000

In the root directory locate/server/server.js
const express = require('express');
const app = express();
const port = 5000;

app.use(express.urlencoded({ extended: true }));
app.use(express.json());

require('./routes')(app);

app.get('/', (req, res) => {
	res.send('PORT 5000');
})


app.listen(port, (err) => {
	if(err) { console.log(err) };
	console.log('Listening on port ' + port);
})

Open in new window

Author

Commented:
I already have the express backend server in place running on port 5000.
Could you add this to check the port

app.listen(port, (err) => {
	if(err) { console.log(err) };
	console.log('Listening on port ' + port);
})

Open in new window

Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Currently, my server.js file is as follows:
const express = require('express');
const bodyParser = require('body-parser');

const app = express();
const port = process.env.PORT || 5000;

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.get('/api/cust', (req, res) => {
  res.send([{ name: 'Customer path' }]);
});

app.get('/api/cust/all', (req, res) => {
    res.send([{ name: 'Return all customer records' }]);
  });

app.post('/api/world', (req, res) => {
  console.log(req.body);
  res.send(
    `I received your POST request. This is what you sent me: ${req.body.post}`,
  );
});

app.listen(port, () => console.log(`Listening on port ${port}`));

it displays the port number on the last line.
Ok, I know my code work ok and your code is different so you may want to compare and test what is different to find the problem.

You have not set any route
require('./routes')(app);

Open in new window



And you are not using the port when res.send
app.get('/', (req, res) => {
	res.send('PORT 5000');
})

Open in new window


Check if all path are ok

Check in your log file for any errors

Author

Commented:
if I use http://localhost/api/cust/all in a browser it returns the JSON data.  So I am thinking the backend server is working fine.
Could you elaborate on how you test to figure out that it serve by REST not by Express..

Author

Commented:
I am seeing a 404 error in the browser console that is referencing the URL of the React application.
Hi,

Here is how to fix the problem  
https://medium.com/@swatantramishra1/react-client-side-routing-404-error-72e7d0596766

You will find several way to fix that with pros and cons:
Hash History
Catch-all
Hybrid
Isomorphic

Author

Commented:
The issue was that method I was using to call the API wasn't working.  I switched to Axios and now the GET requests are working.
However, I am trying to implement a POST request to insert records into a table.  The form data is quite large (29 different fields).  I am passing the data via a JSON object.  Is there a easy way to parse the JSON data into a MySQL insert query or do I have to explicitly code each field and the values from the JSON object?

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial