0

I am building a ReactJS app using create-react-app build, and deploying to Amazon S3 and CloudFront. Deploying is easy enough; when I create a new version, I can sync the build directory to S3, hit reload, and everything works well. The index.html contains references to the latest build via unique hash keys, so I always get the latest files.

But what about active users that are using the old version(s) of index.html? Their browsers will reference "chunks" that no longer exist. How should I update to my latest build without disturbing these users?

A blunt solution might be to keep the files from the older builds, but then the user would not be automatically updated to the new version. And cleanup of the old files would be messy.

In my CloudFront setup, when an active user requests a missing chunk, the browser will be directed to index.html for the 404/403 errors. Perhaps the upgrades are already managed automatically, forcing a reload of index.html (and therefore references to the new files)?

CharlieH
  • 1,432
  • 2
  • 12
  • 19
  • What's wrong with the blunt solution? We have always taken this approach and we simply clean up all but the latest 2 builds at the end of our release pipeline. My only concern is with the rising prevalence of service workers and longer client cache retention. – twinlakes Feb 25 '19 at 22:55
  • @twinlakes maybe that is the best way to go. Has it worked well for you over time? – CharlieH Feb 25 '19 at 23:28
  • yes, though it was a web site not a web app, so caching was inherently less of an issue – twinlakes Feb 26 '19 at 06:54
  • For more details on deploying CRA to AWS S3/CloudFront: https://stackoverflow.com/questions/54655204/steps-to-deploy-a-react-app-on-s3-with-cloudfront-while-managing-caching – CharlieH Apr 26 '19 at 13:53

0 Answers0