I have just seen your question. Recently I also worked on a similar kind of project personally.

In my case, I deployed them separately. First I deployed FLASKApi to Heroku referring to this youtube video and then I deployed my react js app

For my reactjs app deployment, I referred to this youtube video

Hope those videos help you too :)

The application needs to bind to the port provided by Heroky via the PORT environment variable

app.run(host='0.0.0.0', debug=False, port=int(os.environ.get("PORT", 5000)))

On you local it will use the default 5000, but on Heroku it will bind to PORT

So! It turns out Heroku support team was incorrect in their analysis of my application. My application is built in two different ways (one for production as well as for development). Using npm run start [see static/package.json] on local utilizes hot reloading and benefits from faster local changes via server.js. However, in a production environment, you want to use a compressed bundle.js file so my goal was to use npm run build:production [see static/package.json].

The issue I was running into was SyntaxError: expected expression, got '< bundle.js:1 in the console and it seemed to me that bundle.js wasn't loading at all. I listed a series of valid questions above on why I thought that might happen, but they all assumed that the main problem was an inability to run my react application at the same time as my flask application.

I was totally wrong. I didn't need to run server.js at all. The REAL reason that index.html and flask/python wasn't able to find my bundle.js and load the frontend on production was because of a mistake in the config.py file within flask which I never thought to post.

Flask has a very particular configuration that allows static_folder to be defined and template_folder. A while back I had swapped my static_folder for another directory while working on some image upload functionality. The reason I never caught it is because on local I run server.js for hot reloading so I never saw the compressed bundle.js file error out.

After fixing this mistake, I pushed to heroku and amazingly...it worked on the first try!

Here's the correct code that fixed it:

app = Flask(__name__, static_folder="./static/dist", template_folder="./static")

In closing whilst running a flask/react application on Heroku:

• Use multi buildpacks (one for node, one for python).
• Use your procfile to load only the flask side.
• You need a package.json file in your root directory...even if you have another in your static folder like me.
• Use webpack to compress your react code and serve it up in a compressed way.
• Use render_template with flask to render the index.html file that holds you root div for react.
• make sure all your dependencies for React are listed inside of actual "dependencies" instead of "devdepencies" otherwise Heroku will ignore them.

I really hope this helps someone! I was slamming my head against the wall for 2 weeks and it turned out to be a small obscure problem....isn't it always?

Additional resources: https://codeburst.io/creating-a-full-stack-web-application-with-python-npm-webpack-and-react-8925800503d9 While this is very simplified...it's what lead me to finding my bug so I'll post it here.