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
Related
Our site is being made available with the following structure:
Static Blob Container Azure > CDN > Cloudflare > User.
The React app build is made available in an Azure Static Blob Container that is accessed by an Azure CDN. When we access the app via the CDN URL, we never have a cache problem. We also use cloudflare to manage the DNS and supposedly improve the cache. But when we access the app through cloudflare, we have a serious cache problem, returning extremely old versions for users who have accessed the site before.
Even after turning off all cache options available in Cloudflare's dashboard and its graphics show that cache consumption has dropped, the bug still persists. We were unable to identify where our problem is in the structure mentioned above.
The problem is because a CDN uses multiple nodes to serve the content. The proper way to 'solve' this is appending a version in the filename or path, this way, whenever you need to change something, the CDN will download the latest version. Just using a regular 'app.js' is not enough.
More info:
How to force the browser to reload cached CSS and JavaScript files
https://stackoverflow.com/a/34604256/1384539
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. 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.
I have been using GAE and Endpoints for a couple weeks now. I see when I make changes to my code, the devserver will automatically pick up the changes and I am able to sometimes run tests against my updated API in the local API browser. However, I have also noticed some instances where it appears the changes were not picked up automatically and my API browser was hitting old code.
What is the proper process for updating my application to test locally? Do I have to restart my devserver? Do I need to refresh my browser and build new request objects? Can I simply execute a previous request again? (from experience, the last question appears to be no).
Thanks.
While working with the Development Server, I have found that it is best to :
Restart the Server &
Refresh the browser to ensure that any updated services definition is picked up by the API Explorer.
By deploy, I assume they mean code changes are pushed to production?
If I had 2 or three devs working with me on a project, what is to stop them from pushing changes that break the production site?
What checks and balances do we have to avoid such error? Do you setup a staging and production environment in GAE, having someone manually verify everything appears to work before making live.
If you want to limit individual devs doing uncontrolled pushes to the code.google.com (from which the deploys happen), then arrange for one and only one local repository be the local repo-of-record, and only configure that one to know about the source.google.com 'origin' server. Integrations are pulled into that repo, and (when you're ready) push to deploy from there.
Here's how it works under the covers. When you use gcloud to set up a project, it modifies default/.git/config to know about source.google.com, and to use an authentication helper that ties in to oauth (re-using the token that gcloud auth login will store locally) to authenticate. To limit deployment, make this the integration repo, and configure dev repos to push to it.
If you set up a separate staging version of the app, it's a policy decision on your side about whether to use the same scheme, or let developers deploy to staging individually. The mechanism you'd use to configure this is all .git/config wiring.