deploying mern app to heroku. error message: Not found

Question

I have made a MERN app. Locally it works perfectly with no errors but, when I deploy it to Heroku it builds successfully but, it doesn't show my react app. I only get a error message which says Not Found. I don't understand why it can't find the path.

What I have tried:

• Changing the homepage in package.json to from none to "." and now to the actual webpage url
• Whitelisting all urls on Heroku by adding 0.0.0.0
• in server.js changing app.get("*") to "/" and "/*"
• Specifying node version
• Added .htaccess file
• Cleaning the client folder, leaving it with only necessary react setup files.

You can see the page here

App structure

-Api
 --Client

Heroku Logs

2021-03-15T14:21:40.000000+00:00 app[api]: Build succeeded
2021-03-15T14:21:40.862882+00:00 heroku[web.1]: Restarting
2021-03-15T14:21:40.873048+00:00 heroku[web.1]: State changed from up to starting
2021-03-15T14:21:41.847346+00:00 heroku[web.1]: Stopping all processes with SIGTERM
2021-03-15T14:21:41.976552+00:00 heroku[web.1]: Process exited with status 143
2021-03-15T14:21:49.972188+00:00 heroku[web.1]: Starting process with command `npm start`
2021-03-15T14:21:52.197649+00:00 app[web.1]: 
2021-03-15T14:21:52.197660+00:00 app[web.1]: > [email protected] start /app
2021-03-15T14:21:52.197662+00:00 app[web.1]: > node server.js
2021-03-15T14:21:52.197663+00:00 app[web.1]: 
2021-03-15T14:21:52.909951+00:00 app[web.1]: server is up and listening on port 15638
2021-03-15T14:21:53.036086+00:00 heroku[web.1]: State changed from starting to up
2021-03-15T14:21:53.340517+00:00 app[web.1]: MongoDb is connected!
2021-03-15T14:24:02.426508+00:00 heroku[router]: at=info method=GET path="/" host=testappah.herokuapp.com request_id=1448316d-899f-4dd2-afc4-eb3b818d886f fwd="213.164.214.250" dyno=web.1 connect=1ms service=17ms status=404 bytes=279 protocol=https
2021-03-15T14:24:02.428663+00:00 app[web.1]: GET / 404 6.799 ms - 33

package.json in api

{
  "name": "api",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "homepage": "https://testappah.herokuapp.com",
  "scripts": {
    "client-install": "npm install --prefix client",
    "start": "node server.js",
    "server": "nodemon server.js",
    "client": "npm start --prefix client",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\""
  },
  "author": "Jonathan Jonsson",
  "license": "MIT",
  "dependencies": {
    "bcrypt": "^3.0.8",
    "concurrently": "^4.1.2",
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "jsonwebtoken": "^8.5.1",
    "mongodb": "^3.6.3",
    "mongoose": "^5.11.15",
    "morgan": "^1.10.0",
    "passport": "^0.4.1",
    "passport-jwt": "^4.0.0"
  }
}

server.js

const mongoose = require("mongoose");
const express = require("express");
const app = express();
const morgan = require("morgan");
const connectDb = require("./config/db");
const path = require("path");

const cors = require("cors");
require("dotenv/config");
const passport = require("passport");

//Import routes
const usersRoute = require("./routes/users");
const productsRoute = require("./routes/products");
const orderRoute = require("./routes/orders");
const categoriesRoute = require("./routes/categories");
const adminRoute = require("./routes/admin");

// Fix deprication warning
mongoose.set("useCreateIndex", true);

//logger
app.use(morgan("dev"));

//parser
app.use(express.urlencoded({ extended: true }));
app.use(express.json());

//Connect to mongoDb
connectDb();

//cors
app.use(cors());

// passport middleware
app.use(passport.initialize());

// passport config
require("./config/passport")(passport);

// Handle routes
app.use("/users", usersRoute);
app.use("/products", productsRoute);
app.use("/orders", orderRoute);
app.use("/categories", categoriesRoute);
app.use("/admin-dashboard", adminRoute);

app.use((req, res, next) => {
  const error = new Error("Not found");
  error.status = 404;
  next(error);
});

app.use((error, req, res, next) => {
  res.status(error.status || 500);
  res.json({
    error: {
      message: error.message,
    },
  });
});

if (process.env.NODE_ENV === "production") {
  // Serve any static files
  app.use(express.static(path.join(__dirname, "client/build")));
  // Handle React routing, return all requests to React app
  app.get("*", function (req, res) {
    res.sendFile(path.join(__dirname, "client/build", "index.html"));
  });
}

const PORT = process.env.PORT || 3003;
app.listen(`${PORT}`, () => {
  console.log(`server is up and listening on port ${PORT}`);
});

My config

require("dotenv/config");
const mongoose = require("mongoose");
const uri = process.env.DB_CONNECTION;

//connect to DB
const connectDb = async () => {
  try {
    await mongoose.connect(uri, {
      useNewUrlParser: true,
      useUnifiedTopology: true,
    });

    console.log("MongoDb is connected!");
  } catch (err) {
    console.log(err);
    process.exit(1);
  }
};
module.exports = connectDb;

I also have a static.json in the client folder which looks like this

{
    "root": "build/",
    "clean_urls": false,
    "routes": {
        "/**": "index.html"
    }
}

Answer 1

I think that is happening because express is checking routes from top to bottom and in your case handling 404 is before React's routes. Try to place this:

if (process.env.NODE_ENV === "production") {
  // Serve any static files
  app.use(express.static(path.join(__dirname, "client/build")));
  // Handle React routing, return all requests to React app
  app.get("*", function (req, res) {
    res.sendFile(path.join(__dirname, "client/build", "index.html"));
  });
}

Before this:

app.use((req, res, next) => {
  const error = new Error("Not found");
  error.status = 404;
  next(error);
});