https://github.com/webreflection/hn
Isomorphic Hacker News
https://github.com/webreflection/hn
Last synced: over 1 year ago
JSON representation
Isomorphic Hacker News
- Host: GitHub
- URL: https://github.com/webreflection/hn
- Owner: WebReflection
- License: isc
- Created: 2020-06-03T15:18:43.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2020-12-28T09:27:53.000Z (over 5 years ago)
- Last Synced: 2024-12-24T03:11:57.606Z (over 1 year ago)
- Language: JavaScript
- Size: 241 KB
- Stars: 47
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Isomorphic Hacker News
**Social Media Photo by [AbsolutVision](https://unsplash.com/@freegraphictoday) on [Unsplash](https://unsplash.com/)**
- - -
### [Live static site](https://webreflection.github.io/hn/top/?1).
- - -
The goal of this project is to showcase a 100% isomorphic version of the famous [Hacker News PWA](https://hnpwa.com/), through my tiny [µhtml](https://github.com/WebReflection/uhtml#readme) and [µcontent](https://github.com/WebReflection/ucontent#readme) 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](https://github.com/WebReflection/hn/blob/master/client/%40/js/view.js)
* both client and server share exactly the [same controller](https://github.com/WebReflection/hn/blob/master/client/%40/js/hn.js)
* 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:
```sh
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/@/](./client/@/) folder, while the server side part is within the [server/](./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](https://github.com/WebReflection/ucdn#readme), or pre-built via [µcompress](https://github.com/WebReflection/ucompress#readme), 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 🎉