How to deploy React build folder to Heroku

Question

 I looked around the internet for this and found this medium article using serve. The article directed modifying the packange.json file to this:

"scripts": { 
  "dev": "react-scripts 
  "start", "start": "serve -s build", 
  "build": "react-scripts build", 
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject", 
  "heroku-postbuild": "npm run build" 
},

Now this works in development. I get console logs saying Content is cached for offline use. And google Lighthouse gives me >90% on progessive web apps. The problem is, when I deploy to Heroku, during build it runs the npm run build specified in the package.json scripts. But on opening the app, I get 21% on performance, and 50% on progressive web apps in firehouse. Also, it says service worker not registered. Which means it is not serving from the build folder. As an extra, I ran npm build myself in development machine and deployed the project TOGETHER with the build folder, but still same result. Now I also came around this other articlesuggesting to use node.js server and change scripts in package.json to this:

start: "node server.js"

I no nothing about node.js, so I decided to consult here for better choices.

EDIT: If a server command is needed, like in the node.js in the second medium article, and in Garesh's php code below - if anyone could help with a similar code in python(django), it'd be nice

Answer 1

Found the answer to this in this comment online:

Before deploying the app go to: Heroku dashboard > settings > buildpacks > add buildpacks and then add github.com/mars/create-react-app-b...

Or, in command line you can do

heroku buildpacks:set github.com/mars/create-react-app-b...

If you don't do this step, heroku will deploy the development build (which is slow) of your react app instead of the optimized production build.