Not Found - React application deployment to Heroku issue

Question

I have a TypeScript React app in frontend folder with the build folder ready after running npm run build inside the frontend folder, and a backend folder that has server.js that has the following code

import express from 'express';
import path from 'path';

const app = express();

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

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

app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

In the root folder that contains the frontend and backend folders I have .env file that has NODE_ENV = production and Procfile that has web: node backend/server.js. Also, in the root folder, I have package.json file that has the script "start": "node backend/server"

With all of this, I follow the following steps on my terminal to deploy my application to heroku

• Login to heroku using heroku login
• Create a new application on heroku using heroku create my-app. At this point I enter the NODE_ENV env variable on heroku and set it to production
• Enter heroku git:remote -a my-pp
• And finally git push heroku master

The deployment process shows no errors, but when I open my app, it shows Not Found on the page.

I have been trying for 3 days to deploy my app with no success. I appreciate any help in deploying the app to heroku.

Answer 1

I recommend following through this documentation about nodejs deployment on heroku.: https://devcenter.heroku.com/articles/deploying-nodejs

What does heroku local web says?

This could be also useful: https://devcenter.heroku.com/articles/getting-started-with-nodejs#set-up

Try web: npm start in your Procfile. And add the script to package.json accordingly.

I think you might have to specify a build script which builds your frontend and creates the index.html in your /frontend/build folder. In this case you would add web: npm build in your Procfile.