10.8K ·GitHub
What is this?
A demo app that clones Hacker News using Vue 2.0, vue-router and Vuex, with server-side rendering. It's built as a companion project to Vue's official SSR documentation.
A demo app that clones Hacker News using Vue 2.0, vue-router and Vuex, with server-side rendering. It's built as a companion project to Vue's official SSR documentation.Is this a framework or a sample app?It's a reference/demo application, not a framework or library. It's meant to be read and learned from, showing how to structure a real SSR Vue app.
It's a reference/demo application, not a framework or library. It's meant to be read and learned from, showing how to structure a real SSR Vue app.How do I run it locally?Install dependencies with npm, then run the dev script which starts the Node server (npm run dev). For production, npm run build compiles client and server bundles before npm start serves them.
Install dependencies with npm, then run the dev script which starts the Node server (npm run dev). For production, npm run build compiles client and server bundles before npm start serves them.What do I need installed first?Node.js 7 or higher and npm 4 or higher. It uses Express for the server and Firebase's Hacker News API for data, plus vue, vue-router and vue-server-renderer for SSR.
Node.js 7 or higher and npm 4 or higher. It uses Express for the server and Firebase's Hacker News API for data, plus vue, vue-router and vue-server-renderer for SSR.Is this good to copy for a production SSR setup?No — the author warns against using it as a performance reference since things like code-splitting and CSS extraction are only included to showcase features, not because they're optimal at this app's small scale.
No — the author warns against using it as a performance reference since things like code-splitting and CSS extraction are only included to showcase features, not because they're optimal at this app's small scale.Where does the Hacker News data come from?It uses the Firebase-based HN API, which the author notes enables real-time updates but adds extra bundle size and no efficient batch-fetching.
It uses the Firebase-based HN API, which the author notes enables real-time updates but adds extra bundle size and no efficient batch-fetching.Is it a Progressive Web App?Yes, it includes an app manifest and a service worker, and the demo claims a 100/100 Lighthouse score.
Yes, it includes an app manifest and a service worker, and the demo claims a 100/100 Lighthouse score.Does it do anything fancy with routing or list updates?It has route-level code splitting, preload/prefetch resource hints, and FLIP-animated real-time list updates when switching views.
It has route-level code splitting, preload/prefetch resource hints, and FLIP-animated real-time list updates when switching views.How is state managed between server and client?Vuex handles state with server-side data pre-fetching, then the client hydrates the DOM and state from what the server rendered.
Vuex handles state with server-side data pre-fetching, then the client hydrates the DOM and state from what the server rendered.What are similar projects?YesPlayMusic, vue2-elm, vuestic-admin, razzle, vue, vue2-happyfri, nuxt, habitica
YesPlayMusic, vue2-elm, vuestic-admin, razzle, vue, vue2-happyfri, nuxt, habiticaWhich topics is it in?service-worker, vue-router, single-page-app, vuex, firebase, express, ssr, pwa, node, vue, animation, web-app
service-worker, vue-router, single-page-app, vuex, firebase, express, ssr, pwa, node, vue, animation, web-app