Front end of mern stack website won't appear on heroku

[colin.kawai]

I am building a mern stack website and I can’t seem to get the front end to show up. The heroku logs don’t show any error messages so it’s hard for me to debug the issue. If there is anything I should be looking out for please let me know.

package.json of root

{
  "name": "studySpotsReact",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "client-install": "npm install --prefix client",
    "start": "node server.js",
    "server": "nodemon server.js",
    "client": "npm start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
    "build": "concurrently \"cd client && npm run build\" \"npm build \"",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client"
  },
  "engines": {
    "node": "12.10.x",
    "npm": "6.x"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "async": "^3.2.0",
    "body-parser": "^1.19.0",
    "concurrently": "^5.1.0",
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "mongoose": "^5.9.7",
    "morgan": "^1.10.0",
    "path": "^0.12.7",
    "react-async": "^10.0.1"
  }
}

server.js

const mongoose = require("mongoose");
const express = require("express");
var cors = require("cors");
const bodyParser = require("body-parser");
const logger = require("morgan");
const Data = require("./backend/data");
const path = require("path");
require("dotenv").config();

const API_PORT = process.env.PORT || 3001;
const app = express();
//app.use(cors());
const router = express.Router();



// connects our back end code with the database
mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true });

let db = mongoose.connection;

db.once("open", () => console.log("connected to the database"));

// checks if connection with the database is successful
db.on("error", console.error.bind(console, "MongoDB connection error:"));

// (optional) only made for logging and
// bodyParser, parses the request body to be a readable json format
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(logger("dev"));

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

router.get("/", (req, res) => {
  res.send("hello world");
});

// append /api for our http requests
app.use("/api", router);

// launch our backend into a port
app.listen(API_PORT, () => console.log(`LISTENING ON PORT ${API_PORT}`));