How do I invalidate the service worker cache on deployed Gatsby website on S3 Cloudfront? - deployment

I am building my first Gatsby website. We host it on AWS S3. Also we use gatsby-plugin-offline.
So far I'm not able to find a good solution on how to invalidate the cache after a new deployment.
Even if I manually de-register sw.js service worker and clean the site data via Devtools -> Application -> Clear Storage, the browser keeps loading a cached version (missing added pages, displaying old text content, etc.).
For deployment I use amplify.
How do you invalidate an old cache when deploying a new build?
Thanks.

Did you check the amplify configuration of gatsby-auth-starter-aws-amplify ? The offline plugin is active in this starter and it is the recommended starter for deploying gatsby to amplify.
Another solution would be to use the s3 plugin with aws-cli
Gatsby's caching docs explains caching rules for Gatsby to work well. Common problems are caused by HTML pages' caching (The cache-control header in HTML files should be cache-control: public, max-age=0, must-revalidate)

Related

Eleventy static site generator with strapi CMS

I am new in website development using Static site generator and Cms, I am developing one static website using eleventy SSG and Strapi CMS.
All my contents are stored in CMS.
(I Assume all you know about SSG and CMS). Now I have doubt about contents, suppose, I update my contents then it will automatically reflect in my static site without restarting eleventy server or should I restart my eleventy server.
In my current project, When I update my contents using CMS, My site not updating their contents but if i restarting my eleventy server then it is updating.
Is it right to restart eleventy server after update contents or is there any way available to update contents on website without restarting eleventy server.
Please guide me.
SSG involved that content is "statically rendered" to static files. So, you need a mechanism that fetch new content from Strapi and adapt your files or your displayed content.
Here are some ways to do it:
Restart Eleventy server (but it causes downtimes)
Fetch fresh Strapi content using frontend code (but it could be slower and bad for SEO)
Do not use SSG if your content is often updated. Prefer more flexible tools like NextJS or Remix that handle SSR or hybrid behavior.s
This may not be a straightforward answer.
Anyway,
I am using Eleventy as a Static site generator.
So, I have installed #11ty/eleventy using npm.
This restarts my eleventy server everytime I make change and logs the errors if I have one.

Is there a possibility to deploy headless CMS on CDN?

I am using the NextJS JavaScript library.
Is it possible to deploy a headless CMS such as Strapi on a CDN since the website should be generated static?
As mentioned on Strapi homepage :
"You can now generate pages at deployment time and serve them over a CDN (...)".
Static pages need to be generated during deployment and then send over to a CDN (AWS S3 + AWS Cloudfront for example).
I suggest you read the full documentation :
https://strapi.io/documentation/3.0.0-beta.x/deployment/amazon-aws.html

Deploying ionic 4 website to digitaloceans spaces CDN

I'm trying to deploy a basic ionic 4 application to spaces CDN provided by digitalocean.
I uploaded the static website on gitlabpages and the website is working.
I've tried to replicate the results on spaces CDN but the file instead of being opened by the browser get downloaded once opened.
I figured out it could be the --base-href, and I tried to modify it, but without success, the index file provided by the build still get downloaded
At first I build the ionic app
ionic build --prod --base-href="xxx.gitlab.io/xxx" //code used to deploy for gitlab pages
Then for gitlab pages I deployed it using gitlab-ci.yml file, as explained here, while for deploying on spaces I used a python script
I would expect to be able to upload an ionic build into spaces CDN and being able using the link provided to see the website.
I'm not sure if I'm doing something wrong at conceptual level using a CDN, it is actually my first time trying to serve a website using this tech.
UPDATE
I've uploaded to the CDN again, and I realized that if I use the origin link, it actually load the html (even tho it gives me a lot of errors).
While is I use the CDN link, it try to download the file.
I have purged the cache of the CDN so in my opinion the CDN and the origin should behave exactly the same, Am I wrong?

Develop a Service Fabric Web Application without redeploying after each file change

I have stateless .net core 2 Fabric Service Web Application creating using one of the templates that comes with Service Fabric SDK. It is a real pain to develop since I have to do a full deploy before I can see any changes to code/html/script. In my case that operation takes more than 5 minutes.
I have looked at this article that states how it can be done by running the web app from the commandline.
That article is based on Net Core RC2. Does anyone has an updated example on how to do this?
https://dzone.com/articles/aspnet-core-with-kestrel-and-service-fabric
Together with Azure Developer Support i found a solution to speed up the development process
I Fabric Explorer you need to find the node where you Web Application is running. I my case that is _Node_0
By SF SDK design, local SF published file is under C:\SfDevCluster\Data_App\ this folder. In my environment, the website file path is C:\SfDevCluster\Data_App_Node_0\Application1Type_App1\Web1Pkg.Code.1.0.0\wwwroot\lib\bootstrap\dist
So you can also find your HTML, CSS, JS and other static resources under below path:
C:\SfDevCluster\Data_App[node_id][application_type_and_instance_name][service_type_and_version]\
You can just modify the files in this folder, then the change will immediately apply to your local test web browser. Please notice if your service is hosted by micro-service running in several nodes, you may need to modify all nodes files because load balancer may access any folder files randomly.

Stop browser scripts caching in GWT App

I have a GWT app deployed onto our client's machines. As an ongoing
development alongside, we have to release new improved versions of the
application fron time to time. Everytime we release a new version we
often run into the problem where the client's browser has cached the
old scripts scriptsand for a while it behaves strangly as the data it
is trying to work with is not quite compatible with it. What is the
best way to overcome this problem. Currently I have to tell the users
to clear their browser's cache for a new release but it would be nice
they don't have to do this.
Possible solution depends on the way you are hosting your application. If you are hosting directly from servlet container, then you can use servlet filter like the one described here:
http://seewah.blogspot.com/2009/02/gwt-tips-2-nocachejs-getting-cached-in.html
Here are appropriate filters from tadedon library:
http://code.google.com/p/tadedon/source/browse/tadedon-servlet/src/main/java/com/xemantic/tadedon/servlet/CacheDisablingFilter.java
http://code.google.com/p/tadedon/source/browse/tadedon-servlet/src/main/java/com/xemantic/tadedon/servlet/CacheForcingFilter.java
And here is guice ServletModule which enables them for the whole guice web application:
http://code.google.com/p/tadedon/source/browse/tadedon-gwt/src/main/java/com/xemantic/tadedon/gwt/http/GwtHttpCachingModule.java
If you are using some reverse proxy in front of tomcat it would be even simpler. In case of apache (e.g. mod_proxy, mod_jk), and assuming that all the application resources (html, graphics, java scripts, css, etc.) are put on apache, just set these options in apache configuration:
<Files *.nocache.*>
ExpiresDefault "access"
</Files>
<Files *.cache.*>
ExpiresDefault "now plus 1 year"
</Files>
It is described here:
http://code.google.com/webtoolkit/doc/latest/DevGuideCompilingAndDebugging.html
in "Perfect Caching" section. Such deployment scenario assumes that only rpc requests should go through reverse proxy to tomcat. If for some reasons all the application context is proxied to tomcat you can still use apache's LocationMatch directive instead of Files directive.
By default, the bulk of your app should be cached by the browser until a new version of it is generated by your build process.
It might help to understand the GWT bootstrapping model to understand how this works.
The first script your client requests, your-app-name.nocache.js, is not cached, and it does nothing except check the browser's user agent and capabilities, and make a second request for the relevant app JS.
At this point, the script it requests should be cached by the browser if it's been requested before. This is a {indistinguisable-numbers-and-letters}.cache.html file.
When you redeploy your app, the nocache.js file will be executed and ask for a different cache.html file from the server, which will not already be present in the cache, but which will get cached by the browser once it is downloaded.
Are you doing anything unusual with deferred binding, or with caching headers on your server? This might potentially be causing your nocache.js file to get cached after all, which would make it request old cache.htmls from the browser cache.