Having trouble deploying React-Express app to Heroku

I'm trying to deploy a MERN app (built with create react app) to Heroku, but whenever I try to access the app URL, it returns with a 404 error.

I've checked the Heroku error log, which has returned the following errors:

app[web.1]: ls: cannot access '/app/build/static/js/*.js': No such file or directory  Error injecting runtime env: bundle not found '/app/build/static/js/*.js'. See: https://github.com/mars/create-react-app-buildpack/blob/master/README.md#user-content-custom-bundle-location      

I've structured my project so that it runs on two different servers: client side on localhost:3000, which proxies requests to express at localhost:5000.

I've run npm run build, set up static middleware, and tried to configure my api calls/routes correctly, but it still isn't working. Any suggestions as to why, and how I can fix it? Details as follows:

Project Structure

+client     |     +-build        +-static          +-css          +-js          +-media     +-node_modules     +-public     +-src       |       +-components          +-App.js          +-index.js  //server  +-models  +-node-modules  +-package-lock.json  +-package.json  +-server.js  

Proxy (in package.json):
"proxy": "http://localhost:5000"

Heroku build scripts (in client/package.json):

  "scripts": {      "start": "react-scripts start",      "heroku-postbuild": "cd client && npm install --only=dev && npm install && npm run build",  

Server config:

const port = process.env.PORT || 5000;  app.listen(port, () => console.log(`Listening on port ${port}`));      //Middleware  app.use(express.static(path.join(__dirname, 'client/build')));  app.use(bodyParser.json());  app.use(bodyParser.urlencoded({ extended: true }));  app.use(express.urlencoded())  app.use(cors())    app.get('*', (req,res) =>{      res.sendFile(path.join(__dirname+'/client/build/index.html'));  });  

Here's how I;ve structured my APIs. Note: I've removed the 'localhost:5000' from the URL of my axios requests:

API call from React component:

    useEffect(() => {      axios.get('/api/all-reviews')      .then(review => {          setReviews(review.data)      })      .catch(err => {          console.log(err)      })  },[])  

Corresponding express route

app.get('/api/all-reviews', (req,res) => {      Review.find()      .then((result) => {          res.send(result)      })      .catch(err => {          console.log(err)      })  })  

https://stackoverflow.com/questions/65755972/having-trouble-deploying-react-express-app-to-heroku January 17, 2021 at 07:57AM