cache buster on javascript entrypoint
# package-development
m
I'm looking at how to package a Razor Class Library as a package. I'm building with Vite and using a js file as "entry point". It looks to me as the fact that Vite would create file names like "App_Plugins/MyPackage/dist/en-us-FreAp4rx.js" would facilitate cache-busting for any "sub modules", but have anyone created something that adds a cache buster for the entry point? I mean the first file that is requests, eg. /App_Plugins/MyPackage/dist/my-package.js I thinking about adding a version number or something to the umbraco-package.json file but wanted to check if anyone else have other ideas? Might be good if the core itself added the package version number as cache buster? Just thinking out loud ๐Ÿ˜„ EDIT: This is reg. v14 ๐Ÿ˜„
d
Now I may be saying something dumb, but doesn't Umbraco already do this automatically? Perhaps not in local development, but certainly when running in production mode. These are several plugin files that are running in the backoffice for me, also built as RCL and with vite: https://cdn.discordapp.com/attachments/1244567136114966529/1244578603140776007/image.png?ex=66559fa6&is=66544e26&hm=54351164b02f5a26af46765fceb3c36b1a6fd3e7dc3d55ebaf064dacea08c065&
nevermind, you're talking about Umbraco 14, my screenshot is U10
k
Umbraco cache busts based on its own version and generates the hash based on the files it's including from things like package.manifest (umbraco-package.json) but @Markus Johansson is right it doesn't change if you package updates and the file name doesn't change. In v13 adding a query string broke smidge but in v14 I don't think that happens so you might be able to do that. ๐Ÿคทโ€โ™‚๏ธ Maybe Core could use the package version as a part of the hash and then it would break for each package version?
m
@Jacob Overgaard do you have any ideas about this? I noticed that the core-stuff has some kind of hash in the URLs?
@D_Inventor thank you for trying ๐Ÿ˜„ My bad that I wasn't clear ๐Ÿ˜„
j
Yes, we remap the static assets route for the backoffice with a generated hash in the url so the url
/umbraco/backoffice/<hash>/*
leads to the web path
/umbraco/backoffice/*
. You could do something similar in your solution. However, you will have to know the hash when you type out the path in the umbraco-package.json file. I think it would be a good idea if we introduced some sort of way to load extensions with the version number and/or hash for you in the Backoffice client. https://cdn.discordapp.com/attachments/1244567136114966529/1244648435928530944/image.png?ex=6655e0af&is=66548f2f&hm=dee116b79678a14204afd31cec79674d9ec05553ceee79ea48e7886900317b47&
m
Since you are using Vite, it may be worthwhile looking into this: https://github.com/Eptagone/Vite.AspNetCore
m
@Jacob Overgaard I agree, if you could append a cache-buster based on the package version that would be fantastic. I guess that the "short term" solution would be to just try to manually add something unique to the URL. I mean, for me it would be enough with just entry points but I guess that it would have to apply to any assets loaded from the umbraco-plugin.json file.
@Mark Drake thanks for the link! Looks really cool to develop a "regular" website, but in this scenario, the challenge is in how Umbraco extensions are loaded into the new backoffice.
m
I thought maybe by its usage of the hash, you might be able to refer to your packages hash in some way! Thereโ€™s a manifest file being built in one of our projects but TBH I donโ€™t know if thatโ€™s Vite or this .NET dependency building the manifest file. Sorry if it didnโ€™t help!
m
@Mark Drake Thanks man! It will work like you say with a submodules that my script loads but the problem here is the "entry point" file, where I tell Umbraco "hey, here is my plugin, please load this javascript file". Since I have to enter a URL to a js-file I would also have to manage cache busting it when a new package release comes out. I was kind of looking for a solution / rasing awareness around this.
@Kevin Jump Just tested with adding a cache buster to the umbraco-package.json file and it seems to work fine. I guess that this works until there is a better solution in place. Could probably replaced by the build-pipeline I guess. @User if you decide to put something into the core it would good if you looked for existing
?
and use
&
so that things dont' break ๐Ÿ™‚
Copy code
{
  "$schema": "../../../../../samples/UmbracoTestSite/umbraco-package-schema.json",
  "name": "MyThing",
  "version": "1.0.0",
  "extensions": [
    {
      "type": "entryPoint",
      "alias": "MyThing.EntryPoint",
      "name": "MyThing Entry Point",
      "js": "/App_Plugins/MyThing/dist/my-thing.js?v1",
      "weight": 150000
    }
  ]
}
j
Good point. I think we'd do a placeholder so you can decide where it should land up. We already support it for importmaps where you can do
#CACHE_BUSTER#
wherever you like. I think we should be able to do the same for extensions. Maybe even support
#PACKAGE_VERSION#
.
m
@Jacob Overgaard sounds great! ๐Ÿ˜„
While waiting for this I've created a powershell function that will "patch" the umbraco-package.json file and set the version during build. Using it in my dashboard-package if anyone wants to see https://github.com/enkelmedia/TheDashboard/tree/v14/dev/build
47 Views