asuh / hn

Isomorphic Hacker News

Isomorphic Hacker News

^{Social Media Photo by AbsolutVision on Unsplash}

---

Live static site.

---

The goal of this project is to showcase a 100% isomorphic version of the famous Hacker News PWA, through my tiny µhtml and µcontent libraries, able to produce a fully static, yet SSR ready, Hacker News reader.

Achievements Unlocked

• this PWA works on a 100% static host
• this PWA could be pre-rendered via SSR too
• the client renders everything incrementally
• the server renders everything with, or without, JS
• both client and server share exactly the same view
• both client and server share exactly the same controller
• both client and server logic is route based, meaning each URL can be shared
• no bundlers whatsoever are involved, everything is standards based
• Lighthouse scores ~100% on a GitHub hosted static site

Extra Details

All you need to do, in order to test this project locally, is the following:

git clone https://github.com/WebReflection/hn.git
cd hn
npm i
npm test
# npm run test:ssr # for SSR

The client side part is within the client/@/ folder, while the server side part is within the server/ folder.

The reason to choose a @ as folder prefix, is to have a portable pattern that would never interfere with the name of any other possible folder.

As example, the SSR part uses those folders indexes to render each page, but the structure is fully compatible with a static host too.

The client side is served either through µcdn, or pre-built via µcompress, after a npm run build command.

To keep it simple, I have also targeted the docs folder, instead of public, simply to be able to tell GitHub to publish this Web App via such folder.

I hope this project will inspire new, as well as old, Web developers, as it's definitively something anyone could do without needing to move away from plain Web standards 🎉