hackernews react graphql

黑客新聞克隆react/graphql

該項目是使用React和GraphQL重寫的Hacker News的克隆。它旨在成為一個示例或樣板，以幫助您使用準備就緒的技術來構建項目。

現場演示

概述

特色

• 反應 - （UI框架）

• GraphQL-（Web Data API）

• Apollo-（GraphQL客戶端/服務器）

• 下一個 - （路由，SSR，熱模塊重新加載，代碼分配，構建工具使用WebPack）

• 打字稿 - （靜態類型）

• webpack-（模塊Bundler）

• PostCSS-（CSS處理）

• node.js-（Web服務器）

• Express-（Web App Server）

• 護照 - （身份驗證）

• ESLINT-（編碼最佳實踐/代碼突出顯示）

• 開玩笑 - （測試）

• Docker-（容器部署）

• 可選 - 紗線或PNPM軟件包管理器 - （更好的依賴項）

好處

前端

• 聲明性ui-（ react ）
• 靜態打字（ typescript ）
• GraphQl Fragment託管 - （ @apollo/client ）
• 預取頁資產 - （ next ）

伺服器

• 通用JS-（ node ＆ express ）
• 聲明的GraphQL模式 - （ apollo-server ）
• GraphQl查詢批處理 - （ apollo-server-express ）
• GraphQl存儲的查詢 - （ apollo-server-express ）
• Easy GraphiQl包括 - （ apollo-server-express ）
• 本地身份驗證策略 - （ passport ）
• 服務器端渲染 - （ next ）
• 代碼拆分 - （ next ）
• 構建靜態網站 - （ next ）
• 基於容器的運行時 - （ docker ）

開發/測試

• 熱模塊重新加載 - （ next ）
• 快照測試 - （ jest ）
• GraphQl Playground-（ apollo-server-express ）
• 更快的包裝安裝 - （ pnpm / yarn ）
• JS/TS最佳實踐 - （ eslint ）

體系結構概述

server.ts是入口點。它使用Express並將請求傳遞到下一步。接下來，SSR使用Apollo Helper的getServerSideProps()掛鉤呈現頁面。因此，該應用在客戶端或服務器上提出GraphQL請求。

當客戶端加載頁面時，它會從任何<Link href="/">中預訂下一個頁面代碼。當客戶端導航到下一頁時，只需要對一個GraphQl查詢進行渲染。偉大的！

查看更多：next.js，apollo graphql客戶端

GraphQl：Apollo或GraphQl Docs的GraphQl-Tools

目錄結構

每個網頁在pages中都有一個反應組件。服務器代碼在server中。在客戶端或服務器上運行的共享代碼在src中。不要從server或src中的pages導入，以避免在錯誤的環境中運行代碼。

項目root包含配置文件，例如打字稿，babel，eslint，docker，flow，npm，yarn，git。

如何開始

一單擊下載並運行

您可以使用一個命令下載並運行倉庫來統治所有內容：

git clone https://github.com/clintonwoo/hackernews-react-graphql.git && cd hackernews-react-graphql && npm install && npm start

設定

以開發模式運行該應用程序的完整特徵包括熱模塊重新加載：

npm install

npm start

在生產模式下運行：

npm run build:prod && npm run start:prod

配置

該項目以默認設置（ /src/config.ts ）為單方面。您可以在項目root中包含一個.env文件以配置設置（這是“ dotenv ” NPM軟件包）。 .env文件包含在.gitignore中。

如何測試

笑話

npm test

該項目使用開玩笑，可以對React組件進行快照測試。每當更改組件時，請使用npm test -- -u或npx jest --updateSnapshot更新快照。

如何構建部署

npm run build:prod ：nextJS應用帶有輸入點server.ts ，使用node.js/express。使用Typescript編譯器來構建SRC。

或者

npm run build-docker木材碼頭容器：使用Dockerfile構建Docker容器。

靜態網站（可選）

NextJ可以使我們建立一個功能強大的靜態網站，但是您需要考慮是否需要服務器端渲染。

npm run build-static-website ：構建靜態網站到/build/static 。使用靜態Web服務器，例如。 nginx/github頁面。

貢獻

歡迎拉動請求。提出想法，對話或反饋的問題。

社區

★明星這個項目之後，請在Twitter上關注@clintondannolfo。