Updating React application - reactjs

I have developed a react application which is hoisted as www.movielust.in .As the react application creates cache inside the browser I am unable to see changes at the same moment.As it loads the content directly from cache is there any way that I could deploy th app in such a way that everytime i push a change it updates cache or fresh reload automatically as other users won't understand such things.
Just to explain in more details.. If I desployed a new crousal on homescreen so if I open the website in icognito mode it shows the latest updated website but on the other hand if I open it normally it uses browser cache and open the same old website without updating new changes.. So I was thinking about anyway to update the app whenever I push a new change

When your upload before that change your package.json build version it's might help you

Related

How to force browser hard reload/cache clear, after deploy new version of React app

I have a React app that is deployed in amazon aws. Whenever i update the code, i need to force hard reload manually on the client side(on Chrome ctrl+f5).
Is there a way to not have to do this manually in React?
I've noticed some posts about setting a query string param with a versioning system, and many solutions for angular CLI, but nothing on React.
Is there i flag i can pass in the build of the code?

Avoid deleting cache on browser on react new version after upload

Currently We have a ReactJs App that constantly is pushing new features and our users are pissed off because some old features don't run as expected; this is due that there is a new Javascript file for it to be rendered on the build folder.
There is a solution for this? So far I've changed NGINX expiration but this not seem to be a final solution since still the old javascript being rendered.

Update "service-worker.js" on Single Page App when changing routes

I have a create react app SPA, and I have deployed it with a registered service-worker.js (Cache-Control: max-age=0)
Everything works totally fine: When I update my code, and redeploy, navigate away from my site (or close the page), and return to my site, the service-worker.js file is downloaded again. It caches my index.html file which contains the url for my app.HASH.js file. It notifies me that new content is available, I refresh the browser page, and now I am running my latest app version.
What doesn't work is: When I navigate to different parts inside my SPA, I use react-router to change the URL. The "url-changes" don't trigger a reload of my service-worker.js file (it's cached with max-age=0 - and I have confirmed this with curl -I). Therefore a new worker is never downloaded to eventually inform me that new content is available and that I need to do a refresh.
I am not sure what the expected behaviour is supposed to be. If react-router changes the URL - should this not trigger a reload of service-woker.js when it's set to not cache itself?
In order to be able to get a new version of the SW.js file while the user is using your app, you have to manually call ServiceWorkerRegistration.update().
You could do for instance:
navigator.serviceWorker.getRegistrations()
.then(registrationsArray => {
registrationsArray[0].update();
})
This code would then be called whenever you like! This forces the browser to check for updates to the SW.js file and then handle the situation in whatever way you've configured your script to do.
This update() call should be made in any place you want to check for updates. You could call it after every URL change / new route visit or once a minute or whatever. You decide.
Checkout the MDN documentation. They also show reference code for storing a reference to the registered SW which gives you the possibility of directly calling update.
https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/update

Admin-on-rest (React) - How to handle browser caching of JS files

I have recently put an admin-on-rest app into production and it works great. However, when I update the app, the updated files within my project src directory are cached. For example I made a change to the restClient.js file, but this only gets loaded after users do a CTRL+F5 in the app.
What is the recommended way to handle this? Can I somehow add a cachebust to the files? Or should I simply set expires in the index.html file head section?
Ps. this questions is maybe more related to React apps in general then admin-on-rest..

How to do force reload for the first time after the web app is deployed?

I'm using React and Redux in my web app. I'm deploying frequently to production. So after deployment for the latest changes, we have to do
empty cache and hard reload
in browser. Is there any other way to clear client side cache?
Its better to using hash file name to busting client cache.
webpack configuration: https://webpack.js.org/guides/caching/

Resources