How to fix site functionality caching? - reactjs

I'm using google cloud platform to serve a website. Whenever I update the website (create a build from the terminal and upload it to the Google bucket), users have been reporting site breakages until they hard refresh in browser or clear their caches manually.
Is there a way to configure the bucket to prevent this from happening?
Just to clarify, it's not images/files that are being cached, the whole site stops working when the bucket is updated until a user hard reloads the page in their browser

Related

Deleted Google Tag event still tracked on React site even after AWS CloudFront invalidation

I have a ReactJs site where I used to track an event using a Google Analytics Tag:
window.gtag("event", "my_event", { event_category: "some_category", event_label: "some_label" });
All was working fine and the event was visible on Google analytics. I then removed that event, built the site, and being hosted in AWS S3, created a CloudFront invalidation. If I visit the site now, I can confirm the new version is live, no doubt about it. I even have a gtag added since that is showing fine on Google analytics.
BUT after 3 days, I still receive the old event on Google Analytics. Both in the real time view and on the daily reports.
How is this technically possible? And what can I do about it?

When using cloud foundry to deploy react apps, my users cannot see the changes unless they delete browser data

I just released my react app in a production environment in Cloud Foundry, but the only problem is that if I make changes to the app, and reupload the app, my users don't see the changes unless they clear their browser data, what can I do?
Reason for this issue: Browser is using its cache not your build to serve the client
Remedy to outcome: Inform the changes in metadata.json
metadata.json is a file that swings between request and browser checks for any mismatch with it's cache. if no then cache is served to client.
There are more then one way, thus am not telling direct solution, instead gothrough the below link will take to through various steps to follow
flexdinesh blog from dev.to

CloudFront cache invalidation for React app

I have a React/redux app which is deployed on CloudFront + s3. There is no static hosting enabled on the bucket. I understand that invalidating cache on a new deployment clears cache in all the edge locations and the new changes will be served up. But what happens to the active prod users when the cache is invalidated? Are they able to continue on the app without any errors? Does it get worse for the active users if the redux store structure changed in the new version?
Clearing the cloudfront cache will bring up the fresh content from your origin. However, that would not affect the existing production users. They would continue to be served from the cached content as long as their session continues.
That being said, they would be served the fresh content when their session restarts.
There would be no errors whatsoever.
Hope this helps.
I've been wondering the same thing for my React website, which is made up of many chunks. I wouldn't worry about your Redux state unless you're saving it to cookie/localstorage and loading it again. In that case you could write some migration check during loading. Or even have it versioned in some way.
Regarding caching, I don't recommend deleting any files for up to a year. That way your active users would still be able to download chunks while they're active on your website.
During deployment I upload all the new files and clear the cache on all *.html files to get the latest reference to js and css files.

Chrome desktop application for web based product

Chrome desktop application for web based product. Is this possible in chrome web apps
Product has following items
Angular JS --- Front-end framework
Rails --- JSon Communication
I have created the chrome desktop apps, which will directly open the site with icon. It's more feel like desktop application. In any OS it will run. The thing is working fine.
Problem:
It will always download the js and css files.
How i want to develop the chrome desktop apps
When launching the chrome desktop app, save all the assets locally.
Whenever chrome desktop app launched, it should refer the locally saved assets (I mean angular js files and css)
Before launching the chrome desktop app, it should request the server whether the assets are changed or not. If changed delete the locally saved files and save the latest one.
If assets are not changed use the old assets files. In this way, we can avoid the initial loading of all the files from the server.
Anybody did it previously or chrome provide any options for this?
Ideas are welcome!
Its totaly possible.
Read these docs: https://developer.chrome.com/apps/offline_apps
By myself i pack the css and javascript into the chrome app so you never have to download them on startup. But in your context its more like a webview app with caching functions.
You can use indexeddb or other local storage APIs to store assets in the client computer.
You can solve this on the web app side by employing ApplicationCache, which specifically fits what you describe.
Using the cache interface gives your application three advantages:
Offline browsing - users can navigate your full site when they're offline
Speed - resources come straight from disk, no trip to the network.
Resilience - if your site goes down for "maintenance" (as in, someone accidentally breaks everything), your users will get the offline experience
The Application Cache (or AppCache) allows a developer to specify which files the browser should cache and make available to offline users. Your app will load and work correctly, even if the user presses the refresh button while they're offline.
While it is primarily an offline-fallback technique, it allows you to cache resources locally just for speedup purposes. Actually having an offline fallback is a bonus in this case.
Actually building a Chrome app for this will probably not help - you cannot update local resources from your web app side, you'll need to update your app through WebStore channels only.

GAE datastore admin page is blank

I have an app in GAE and since ever the DataStore Admin link, on the left, gives me a blank page. I noticed this is a bug because when checking, recently, DataStore Admin link, for another app, it properly shows a web page.
Expected: After enabling Data store admin link, over in Applications Settings, to actually have Datastore Admin page working. I tried to contact Google but they request me to be a Silver account — this is clearly a bug. I can upload a video if needed.
I had this problem, and I fixed it by re-enabling third party cookies. You might try clearing cache and cookies and trying another browser as well.

Resources