Deploy on Heroku found error: GET 502 Bad Gateway favicon.ico - heroku

Question

I have followed this tutorial and some alike but it showed me the error as title.
https://dev.to/hawacodes/deploying-a-mern-app-with-heroku-3km7
I have also put env on heroku
config var
Here are my practice project github
https://github.com/NDK2020/sheyshop
And my current Heroku app
https://practice-sheyshop.herokuapp.com/
I have tried all the way, but it wasn't work. I can see the website load as in the dev environment and then the screen blank within seconds, open the network tab in Firefox it stated:
error Image
Log from heroku
Log image

Answer 1

I think I have found the answer, in my server.ts, I have to put this code block after this the route declaration. From this
if (process.env.NODE_ENV === "production") {
console.log("PRODUCTION MODE ACTIVE");
//app.use('/', express.static("/client/build"));
app.use(express.static("./client/build"));
app.get('*', (req: any, res: any) => {
res.sendFile(path.resolve(__dirname, './client/build','index.html'));
})
}
app.use('/api/products/', productRoute)
app.use('/api/users/', userRoute)
app.use('/api/orders/', ordersRoute);
To this
app.use('/api/products/', productRoute)
app.use('/api/users/', userRoute)
app.use('/api/orders/', ordersRoute);
if (process.env.NODE_ENV === "production") {
console.log("PRODUCTION MODE ACTIVE");
//app.use('/', express.static("/client/build"));
app.use(express.static("./client/build"));
app.get('*', (req: any, res: any) => {
res.sendFile(path.resolve(__dirname, './client/build','index.html'));
})
}