Node（Express）/ React应用仅在本地工作

Question

Issue Outline

I have a simple Node / React app, which runs fine using heroku local .

The Node backend has an /api/users endpoint, which returns some hardcoded JSON.

After heroku local , visiting localhost:5000/users works as expected, displaying the hardcoded users as per the Users.js React component.

However, when pushed to Heroku, only the / root page works. Going to /users shows Not Found , and going to /api/users returns the JSON.

I'm not sure why it works locally and not on Heroku, any help is appreciated.

Code

Express routes:

var express = require('express');
var router = express.Router();
var path = require('path');

router.get('/api/users', function(req, res, next) {

  res.json([{id: 1, name: 'Colin'}, {id: 2, name: 'Spodie'}])
});

module.exports = router;

The Express app.js file:

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var cors = require('cors');

var config = require('./config/dev')
var index = require('./routes/index');

var app = express();
app.use(cors())

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
// serve static files from React 
app.use(express.static(path.join(__dirname, '../frontend/build')));

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

React App.js file:

import React, { Component } from 'react';
import { Switch, Route } from 'react-router-dom';
import Users from './Users';
import NotFound from './NotFound';
import Home from './Home';

class App extends Component {
  state = {users : []}

  render() {
    return (
      <div>
        <Switch>
        <Route exact path='/' component={Home}/>
        <Route exact path='/users' component={Users}/>
        <Route component={NotFound} />
        </Switch>
      </div>
    );
  }
}

export default App;

React api.js file:

const api = process.env.BACKEND_URL || 'http://localhost:5000'

export const getUsers = () => (
  fetch(`${api}/api/users`)
    .then(res => res.json())
)

React package.json

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.0.12"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:5000"
}

Screenshots

Home page running locally

Home page running on Heroku

Users page running locally

Users page running on Heroku

Answer 1

You are serving static files but you also need to forward all HTTP GET requests to client side react router so it can handle. You may want to put this route to your app.js :

app.get("*", function (req, res) {
    res.sendFile(__dirname + "/path/to/index.html")
})