CANNOT GET / problem with React, Node Js and Express

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!

schoinh · Accepted Answer · 2020-05-21 22:23:22Z

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)

answered May 21, 2020 at 22:23

schoinh

1165 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Emre Kelleci Over a year ago

When I do this, the browser only opens the index.html file(which is blank) and it doesn't connect with the index.js file to connect to the components. I tried putting ``` <script src="../src/index.js"> </script> ``` But it still doesn't work and it comes with additional problems.

Collectives™ on Stack Overflow

CANNOT GET / problem with React, Node Js and Express

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related