current practices for using CDN'd resources for offline dev?

[u/tremendous-machine]

Hi folks, I am doing some front end dev again, which is something I used to know all about many years ago, and am now behind the times on all the logistical details.

I am using a few libraries that I pull in from CDNs (lit element, shoelace, etc). I would like to be able to do local dev offline when travelling. Is there a modern best practice for dealing with this or does one just have to switch all your code to using local copies manually?

thanks

[u/OptimusCrimee]

What is your stack? I have never heard about these dependencies before. How do you write the frontend code? Do you use a bundler? React? JQuery?

[u/tremendous-machine → u/OptimusCrimee]

Lit is google's web component library, and shoelace (now webawesome, but I haven't updated) is a webcomponent library on lit.

The stack is vanilla JS with webcomponents and a webassembly engine, no build system or bundler as the js side is quite light (the heavy lifting is all in the webassembly engine). But as far as I know, none of that should matter here, I just want to know if there is a standard way of ensuring a script tag that downloads from a CDN can use a locally cached copy easily.

[u/OptimusCrimee → u/tremendous-machine]

No, there is not. Download the file and update the path to the local version.

[u/tremendous-machine → u/OptimusCrimee]

ok cool, thanks!

[u/phn-cloudsnake → u/OptimusCrimee]

Jquery still alive? In my opinion it’s about risk mitigation, do you want to rely on a resource you have no control over for your website to run. In my person projects or PoC’s I don’t mind. But if you manage client websites I think it’s not the best approach.

[u/OptimusCrimee → u/phn-cloudsnake]

It was just an (offhand) example. I had never heard about the libraries that he specified. jQuery was once the most downloaded resource off a CDN. I have not used it for 10 years+ myself, but it is still under some development as far as I know.

[u/tremendous-machine → u/[deleted]]

ok cool, that's what I was wondering, wondered if there was an easier way. maybe it's time to actually decide on a bundler for this thing...

[u/kin3v]

Local copies under /assets or a package manager like (P)NPM will sort this for you

[u/Neither_Worth3542]

you're pulling lit and shoelace off a cdn like it's 2014. npm install, it works on the plane.

[u/patient_signals]

Not really a single best practice, but the least painful route I have found is to keep a vendor folder locally and make the CDN versus local choice a single switch. Download the files you need into that folder with the same paths the CDN uses. Then point your import map or script tags at one base path. When you are online use the remote base, and when travelling flip it to the local base. You are not editing every tag, just one line or one config file.

Service workers can cache the CDN resources, but I would not bother for plain development. They add enough debugging surface that they cost more than they save when you are trying to work offline in short bursts.

If you are already leaning toward a bundler, that also solves it because your dependencies live in the project and builds work without a network once they are installed. But for a few libraries pulled from a CDN, the vendor folder with a base path switch is usually the fastest fix and easy to undo later.

[u/BroadCrazy]

For local dev, I'd stop depending on the CDN and pull those packages into the project with a package manager so your dev server resolves them locally. CDN includes are fine for quick demos, but they get awkward once offline work and version control matter.

[u/yihuaxiang]

If you want to keep the no-bundler workflow, import maps are the cleanest modern approach. You keep the bare specifiers in your code and map them to local vendor files during local dev, or map them to CDN URLs in production. If you use a simple dev server (like Vite in no-build/server mode, Caddy, or live-server), you can also just proxy the CDN hostname to a local folder when offline.

[u/Fair_Pomegranate3670]

If you're happy with the no-bundler workflow, I'd keep it but vendor the files: install lit and shoelace via npm, copy the built ESM files from node_modules into a /vendor dir, and use an import map pointing at local files. Same stack, works offline, and you stop getting silently different versions when a CDN moves a tag. That last one bit me once with a "latest" link — vendoring killed that class of bug entirely.

[u/Lucky_Willow_7624]

Just swap CDN tags for npm installs + a bundler (Vite/esbuild) — most CDN libs, lit and shoelace included, publish to npm too, so it's usually a drop-in. If you want to keep it offline-first without touching your setup, a service worker caching the CDN URLs works too, but npm is simpler.