如何让我的 MERN 应用程序在 heroku 上正确刷新？

Question

I deployed my MERN app to heroku. It loads, and I can navigate between pages by clicking on the nav bar. But, if I refresh a page, it just comes up blank. There are no error messages on the screen or in the console. If I go back to a previous page that worked before, it also comes up blank. At this point, I don't know what to look for.

Answer 1

My problem stemmed from incorrectly defining the root react route in my server.js file. I got the home page to render and refresh, but then the app would not load any other pages. Here is the server.js file at that point:

const express = require("express");
const mongoose = require("mongoose");
const routes = require("./routes");
const app = express();
// set the port for mongo connection to 3001 in development mode
const PORT = process.env.PORT || 3001;

// Configure body parsing for AJAX requests
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
// Serve up static assets
if (process.env.NODE_ENV === "production") {
  app.use(express.static("client/build"));
  app.get("*", function (req, res) {
     res.sendFile(path.join(__dirname, "./client/build/index.html"));
});
}

app.use(routes);

mongoose.connect(
  process.env.MONGODB_URI || "mongodb://localhost/portfolio_db",
  {
    useCreateIndex: true,
    useNewUrlParser: true,
    useUnifiedTopology: true,
    useFindAndModify: false,
  }
);

// Start the API server on port 3001
app.listen(PORT, () =>
  console.log(`🌎  ==> API Server now listening on PORT ${PORT}!`)
);

This sort of fixed my problem, but the app still wasn't routing properly, so I posted this: new issue

Basically, there where 3 problems:

1. 'path' wasn't required at the top of the file, so the path to index.html wasn't defined (had to look at heroku logs to see this error).
2. The default react route (app.get('*'....)) should not be in the if statement, and
3. The default react route statement needed to be below the 'app.use(routes)' statement.

I also deleted a statement defining the default react route in /routes/index.js. Now the app deploys and routes correctly.

Answer 2

I was also getting same error "cannot get /page" whenever I did refresh or window.location() So after 3 days of trials and deploys I found this solution. Add this in your server.js file before deploying.

 if(process.env.NODE_ENV === "production") {
    app.use(express.static("client/build"));
    app.get("/*", function(req, res) {
        res.sendFile(path.join(__dirname, "./client/build/index.html"));
      }); }

You can add this code snippet before app.listen. Remember the path says./client/build/index.html which references to your build file in the production build in remote heroku master.

cannot get /page happens because the server is not able to find the route which was created using react-router or anything else in frontend so we need to direct the app to index.html in production build so that it starts the whole frontend process again and identifies the route...