Deployed react and express app to heroku sends 404 not found

Question

I build my react app using npm run build and then i sent the built index.html file using express locally and everything works fine. But when i deployed my app to heroku and open the provided links it just says "not found". I don't know if this is a routing issue or something else. I would appreciate your feedback.

The express code:

const express = require('express')
const app = express()
const path = require('path')

if (process.env.NODE_ENV === 'production') {
    app.use(express.static(path.resolve(__dirname, '..', 'client', 'build')))
    app.get('*', (req, res) => {
        res.sendFile(path.resolve(__dirname, '..', 'client', 'build', 'index.html'))
    })
}

const PORT = process.env.PORT || 5500
app.listen(PORT, () => console.log(`Server running on port: ${PORT}`))

The heroku deployed app output:

the response from heroku app:

Answer 1

There Might be a Problem with you environment Variables. Add.env variables to your heroku app this might be causing this error as.env files are not deployed pushed with your repo. Add you PORT variable in heroku project environment variables And secondly, Add a following default route in your app index or server file.

app.use('/', (req,res) => {
    res.send({msg:'Welcome to server'})
})