top | item 33425381

Ask HN: Deliver application as single HTML/JS file?

3 points| vitejose | 3 years ago

I’m planning to develop some simple tools for my company’s internal use, and due to IT requirements, I’m hoping to have everything run in the browser and be delivered as a single file containing HTML/JS/CSS. Is there a particular name for this practice/development style?

5 comments

schwartzworld|3 years ago

You can absolutely deliver an app this way. I code up little games for my kids in this way: https://letter-press.netlify.app/ If the intention is to just share the file around and have people open it locally, then the concerns stated by others about caching and CDN are non-issues. You will be extremely limited in what you can do in that environment. Lots of browser features don't work without a server running, and you won't have a backend.

The question I have is why do you have to distribute it as a single file?

vitejose|3 years ago

My main criterion is being able to use existing software since I can’t have folks install anything that’s not approved. This brings me to the web browser, which, for better or worse, has become the ultimate application distribution platform. I suppose it’s not strictly necessary that the programs be delivered as a single file but given that I probably won’t be able to properly host them, I figure it’s easiest to just have a self-contained .html file that can exist on the NAS or be sent via email.

I’m not trying to build anything huge; mostly just a few utilities with some buttons and text input forms that spit out XML files, for instance.

wruza|3 years ago

If that were three files (bundle.js, bundle.css and index.html), it would be called “bundle without splitting”. Keywords: webpack, parcel, vite. Idk if these {css,js} files can be directly pasted into index.html’s link/script tags, but you can try with a simple example.

Added: please note that browsers tend to not cache index.html by default, so your single-file site will be re-downloaded on every access. You can <meta cache-control> it in <head>, but then you’ll have a problem with updates, because all browsers out there will ignore the origin and use the cached version until it expires.

Emigre_|3 years ago

It doesn’t have a particular name. It’s not a good practice per se and probably that’s why it doesn’t have (as far asI know) a concrete denomination.

It is usually better to separate CSS and JS into files to get the benefits of the browser’s cache or the CDN. But of course you have your particular constraints.