CANNOT GET / problem with React, Node Js and Express - node.js

Question

I'm getting a problem opening up my app. I already built the app using create-react-app (nodejs and express on the backend) and it's "colorsofemre.com". When I'm trying to make changes in the app though, all I get is a CANNOT GET / error on the browser.
This is my server.js
const express = require('express')
const app = express()
port = process.env.PORT || 3000 ;
var bodyParser = require('body-parser')
var path = require("path")
app.use(bodyParser.json());
var cors = require('cors');
app.use(cors());
app.use('public', express.static(path.join(__dirname, 'src')));
app.use('public', express.static(path.join(__dirname, 'public')));
app.get('/color', async (req, res) => {
MongoClient.connect(url, { useNewUrlParser: true }, (err, client) => {
if (err) return console.log(err)
// Storing a reference to the database so you can use it later
db = client.db('ColorPicker')
db.collection('Colors').find({}).toArray((err,result)=>{
if(err) throw err;
console.log(result);
res.status(200).json(result)
console.log(result);
})
});
});
app.listen(port,()=>{console.log("Listening on port"+port)});
This is my client side fetch function the get /color.
async updateArray(){
this.colors=[];
const result = await fetch(`http://localhost:3000/color`,{mode: 'cors'});
const data = await result.json();
this.arrayModified(data);
this.setState({render:true});
}
When I enable the client side I get this error
Unhandled Rejection (SyntaxError): The string did not match the expected pattern.
21 |
22 | this.colors=[];
23 | const result = await fetch(`http://localhost:3000/color`,{mode: 'cors'});
> 24 | const data = await result.json();
| ^ 25 | this.arrayModified(data);
26 | this.setState({render:true});
27 | }
And if I comment the client side fetch code, I only get Cannot /GET on my browser. Database works fine and when I go to localhost:3000/color, json data is loaded perfectly.
My file structure is
-public
-index.html
-src
-index.js
-app.js
-and other js components
-server.js
I've been trying to figure out what's wrong for 2 days. Thank youu!

Answer 1

Try adding a catch-all route like this to your server.js, to redirect your GET requests to index.html first:
app.get('/*', function(req, res) {
res.sendFile(path.join(__dirname, 'path/to/your/index.html'), function(err) {
if (err) {
res.status(500).send(err)
}
})
})
Source: Fixing the "cannot GET /URL" error on refresh with React Router and Reach Router (or how client side routers work)