Create-react-app: Wait to delete build folder until finished building

Created on 12 Sep 2016  路  2Comments  路  Source: facebook/create-react-app

If you serve the build folder using nginx, when building the app on a deploy, there's anywhere from a few seconds to a minute or two where nginx will return a 403, because the build is deleted before it is finished. See this conversation for more: https://twitter.com/Vjeux/status/775410547470716929

Basically, my solution is to wait until a build finishes, or is a few miliseconds from finishing when running npm run build

Most helpful comment

The way the build step was envisioned is that you would run npm run build and once it is finished building, then move the folder somewhere that's going to be live. I didn't think about the use case where you direct prod traffic directly from that build folder.

While we are talking about solutions inside of create-react-app which we may or may not want to implement, you can unblock yourself by changing the build script from

react-scripts build

to

react-scripts build && mv prod/ last_prod/ && mv build/ prod/ && rm -rf last_prod

and redirect your nginx traffic to the prod/ folder. You should have no downtime that way while updating. You may have requests of old css files while doing the flip and are running into push safety issues but they should be minimal.

All 2 comments

The way the build step was envisioned is that you would run npm run build and once it is finished building, then move the folder somewhere that's going to be live. I didn't think about the use case where you direct prod traffic directly from that build folder.

While we are talking about solutions inside of create-react-app which we may or may not want to implement, you can unblock yourself by changing the build script from

react-scripts build

to

react-scripts build && mv prod/ last_prod/ && mv build/ prod/ && rm -rf last_prod

and redirect your nginx traffic to the prod/ folder. You should have no downtime that way while updating. You may have requests of old css files while doing the flip and are running into push safety issues but they should be minimal.

@lacker also raised an issue on Twitter: "also a problem if build dies halfway"

I don't think we should support your use case and instead you should implement a publish step that just swaps out folders when the build is done. This should solve your use case.

Please do not hesitate to continue commenting on the issue if you think I overlooked some things or have concrete things we could do inside of create-react-app to better support what you are trying to do.

Was this page helpful?
0 / 5 - 0 ratings