Ask HN: Deliver application as single HTML/JS file?
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
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?
The question I have is why do you have to distribute it as a single file?
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.
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.
You can get free hosting at Vercel or Netlify or similar.
There's no reason to do what you want as a single file. Just write normal HTML and Javascript.
Being able to send people a URL is a lot easier than having to mail them a huge HTML file with everything embedded, even if you could theoretically do that with like data URLs and base 64 encoded images and whatnot. It's just not necessary and will make your project more complicated. And updates will be very hard to manage.
There's a whole industry built around web apps because they are easy to deliver to anyone with a browser. You don't have to reinvent the wheel here.
Being able to send people a URL is a lot easier than having to mail them a huge HTML file with everything embedded, even if you could theoretically do that with like data URLs and base 64 encoded images and whatnot. It's just not necessary and will make your project more complicated. And updates will be very hard to manage.
There's a whole industry built around web apps because they are easy to deliver to anyone with a browser. You don't have to reinvent the wheel here.
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.
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.
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.
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.