Sometimes does not build production files

[olinations]

I thought I fixed this problem by doing this...

heroku buildpacks:set https://github.com/mars/create-react-app-buildpack.git git commit --allow-empty -m 'Deploy with only create-react-app-buildpack' git push heroku master

For many pushes it worked great, I though the problem was solved. But then when I checked after a push a few days later I noticed that only sometimes does it produce the production build sometimes not, though, in the React Tools it always says 'production build'. So how do I know?...

What I find is that when you go to dev tools 'sources' and you look at the folder structure, sometimes after push the js folder is outside the static folder and you can see the entire file hierarchy of the site un-minified. Sometimes it is properly within the static folder with minified chunk files.

I just wanted to bring this to your attention as I think it is a little scary if sometimes I forget to check, who knows if in production what build is being served. Sometimes it looks like a hybrid of some minified files in static, some not.

[mars]

Hi @olinations , thanks for your message,

This buildpack runs react-scripts build (by default) which always creates a production bundle.

Web browser dev tools do a lot of fancy work to display the page's source code as cleanly as possible, including making the source appear unminified, organized in directories. Different browsers' dev tools work differently, and have changed over time, so there are many differences in how the bundle can be inspected.

Also, it's possible that if you accidentally deploy a create-react-app project on Heroku using the heroku/nodejs buildpack instead of this mars/create-react-app buildpack, then Node will run the app in dev mode instead of Nginx serving the static production build. Verify that your app is using this buildpack:

heroku buildpacks

…and if it's not already set to this buildpack, then set it:

heroku buildpacks:set mars/create-react-app

If you think you've found a bug in create-react-app's build, then look into its issues, maybe even open an issue there.

[mars]

Also, it can be challenging to discern if you're looking at a production build by viewing source. By installing React Developer Tools into your browser, then you'll get a little React icon in the toolbar that indicates whether React is present in the current page, and if it's a production build.