hackernews react graphql

ハッカーニュースクローンReact/GraphQL

このプロジェクトは、ReactとGraphQLを使用して、Universal JavaScriptで書き直されたハッカーニュースのクローンです。これは、生産対応のテクノロジーを使用してプロジェクトを構築するのに役立つ例または融点であることを目的としています。

ライブデモ

概要

フィーチャー

• React-（UIフレームワーク）

• GraphQL-（Web DataAPI）

• Apollo-（GraphQLクライアント/サーバー）

• 次に - （ルーティング、SSR、ホットモジュールのリロード、コード分割、ビルドツールがWebpackを使用します）

• TypeScript-（静的タイプ）

• webpack-（モジュールバンドラー）

• postcss-（CSS処理）

• node.js-（Webサーバー）

• Express-（Webアプリサーバー）

• パスポート - （認証）

• eslint-（ベストプラクティス/コードの強調をコーディング）

• Jest-（テスト）

• Docker-（コンテナの展開）

• オプション - YARNまたはPNPMパッケージマネージャー - （より良い依存関係）

利点

フロントエンド

• 宣言UI-（ react ）
• 静的タイピング（ typescript ）
• graphqlフラグメントコロケーション - （ @apollo/client ）
• プリフェッチページアセット - （ next ）

サーバ

• ユニバーサルJS-（ node ＆ express ）
• 宣言的なgraphqlスキーマ - （ apollo-server ）
• GraphQLクエリバッチ - （ apollo-server-express ）
• GraphQL保存クエリ - （ apollo-server-express ）
• 簡単なgraphiql include-（ apollo-server-express ）
• ローカル認証戦略 - （ passport ）
• サーバーサイドレンダリング - （ next ）
• コード分割 - （ next ）
• 静的ウェブサイトにビルド - （ next ）
• コンテナベースのランタイム - （ docker ）

開発/テスト

• ホットモジュールのリロード - （ next ）
• スナップショットテスト - （ jest ）
• GraphQl Playground-（ apollo-server-express ）
• より高速なパッケージインストール - （ pnpm / yarn ）
• JS/TSベストプラクティス - （ eslint ）

アーキテクチャの概要

server.tsはエントリポイントです。エクスプレスを使用し、次にリクエストをパスします。次に、SSRは、ApolloヘルパーからgetServerSideProps()フックを使用してページをレンダリングします。したがって、アプリはクライアントまたはサーバーでGraphQL要求を行います。

クライアントがページをロードすると、次のページのコードを<Link href="/">からプリロードします。クライアントが次のページに移動する場合、1つのgraphqlクエリを作成してレンダリングする必要があります。素晴らしい！

詳細：next.js、apollo graphqlクライアント

GraphQL：ApolloまたはGraphQLドキュメントによるGraphQL-Tools

ディレクトリ構造

各WebページにはpagesにReactコンポーネントがあります。サーバーコードはserverにあります。クライアントまたはサーバーで実行される共有コードはsrcにあります。間違った環境でコードを実行しないように、 srcのserverまたはpagesからインポートしないでください。

プロジェクトルートには、TypeScript、Babel、Eslint、Docker、Flow、NPM、Yarn、Gitなどの構成ファイルが含まれています。

開始方法

ワンクリックダウンロード＆実行

1つのコマンドでリポジトリをダウンロードして実行して、すべてを支配できます。

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

設定

DEVモードでアプリを実行することは、ホットモジュールのリロードを含む完全に紹介されています。

npm install

npm start

生産モードで実行するには：

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

構成

このプロジェクトは、デフォルト設定（ /src/config.ts ）で箱から使い果たされます。プロジェクトルートに.ENVファイルを含めると、設定を構成できます（これは「 dotenv 」NPMパッケージです）。 .envファイルは.gitignoreに含まれています。

テスト方法

冗談

npm test

このプロジェクトはJestを使用しており、Reactコンポーネントのスナップショットテストを行うことができます。コンポーネントが変更されたときはいつでも、 npm test -- -uまたはnpx jest --updateSnapshotを使用してスナップショットを更新してください。

展開のために構築する方法

npm run build:prod ：nextjsアプリは、node.js/expressを使用するエントリポイントserver.tsを使用しています。 TypeScriptコンパイラを使用して、プロジェクトSRCを輸送して構築します。

または

npm run build-docker dockerコンテナ：dockerfileを使用してドッカーコンテナを構築します。

静的ウェブサイト（オプション）

NextJSを使用すると、強力な静的Webサイトを作成できますが、サーバーサイドレンダリングが必要な場合は考慮する必要があります。

npm run build-static-website ：static webサイトを/build/static構築します。静的Webサーバーを使用します。 nginx/githubページ。

貢献

プルリクエストは大歓迎です。アイデア、会話、またはフィードバックの問題を提出します。

コミュニティ

このプロジェクトに出演した後、Twitterで@clintondannolfoをフォローしてください。