Skip to main content

RequireJS - Busting the browser cache with every deployment using Grunt targethtml plugin

The projects that I work on have deployments to the QA very often; testing out the bug fixes and new features. Every time after the deployment, I ask the QA to clear the cache, since all JavaScript files are cached by the browser. This is really frustrating to QA and I needed someway to clear the cache with every deployment. This would be same in a continuous delivery project, wherein the client would be required to clear the browser cache.

I use RequireJS to bind the dependencies between various modules. Also, I use Grunt to manage the deployment workflow. The JavaScript code is optimized using RequireJS optimizer, which minifies and combines all the dependencies.

I referred to the RequireJS documentation and found that one can use 'urlArgs' property to bust the browser cache. If you refer to that example code, it uses the JavaScript Date object and assigns the time-stamp value to the  urlArgs parameter. This works fine if you never want the Require modules to be cached by the browser. However, in a workflow where you would like these files to cleared from the cache only when there is a deployment then you can use a Grunt plugin - grunt-targethtml.

The target-html plugin parses the source html file and generates the content accordingly. In your source html file, you need to specify target tags that will be processed when Grunt is run:

Here, the target html code that will be processed by the Grunt plugin is included in a comment. It has an 'If statement' which declares that if the grunt build is being run with 'dist' as an option then include the below code. Notice that the script block also specifies a template variable - 'bustVersion'. When the html content is being generated this would be treated as string that needs to be replaced with a value.

In your target html configuration (in Gruntfile.js) you need to provide the value that will be assigned to this variable:

Here, the 'curlyTags' configuration includes a template string 'bustVersion' whose value is a scriptlet '<%= grunt.template.today("yyyymmdd") %>'. Also, the files configuration includes the mapping between the destination file and the source file. Here 'dist/index.html' is the destination file and 'dev/index.html' is the source file that will be processed.

When 'grunt dist' is run, the template string {{bustVersion}} is replaced with today's date (in 'yyyymmdd' format). The destination file will now have script tag specifying the RequireJS configuration - 'urlArgs' with the date generated using the scriptlet.

Comments

Popular posts from this blog

De-obfuscating javascript code in Chrome Developer Tools

I had blogged about JavaScript debugging with Chrome Developer Tools  some time back, wherein I have explained how these developer tools can help in debugging javascript code. Today Google Chrome 12 was released and my Chrome browser was updated to this version. As with every release, there have been some improvements made on performance, usability etc,. One feature that stood out for me is the ability to De-obfuscate the javascript code. What is Minification? Minification is the process of removing unnecessary characters such as white spaces, comments, new lines from the source code. These otherwise would be added to make the code more readable. Minifying the source code helps in reducing the file size and thereby reducing the time taken to download the file. This is the reason why most of the popular javascript libraries such as jQuery are minified. A minified jQuery file is of 31 KB in size where as an uncompressed one is about 229 KB. Unfortunately, debugging minified javascript f

Adding beforeRender and afterRender functions to a Backbone View

I was working on a Backbone application that updated the DOM when a response was received from the server. In a Backbone View, the initialize method would perform some operations and then call the render method to update the view. This worked fine, however there was scenario where in I wanted to perform some tasks before and after rendering the view. This can be considered as firing an event before and after the function had completed its execution. I found a very simple way to do this with Underscore's wrap method.

On GraphQL and building an application using React Apollo

When I visualize building an application, I would think of using React and Redux on the front-end which talks to a set of RESTful services built with Node and Hapi (or Express). However, over a period of time, I've realized that this approach does not scale well when you add new features to the front-end. For example, consider a page that displays user information along with courses that a user has enrolled in. At a later point, you decide to add a section that displays popular book titles that one can view and purchase. If every entity is considered as a microservice then to get data from three different microservices would require three http  requests to be sent by the front-end app. The performance of the app would degrade with the increase in the number of http requests. I read about GraphQL and knew that it is an ideal way of building an app and I need not look forward to anything else. The GraphQL layer can be viewed as a facade which sits on top of your RESTful services o