CODEWITHSUNDEEP
node.jsreactjsexpressserverget
Emre Kelleci
Emre Kelleci

Reputation: 119

CANNOT GET / problem with React, Node Js and Express

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!

Upvotes: 1

Views: 3061

Answers (1)

schoinh
schoinh

Reputation: 116

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)

Upvotes: 1

Related Questions