How to automate versioning of static files (css, js, image) in a Java web app

Question

I want to use the browser cache of static files most efficiently, i.e. always use cached content, unless the file has changed, in which case get the new content.

I'd like to attach an md5 hash of the file to the virtual file path (either as a directory, or as part of the file name) the client sees, so that it when the file changes, the client thinks it is a different resource.

I know how to use a servlet filter to take a request containing that virtual file path and strip the md5 hash, and return the real file name in the directory structure.

Can I also use a filter to change the apparent file name on the way out, so that the client's browser thinks it is requesting the virtual file path, without changing the actual name or directory structure of my actual files?

For example:

real file path = /css/1.css

virtual file path = /static/1234/css/1.css

when the file changes

real file path = /css/1.css

virtual file path = /static/3451/css/1.css

You need to rewrite the links. You could call a method to do that whenever you output such a link. What technology are you using to generate the HTML? — Thilo
– Thilo, Commented Feb 12, 2015 at 7:17
Using jsf and html5. css, js, images are directly in the xhtml. Command links and buttons are used for flow of control to different xhtml pages — Ramesh
– Ramesh, Commented Feb 12, 2015 at 7:24
JSF has builtin solutions and own customizable ways for this via resource handlers. Why "Using servlets" and "Using servlet filter" in title/question? Please edit and clarify. The question in its current form has nothing to do with JSF. For sure not if you're actually not using them as JSF resources via <h:outputStylesheet> and friends. — BalusC
– BalusC, Commented Feb 12, 2015 at 8:56
Got you - I guess my title was confusing the question. Using servlet/servlet filter is my current thought on how to solve the problem - I should remove that from the title. The technology the app runs on is jsf, java 8, maven, html5, mongoDb. I'm looking for a solution within this technology stack. — Ramesh
– Ramesh, Commented Feb 12, 2015 at 20:36

lgd · Accepted Answer · 2015-02-12 09:07:54Z

2

If you are using Maven, you could add this great plugin : Minify Maven Plugin. It is not directly linked to your issue, but you can concatenante the final name of your CSS/JS files with the version of your application using ${version} (you should be able to do this in your imports). Everytime you will build a new version of your application, you should have new CSS/JS files (by the new version number) and force the browser to download it again.

Example :

<plugin>
    <groupId>com.samaxes.maven</groupId>
    <artifactId>minify-maven-plugin</artifactId>
    <version>1.7.4</version>
    <executions>
        <execution>
            <phase>prepare-package</phase>
            <goals>
                <goal>minify</goal>
            </goals>
        </execution>
    </executions>
    <configuration>
        <webappSourceDir>${basedir}/src/main/webapp/</webappSourceDir>
        <webappTargetDir>${basedir}/src/main/webapp/</webappTargetDir>
        <charset>UTF-8</charset>
        <cssSourceDir>css</cssSourceDir>
        <cssSourceFiles>
            <cssSourceFile>style.css</cssSourceFile>
        </cssSourceFiles>
        <cssTargetDir>css</cssTargetDir>
        <!-- Your final CSS file -->
        <cssFinalFile>style.final.${version}.css</cssFinalFile>

        <jsSourceDir>js</jsSourceDir>
        <jsSourceFiles>
            <jsSourceFile>script.js</jsSourceFile>
        </jsSourceFiles>
        <jsTargetDir>js</jsTargetDir>
        <!-- Your final JS file -->
        <jsFinalFile>script.final.${version}.js</jsFinalFile>
        <jsEngine>CLOSURE</jsEngine>
    </configuration>
</plugin>

answered Feb 12, 2015 at 9:07

lgd

1,21210 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ramesh Over a year ago

This is an interesting option I wasn't aware of. We are evaluating whether we can combine this with a script that uses the version number to identify the current static files. In this case the source files will be in their original directories, but the target files after building will be in a directory based on the Maven build version number. We'll build a script to identify the file path to the static files. Thanks - we're going to try next week if there are no better suggestions, and report back the results.

lgd Over a year ago

I hope it will help you. For more informations, in my case I list in the maven-war-plugin configuration the source files in <warSourceExcludes>. Also, I include in the maven-clean-plugin configuration the versioned files so I get rid of the old versions.

Collectives™ on Stack Overflow

How to automate versioning of static files (css, js, image) in a Java web app

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related