"Could not find a required file. Name: index.html" Error When Deploying React App on Heroku

I am working on getting my react app deployed on Heroku but have run into issue after issue. I am fairly new to development/react (so this may be doing something stupid here) but I have always been able to successfully run the app locally.

First, here's my error: `

react-scripts build Could not find a required file. Name: index.html Searched in: /tmp/build_7ddb1c907b9746a90f2bd6108231f553/public`

Where index.html resides in my codebase

Here's my relevant portion of my package.json:

"name": "mern-auth", "version": "1.0.0", "homepage": "./", "description": "Mern Auth Example", "main": "server.js", "node": "v12.13.1", "npm": "6.13.4", "scripts": { "client-install": "npm install --prefix client", "build": "react-scripts build", "start": "node server.js", "server": "nodemon server.js", "client": "npm start --prefix client", "dev": "concurrently \"npm run server\" \"npm run client\"", "heroku": "npm run build && copy client/public/index.html dist/index.html" },

(I've tinkered with heroku script a ton in order to try and get Heroku to recognize index.html. I'm aware that what's currently there likely isn't correct, but frankly am not sure of a better alternative.)

And here is the Frankenstein that is my server.js file:

const mongoose = require("mongoose");
const bodyParser = require("body-parser");
const passport = require("passport");
const path = require('path');

const users = require("./routes/api/users");
const plaid = require("./routes/api/plaid");

const app = express();
const publicPath = path.join(__dirname, '..', 'public');

// Bodyparser middleware
app.use(
  bodyParser.urlencoded({
    extended: false
  })
);
app.use(bodyParser.json());

app.use(express.static('dist'));

/* app.use(express.static(publicPath)); */


/* app.get('*', (req, res) => {
  res.sendFile(path.join(publicPath, 'client/public/index.html'));
}); */


/* app.listen(port, () => {
  console.log(`Server started on port ${port}.`);
}); */

/* app.get('*', (req, res) => {
  res.sendFile('../public/index.html', {root: __dirname})
}); */

const morgan = require("morgan");

app.use(morgan("tiny"));

// Serve our api message
app.get("/api/message", async (req, res, next) => {
  try {
    res.status(201).json({ message: "HELLOOOOO FROM EXPRESS" });
  } catch (err) {
    next(err);
  }
});

if (process.env.NODE_ENV === "production")
  // Express will serve up production assets
  app.use(express.static("build"));

  // Express will serve up the front-end index.html file if it doesn't recognize the route
  app.get('*', function(request, response) {
    response.sendFile(path.resolve(__dirname, '../client/public', 'index.html'));
  });

const port = process.env.PORT || 5000;

app.listen(port, () => {
  console.log('Server is up!');
});

// DB Config
const db = require("./config/keys").mongoURI;

// Connect to MongoDB
mongoose
  .connect(
    db,
    { useNewUrlParser: true }
  )
  .then(() => console.log("MongoDB successfully connected"))
  .catch(err => console.log(err));

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

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

// Routes
app.use("/api/users", users);
app.use("/api/plaid", plaid);

As you can tell by the commented out code in server.js, I've tried numerous workarounds to try to get this to work. My priority here is just to be able to get this running. Ideally I'd like to be able to do so in a production state using the npm run build command I defined in scripts, but I would be more than happy to get a development version deployed. Whatever help you can offer would be so much appreciated!