react-loading-order-with-animation | React Loading Order With Animation | Animation library

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:

You should not have npm start in a postinstall script. You want to run your node.js server every time your web dyno restarts, not only every time your app is installed.

Furthermore, for Heroku, you should run the build of your "static" component in a heroku-postbuild script, not in a postinstall script.

Other than that, you need to make any build dependencies (such as webpack etc.) available to Heroku, either by setting config var NPM_CONFIG_PRODUCTION to false, or by moving them from "devDependencies" to "dependencies".

For more info see here.