A whole website in a single JavaScript file

Since a bunch of people are setting up a straw-man to criticize this post for &quot;not just serving plain HTML&quot; I&#x27;ll share my opinions on this.<p>Almost nobody is going to use Deno to serve a basic HTML site with less than a dozen pages, they are going to use it to build a monolith application to get content from a database, or a service, then generate server-rendered pages, and also host an API from the same codebase, or something similar.<p>Setting up a monolith application means using something like Ruby-on-Rails, Django, Spring, ASP.net, or rolling your own with a Node.js backend serving a SSR front-end, or hydrating React views.<p>If you haven&#x27;t experienced this already, you will come away with one of two conclusions.<p>1. Wow, this is so much fun, as long as I stay on the happy path of ... Rails ... Django ... ASP.net.<p>2. Wow, setting up all these moving parts really sucks&#x27; I&#x27;m mostly writing configuration files, and then Googling the error messages when I inevitably screw something up.<p>What I think Deno is trying to do is make the process of getting a server side rendered application with modern tooling running with minimal ceremony, while still enabling the developer to customize the system and build things that are not covered by the documentation guides. In addition, their solution is one that can be more easily hosted on edge servers than most other options out there.<p>I&#x27;m glad they are doing it, because it&#x27;s a sorely lacking area of modern web development. They only other people who are taking this on in a meaningful way that I am aware of are Remix. I would be happy for there to be more entrants into this field.<p>Best of luck to everyone out there.

I don&#x27;t think most of the people commenting here realize that the entire site loads just fine with Javascript disabled. Essentially this is HTML getting generated on the server.<p>The fact that it is in Deno rather than PHP, Ruby or Python is the point of the article.

I mean, this is a &quot;single file website&quot; in the sense that `&lt;iframe src=&quot;<a href="https:&#x2F;&#x2F;google.com&quot;&gt;&lt;&#x2F;iframe&gt;" rel="nofollow">https:&#x2F;&#x2F;google.com&quot;&gt;&lt;&#x2F;iframe&gt;</a>` is a &quot;search engine implementation in one line of code&quot;.<p>The only semi-interesting thing here is that this demo pulls dependencies from 3rd party registries via HTTP without an explicit install step. It&#x27;s really not that different than doing regular Node.js development with a committed node_modules (hi, Google), except that if node.land or crux.land go down, you&#x27;ve lost your reproducibility.<p>The thing about &quot;familiar&#x2F;modern techonologies&quot; seem like superficial vanity. A vanilla Node.js equivalent might look something like this<p><pre><code> import {createServer} from &#x27;http&#x27; import {parse} from &#x27;url&#x27; const route = path =&gt; { switch (path) { case &#x27;&#x2F;&#x27;: return home() case &#x27;&#x2F;about&#x27;: return about() default: return error() } } const home = () =&gt; `Hello world` &#x2F;&#x2F; etc... createServer((req, res) =&gt; { res.write(route(parse(req.url))) res.end() }).listen(80) </code></pre> Which is really not anything to write home about, nor an intimidating monstrosity by any measure. Serving cacheable HTML is really not rocket science, it simply does not require &quot;the latest and greatest&quot; anything.

This is great, I&#x27;m not sure why this is being misinterpreted so much. Serving generated HTML from Node using Express many years ago was also great at the time. You can still do that, but in my experience the tooling is quite dated&#x2F;fragmented and the ecosystem+language has evolved significantly since then. Nowadays, SSR+Node generally refers to front-end frameworks with SSR capabilities (Next, Nuxt, SvelteKit, etc.) or generation of static files. Building a dynamically server side rendered site using TypeScript+JSX but without the issues of client side frameworks, hydration, SPA routing, etc. sounds revolutionary, even though it shouldn&#x27;t(?)

This starts to make sense when you consider the self-flagellation of a full server-side-rendering production setup that has existed over the past decade, to the point many SPA products completely give up on SSR - or nowadays throw themselves at the walled garden of Vercel&#x2F;Next.js etc to solve it for them.

&gt; rendered dynamically, just in time, at the edge, close to the user.<p>HTML. You&#x27;re serving HTML.<p>Doesn&#x27;t really matter that the server-side language is JS, PHP, or BASIC.

&gt; &#x2F;&#x2F;&#x2F; &lt;reference no-default-lib=&quot;true&quot;&#x2F;&gt;: Deno comes with various TypeScript libraries enabled by default; with this comment, we tell it to not use those, but instead only the ones we specify manually.<p>Interesting. I checked the docs on this and it’s not quite clear to me why this is needed in this case, or what the benefit is in taking this approach. Is this strictly a build time optimization, or is it necessary in this example?

Tons of big websites use something quite similar to this for their maintenance pages - pop a page of HTML in a JS function, upload it to a Cloudflare worker, and attach that worker to a wildcard route to catch everything on your domain temporarily when you want users to see your maintenance page. It&#x27;s a common strategy that works well.

This is great.<p>I&#x27;ve been dabbling in Deno for a while now. Standard lib is there. Testing is there. All the packages I&#x27;d ever want are there. Linting, a strong style guide, and a documentation generator too.<p>And unlike other beasts, it feels so minimal and out of the way.

I fucking love what Ryan is trying to do with Deno. The entire JS landscape is unnecessarily complicated and NPM is making it even worse.<p>Deno is making JS development fun again. Major props. I hope Deno Deploy is a commercial success for the team.

Is there a particular advantage to how this is done here with Deno or is this just an example of server side rendering being possible in Deno? The latter is fine as I&#x27;m a fan of Deno :) just missing why it&#x27;s such a popular post (maybe more Deno fans?)

Wait a sec, how does Deno knows these classes are actually tailwind css classes? How can I disable that or use an alternative?

I don’t think a simple, static site is a great example for an entire framework

If the the deno executable is roughly the same size as a popular &quot;web browser&quot;1 why not just distribute Javscript files and let users run them in deno. Or let users &quot;import&quot; them into their own scripts.<p>1 The one I downloaded weighs in at 85MB. That is smaller than some popular smartphone apps.<p>As I understand it, deno is designed to be somewhat safer than nodejs.<p>I can edit and compile deno much easier than I can compile a popular web browser. Some popular web browsers are not meant to be edited or compiled by users. If there are things that users dislike about these programs they are powerless to change them.<p>The &quot;web browser&quot; is created and controlled by companies in the business of user data&#x2F;metadata collection and advertising. AFAIK, the people behind deno are not engaged in such practices.<p>The &quot;modern&quot; web browser has become a Trojan Horse of sorts. Instead of a program for displaying and reading HTML, it has become a vehicle by which users indiscriminantly&#x2F;involuntarily run other peoples&#x27; programs, often written in Javascript, in a context where a third party, the commercially-oriented browser vendor, can quietly collect user data&#x2F;metadata, mediate and manipulate user interaction.<p>Deno takes the Javascript interpreter out of the browser.

I&#x27;ve been looking at Deno very briefly recently (overall a good impression) and I was very much surprised that just getting the visitor&#x27;s IP address took like a dozen lines of code.<p>My test case was, basically reproducing something like<p><pre><code> &lt;?php echo $_REQUEST . &quot;\n&quot; . $_SERVER; ?&gt; </code></pre> and I was a little surprised how much convenience was baked into it and how you wouldn&#x27;t have access to all that in other libs. That someone created an issue[1] makes me think I am not just not looking good enough and it&#x27;s actually tedious.<p>[1]: <a href="https:&#x2F;&#x2F;github.com&#x2F;denoland&#x2F;deno_std&#x2F;issues&#x2F;1884" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;denoland&#x2F;deno_std&#x2F;issues&#x2F;1884</a>

Wow that&#x27;s cool. Would love to see a more &quot;interactive&quot; to-do or &quot;guestbook&quot; site that shows how that side of things work.<p>Also wondering if this can be done serverless-ly or requires something always on?

TiddlyWiki is a whole wiki in a single file, been around a while, great system:<p><a href="https:&#x2F;&#x2F;tiddlywiki.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;tiddlywiki.com&#x2F;</a>

I keep seeing comments about static html vs generated html. So I have a question (please respond):<p>Why can’t we just run the example Deno program to generate snapshots of html?<p>It seems like some of us think pure static html is a good goal for some things, so why not use this Deno program to create the same html responses in generated files?<p>It’s probably the same amount of code because instead of writing a http response you write a file.<p>Of course you lose some functionality this way, but your app you rules imo

Warning: Mocking-JS plug<p>Meanwhile, I just created a JavaScript-free website.<p>Never have to worry about broken NPM, cookies, trackings, API, or JS-based malware.<p>And I use my iPhone&#x2F;Android to edit&#x2F;create web pages in Markdown, then my CI will build it and post it for me.<p>Look at the snazzy 3-D CSS, also JS-free.<p>Did I mention that I have a no-nonsense Privacy Policy?<p>3-D web page. <a href="https:&#x2F;&#x2F;egbert.net&#x2F;blog&#x2F;index.html" rel="nofollow">https:&#x2F;&#x2F;egbert.net&#x2F;blog&#x2F;index.html</a>

Alas, I wanted to believe, but I pretty much immediately uncovered a bug with the way my browser’s back button works.<p>In iOS Safari, click the “CLI” link at the top, then swipe the page to the right to go back. If you do it slowly it works, but the first time I tried I did a regular flick-swipe from about the height of the page where the version number is. I was trapped in deno.land and couldn’t go back.<p>(Maybe that’s a bug in deno.land though, not deno.com?)

Where’s Tailwind coming from in this example? It doesn’t seem to be imported, and I can’t see anything about it in their playground link either: <a href="https:&#x2F;&#x2F;dash.deno.com&#x2F;playground&#x2F;website-in-a-single-js" rel="nofollow">https:&#x2F;&#x2F;dash.deno.com&#x2F;playground&#x2F;website-in-a-single-js</a>

In Firefox 98.0.2 &#x2F; Windows 10, at the playground, the URL does not reflect the route, and refreshing will display the hidden but currently selected route, rather than the URL route.<p><a href="https:&#x2F;&#x2F;imgur.com&#x2F;a&#x2F;ZP95YcD" rel="nofollow">https:&#x2F;&#x2F;imgur.com&#x2F;a&#x2F;ZP95YcD</a>

does Deno have a solid web framework? Next.js is somewhat being worked on &#x2F; forked for, like Aleph.js

Seemed pretty simple to add a bagel route <a href="https:&#x2F;&#x2F;dash.deno.com&#x2F;playground&#x2F;cold-parrot-17" rel="nofollow">https:&#x2F;&#x2F;dash.deno.com&#x2F;playground&#x2F;cold-parrot-17</a> with page not found handling. Love the minimalistic nature of this.

If I publish my website to npm and then import and run it in an index.js file, does that also count as &quot;a whole website in a single JavaScript file&quot;?

<i>&gt; These are served using the serve function from the standard library.</i><p>I guess Node.js could learn a lesson here.

&quot;time to interactive: 1.0s &#x2F; first content paint 1.0s&quot;<p>My man, let me introduce you to ... HTML. It has &quot;time to interactive&quot; at 0.0 seconds and content paints instantly!

All apps should be written as a single, stand-alone, self-contained file.

why

I personally find it insane to use the monstrosity in terms of loc and complexity that the v8 engine is to generate a static HTML web site. I also disagree with other JS based static site generators because of the above reasons. I strongly believe it&#x27;s a bad idea to have to locally install nodejs or deno and write JavaScript to generate a few HTML pages. Also, I disagree with plain HTML because of duplication.<p><a href="http:&#x2F;&#x2F;mkws.sh&#x2F;" rel="nofollow">http:&#x2F;&#x2F;mkws.sh&#x2F;</a> uses the standard UNIX tools to generate `HTML` pages featuring a powerful sh based templating engine <a href="https:&#x2F;&#x2F;adi.onl&#x2F;pp.html" rel="nofollow">https:&#x2F;&#x2F;adi.onl&#x2F;pp.html</a>. Dependencies and complexity are kept to a minimum. It does the minimum required, generate HTML pages and keep duplication low using aprox 400 SLOC.