Umbraco package/datatype JS not updating on live site

So you've created a package or a custom data type and it's going pretty well, you publish your changes and that works too. But then you make a change to the js and this time it hasn't updated, console logs aren't coming through and everything you try just doesn't seem to get the updates to work on the live site. What's wrong? The good news is, it's a simple fix.

The full story:

As it turns out, your changes will work locally because your local environment is running in debug mode, put the moment you publish, they stop working on the live site, what's up?

We have to look at what's different between the two website instances and looking at the browser console in Chrome, we'll quickly see that the debug site loads all the files in as expected, but the live site uses Client Dependency and loads everything through the DependencyHandler.axd file with a HUGE query string on the end, this is where our problem lies.

Umbraco uses client dependency to combine, compress and minify all of the files that it requires to run the back office; it does this to speed up loading times by reducing file size and connection/response times. It doesn't stop there though, Umbraco will cache these files for future use which is pretty cool because it'll make things even quicker than they already are, but there's one downside to this and that's the problem we're having now.

We updated our file which worked fine first time, but now it doesn't seem to wan to update and this as we've found out is down to Client Dependency, it's cached an old copy of our files and we need it to update. We could delete the files from the ClientDependency folder under the App_Data folder and then touch the web config to force the application to restart, but this doesn't always work, what do we do? ClientDependency has a config file and it's going to save the day.

The solution:

I apologise for the lengthy back story, the solution is a simple one.

Open the Config folder within your project, open the ClientDependency.config file and look for the root node within the file, there's an attribute on the root ClientDependency element (it's an XML file) called version, simply increment the number stored in its value by 1 or more and publish the file to production. 

Example:

<clientDependency version="2" fileDependencyExtensions=".js,.css" loggerType="Umbraco.Web.UI.CdfLogger, umbraco">
...
</clientDependency>

By Luke Alderton at 30 May 2017, 16:50 PM

Tags: Umbraco,Angular JS,Datatype

Comments

Post a comment
Sit tight...
We're adding your comment.
Thank you.
Your comment has been added.
There's been a problem.
Please try again later.
Share with
Tags
Latest Comments
By dipbleds on Raspberry Pi - Bluetooth using Bluecove on Raspbian
12 Dec 2017, 21:29 PM
By Ich on Replacing the Xamarin Header/Navigation bar with a custom view/template
26 Nov 2017, 17:11 PM
By Ravi Motha on My experience at Umbraco UK Festival 2017
12 Dec 2017, 08:39 AM
By Borges on How to add a Xamarin Forms Loading Screen/Overlay
7 Nov 2017, 19:11 PM
By Rutul Mehta on Auto/Custom height on Xamarin Forms WebView for Android and iOS
4 Nov 2017, 03:15 AM
By Pablo on Xamarin MasterDetailPage has large margin/padding at top
26 Oct 2017, 15:31 PM
By faiza on Using MaryTTS or OpenMary in Java
22 Oct 2017, 12:54 PM
By Nietoperz on Using MaryTTS or OpenMary in Java
29 Sep 2017, 14:34 PM
Categories
App Development
Event
Game Development
Mapping
Modelling
Programming
Review
Robotics
Tutorial
Web Development