June 28, 2017

Auto version your JavaScript or Stylesheet files using .htaccess

Usually, developers can maintain the cache they maintain themselves at the backend but cannot control the cache held by the browser as freely as they want unless there is proper version control. Here is a quick drop in solution in `.htaccess` file until you have proper versioning.

Most of the applications have one or many layers of cache for their system. The cache that application developer can maintain is at the backend (the server) level. However, you cannot control the cache held by the browser as freely as you want unless you version the files as well.

Versioning the files is definitely the best way to solve this problem because it is a very efficient solution which guarantees that browser will fetch the new resource when you want it to. But there are cases where this is not an easy step to be taken, for example, in a legacy app which resources are included in line the page.

So, is there a quick way to fix the problem until you go to proper versioning?

Yes! there is.

Using .htaccess we can auto version the files and force the browser to fetch files down to every second if we need to.

Here is how:

We can use server variables such as TIME_YEAR, TIME_MONTH to create an automatic version of your resource. These are variables that the web server provide to be used where suitable. And now, let’s see how to do this.

RewriteCond %{QUERY_STRING} !(v=(.<em>))
Rewriterule ^(js|scripts|css|styles)(.</em>)$ /$1$2?v=%{TIME_YEAR}%{TIME_MON}%{TIME_DAY}%{TIME_HOUR} [r=302,nc]`

Open your .htaccess files and paste those two lines in. What these are doing is:

  • If a request comes to the server that starts with js, scripts, css or styles then rewrite the request by appending an auto-created version at the end.
  • IF a request comes with the version already in the request then don’t do anything because we don’t want it to keep rewriting the request.

Simple as that. So for example: if the request comes to https://abc.com/js/main.js it gets served as https://abc.com/js/main.js?v=2017062811. Same goes for any request coming to other paths as well. This example ensures that browser will fetch the resource again every hour. But if you add variables like TIME_MINUTE or TIME_SECOND or TIME browser will keep fetching the content more frequently.

To see what other server variables can be used visit https://httpd.apache.org/docs/trunk/expr.html#vars

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

  • He-Who-Must-Not-Be-Named

    Hi,
    That is very interresting approach to version static JS files, but does it mean that .htaccess formulas change output of generated HTML document? And what is that part “!(v=(.))”? What it does?

    • S74rx

      The link gets rewritten to a different path while browser requests the file, so the HTML will not change originally, but when browser is trying to load it. And `!(v=(.))` means to only apply the rewrite if there is no version number in the requested path.

      Hope that helps.

  • Batur Kaçamak

    why to reload the same asset since it is not modified? it doesnt seem a good practice.

    • S74rx

      Fair point. However, this solution is useful only when the file contents change but the filename remains same.

      If the file does not change at all there is no need for versioning as well.

      And lastly, the file is never reloaded. The link gets rewritten upon request. So the very first request will be served with versioning bit.

      • Batur Kaçamak

        Even like that it is a bad practice.

        I wont advice anyone to use caching and versioning like this.

        In case you are not modifying all of your assets every hour(?) or so.

        • S74rx

          Yeah, this article clearly mentions that this is a quick drop in solution, until you have proper versioning.

          The code in the article is showing an example where the resources are reloaded every hour and also gives other variables that can be used to change that to suit the needs.

...

Please fill the form - I will response as fast as I can!