I am following tutorial for implementing MERN but I got stuck with the error that says: GET 404 (Not Found) I did everything correct but I can not get around the problem. Below are my files, Can anyone form the community help so I can move forward. I really appreciate your help. Thank you all.
Frontend Folder: App.js
import React, { Component} from 'react' ; // import logo from './logo.svg'; import './App.css'; import axios from 'axios' ; class App extends Component { state = { hello: null } componentDidMount() { axios.get('/hello') .then( res => this.setState({ hello: res.data })) .catch( err => console.log(err) ) } render() { return ( <div> {this.state.hello ? <div> {this.state.hello} </div> : null } </div> ); } } export default App; Backend Folder: App.js
var createError = require('http-errors'); var express = require('express'); var path = require('path'); var cookieParser = require('cookie-parser'); var logger = require('morgan'); //import the 'routes' file var indexRouter = require('./routes') var app = express(); // view engine setup app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'jade'); app.use(logger('dev')); app.use(express.json()); app.use(express.urlencoded({ extended: false })); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public'))); // use indexRouter app.use('/', indexRouter); module.exports = app; routes
var express = require('express'); var router = express.Router() router.get('/hello', function(req, res) { res.json('hello world') ; }) // this is exported to app.js in the Server folder module.exports = router ; Frontend Folder: package.json
... "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "proxy": "", <==== pointing to localhost "browserslist": { "production": [ ">0.2%", ... 1 Answer
Ok, i took your code and first issue is that your request is sent to - meaning it will take port of your frontend (assume you want to run FE and BE separately, ports 3000 and 3001 for instance) 
After i fix axios.get('/hello') with axios.get('), we get to the second issue. I get CORS issue.
In order to fix this we have to configure cors on our express backend - . Actions: npm i cors and add app.use(cors()); Now if we re-run our backend with node index.js and refresh our frontend page - we get response 200 OK.
And third issue is - you don't have app.listen(). app.listen(PORT, () => console.log(`app listening at ))
Ok here is the code. First, i removed all extra dependencies for which i thought are not relevant for this case. Then after i make it all working, i put them back, but on some places i might forgot to return all. Also i put your get route directly in index.js - so that differs as well from your code (you put it in separate module). As I say, i tried to keep things simple and easy to grasp.
BE (i run it with node index.js
var express = require('express'); var path = require('path'); var cors = require('cors') var createError = require('http-errors'); var cookieParser = require('cookie-parser'); var logger = require('morgan'); var app = express(); const PORT = 3000; app.use(cors()) app.use(express.json()); app.use(express.urlencoded({ extended: false })); app.use(express.static(path.join(__dirname, 'public'))); app.use(logger('dev')); app.use(cookieParser()); app.get('/hello', function(req, res) { res.send('hello world') ; }) app.listen(PORT, () => console.log(`app listening at )) module.exports = app; FE (start it with npm start - it is create-react-app - port 3001, because backend runs on port 3000)
export class App extends React.Component { state = { hello: null } componentDidMount() { axios.get(') .then( res => this.setState({ hello: res.data })) .catch( err => console.log(err) ) } render() { return ( <div> {this.state.hello ? <div> {this.state.hello} </div> : null } </div> ); } } 
