Reload not working with mern stack on heroku-CodePudding

I have deployed my mern stack to heroku with this code:

import express from "express";
import path from "path";

const app = express();
const port = process.env.PORT || 5000;

app.get("/health-check", (req, res) => {
  res.sendStatus(200);
});

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.listen(port, () => console.log(`Listening on port ${port}`));

My website and the routing with react-router-dom work perfectly fine. However I have two issues that I cannot solve.

when I reload the page I see a blank page with this message an error message in the console:

Not Found (blank page with this message)

GET https://website.herokuapp.com/login 404 (Not Found)

when I open the app for the first time I have this error printed in the console:

Failed to load resource: the server responded with a status of 404 (Not Found)

I have no idea how to remove those errors as I have followed every answers on stackOverflow and youtube.

Any help would be appreciated.

Many thanks.

CodePudding user response：

Found the answer after a while

because I am user typescript and my index file is inside the src folder I forgot to go back one level.

"../client/build/index.html"

instead of

"./client/build/index.html"

full index.ts:

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