hackernews react graphql Unduh - hackernews react graphql Sumber Code Unduh

hackernews react graphql

Kode Sumber AI

1.0.0

Unduh

Hacker News Clone React/GraphQL

Proyek ini adalah klon dari Hacker News yang ditulis ulang dengan Universal JavaScript, menggunakan React dan GraphQL. Ini dimaksudkan untuk menjadi contoh atau boilerplate untuk membantu Anda menyusun proyek Anda menggunakan teknologi yang siap-produksi.

Hacker News Clone Demo

Demo langsung

Ringkasan

Menampilkan

React - (UI Framework)
GraphQL - (Web Data API)
Apollo - (GraphQL Client/Server)
Berikutnya - (Routing, SSR, Hot Module Reloading, Pemisahan Kode, Build Tool Menggunakan Webpack)
Naskah - (tipe statis)
Webpack - (Modul Bundler)
PostCSS - (Pemrosesan CSS)
Node.js - (server web)
Express - (Web App Server)
Paspor - (otentikasi)
Eslint - (pengkodean praktik terbaik/penyorotan kode)
Jest - (Tes)
Docker - (Penyebaran Kontainer)
Opsional - Manajer paket benang atau PNPM - (dependensi yang lebih baik)

Manfaat

Ujung depan

UI Deklaratif - ( react )
Pengetikan statis ( typescript )
GraphQL Fragment Colocation - ( @apollo/client )
Aset Halaman Prefetch - ( next )

Server

Universal JS - ( node & express )
Skema Deklaratif GraphQL - ( apollo-server )
GraphQL Query Batching-( apollo-server-express )
GraphQL Simpan Kueri-( apollo-server-express )
Easy GraphiQL termasuk-( apollo-server-express )
Strategi Otentikasi Lokal - ( passport )
Rendering sisi server - ( next )
Kode Pemisahan - ( next )
Bangun ke situs web statis - ( next )
Runtime Berbasis Kontainer - ( docker )

Dev/tes

Reload Modul Panas - ( next )
Pengujian Snapshot - ( jest )
GraphQL Playground-( apollo-server-express )
Instal Paket Lebih Cepat - ( pnpm / yarn )
JS/TS Praktik Terbaik - ( eslint )

Tinjauan Arsitektur

Tinjauan Arsitektur Klon Berita Peretas

server.ts adalah titik masuk. Ini menggunakan permintaan Express dan meneruskan berikutnya. SSR berikutnya membuat halaman menggunakan getServerSideProps() dari Apollo Helper. Oleh karena itu aplikasi membuat permintaan GraphQL pada klien atau server.

Ketika klien memuat halaman itu preloads kode halaman berikutnya dari <Link href="/"> . Ketika klien menavigasi ke halaman berikutnya, ia hanya perlu membuat satu permintaan graphql untuk diterjemahkan. Besar!

Lihat lebih lanjut: Next.js, klien Apollo GraphQL

GraphQL: graphql-tools oleh apollo atau graphql docs

Struktur Direktori

Setiap halaman web memiliki komponen bereaksi di pages . Kode server ada di server . Kode bersama yang berjalan pada klien atau server ada di src . Jangan mengimpor dari server atau pages di src untuk menghindari menjalankan kode di lingkungan yang salah.

Root proyek berisi file konfigurasi seperti TypeScript, Babel, Eslint, Docker, Flow, NPM, YARN, GIT.

Bagaimana memulai

Satu klik Unduh & Jalankan

Anda dapat mengunduh dan menjalankan repo dengan satu perintah untuk memerintah semuanya:

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

Pengaturan

Menjalankan aplikasi dalam mode dev sepenuhnya ditampilkan termasuk pemuatan ulang modul panas :

npm install

npm start

Untuk berjalan dalam mode produksi:

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

Konfigurasi

Proyek kehabisan kotak dengan pengaturan default ( /src/config.ts ). Anda dapat menyertakan file .env di root proyek Anda untuk mengonfigurasi pengaturan (ini adalah paket NPM ' dotenv '). File .env termasuk dalam .gitignore .

Cara menguji

Bersenda gurau

npm test

Proyek ini menggunakan JEST dan dapat melakukan pengujian snapshot dari komponen React. Setiap kali komponen diubah, harap perbarui snapshot menggunakan npm test -- -u atau npx jest --updateSnapshot .

Cara membangun untuk penempatan

npm run build:prod : NextJS App dengan Entry Point server.ts yang menggunakan Node.js/Express. Menggunakan kompiler naskah untuk mentranspile proyek SRC untuk membangun.

ATAU

npm run build-docker Docker Container: Membangun wadah Docker menggunakan DockerFile.