React app returning HTTP error 404 when deployed to heroku

Question

I'm building a React app that works well locally but when I deploy to heroku the browser returns with a 404 not found error. The heroku log shows that it's not finding anything to render at "/"

2022-10-30T12:53:49.067388+00:00 heroku[router]: at=info method=GET path="/" host=agile-springs-04238.herokuapp.com request_id=63c0c0ba-dcc6-42f2-8242-e85fcb7ff6ae fwd="66.45.129.177" dyno=web.1 connect=0ms service=1ms status=404 bytes=178 protocol=https

APP.js in the client side has a "/" route defined though:

import React, { useState } from "react";
import NavBar from "./components/Header";
import Home from "./pages/Home";
import SignUp from "./pages/SignUp";
import Login from "./pages/Login";
import SingleMovie from "./pages/SingleMovie";
import SingleShow from "./pages/SingleShow";
import Dashboard from "./pages/Dashboard";
import SearchBar from "./components/SearchBar";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

function App() {
  return (
    <Router>
      <NavBar />
      <SearchBar />
      <div className="">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/movieid/:id" element={<SingleMovie />} />
          <Route path="/showid/:id" element={<SingleShow />} />
          <Route path="/dashboard/:username" element={<Dashboard />} />
          <Route path="/signup" element={<SignUp />} />
          <Route path="/login" element={<Login />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

No browser routes render but all API routes still work. It seems to be a client side issue only.

I thought it must be a code problem in my server.js but it looks correct to me.

server.js:

const express = require("express");
const routes = require("./controllers");
require("dotenv").config();
const PORT = process.env.PORT || 3001;
const path = require("path");
const sequelize = require("./config/connection");
const app = express();
const cors = require("cors");
const corsOptions = {
  origin: [
    "http://localhost:3000",
    "https://agile-springs-04238.herokuapp.com/",
  ],
  credentials: true, //access-control-allow-credentials:true
  optionSuccessStatus: 200,
};
app.use(cors(corsOptions));

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


app.use(routes);

if (process.env.NODE_ENV === "production") {
  app.use(express.static(path.join(__dirname, "../client/build")));
}

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

sequelize.sync({ force: false }).then(() => {
  app.listen(PORT, () => console.log(`Now Listening on ${PORT}`));
});

So I thought maybe it was a package.json script error. But it appears that the build script is there as it should be.

root package.json:

  "name": "naimdbv2",
  "version": "1.0.0",
  "main": "server/server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server/server.js",
    "dev": "concurrently \"cd server && npm run watch\" \"cd client && npm start\"",
    "install": "cd server && npm i && cd ../client && npm i",
    "seed": "cd server && npm run seed",
    "build": "cd client && npm run build",
    "watch": "webpack --watch --progress"
  },

I haven't found any previous answers that have been able to help. It seems like heroku is not finding the client build after being deployed but I can't understand why. I've never run into this issue before.

Answer 1

Solution: Thought I'd post the solution that worked for me after a lot of looking and trial and error. So in my case the problem was I was using <a> tags in my React JSX to link to other React Router pages as opposed to using <Link> tags from react-router-dom. I believe this was sending the request to the server side routes instead of using the React Router on the client side. I hope this helps someone else save some time who may encounter the same issue.