hackernews react graphql

Hacker News Clone React/Graphql

Dieses Projekt ist ein Klon von Hacker News, das mit universeller JavaScript mit React und GraphQL umgeschrieben wurde. Es soll ein Beispiel oder ein Kesselplatten sein, mit dem Sie Ihre Projekte mithilfe von produktionsbereiten Technologien strukturieren können.

Live -Demo

Überblick

Mit

• React - (UI -Framework)

• GraphQL - (Webdaten -API)

• Apollo - (GraphQL Client/Server)

• Weiter - (Routing, SSR, Hot Modul Reloading, Code -Aufteilung, Build -Tool verwendet Webpack).

• TypeScript - (statische Typen)

• Webpack - (Modul Bundler)

• Postcss - (CSS -Verarbeitung)

• Node.js - (Webserver)

• Express - (Web App Server)

• Pass - (Authentifizierung)

• Eslint - (Coding Best Practices/Code -Hervorhebung)

• Scherz - (Tests)

• Docker - (Containerbereitstellung)

• Optional - Garn- oder PNPM -Paketmanager - (bessere Abhängigkeiten)

Vorteile

Frontend

• Deklarative UI - ( react )
• Statische Typisierung ( typescript )
• GraphQL -Fragment Colocation - ( @apollo/client )
• Seitenvermögen vorab - ( next )

Server

• Universal JS - ( node & express )
• Deklaratives GraphQL -Schema - ( apollo-server )
• GraphQL Abfrage-Batching-( apollo-server-express )
• GraphQL gespeicherte Abfragen-( apollo-server-express )
• Einfach Graphiql inklusive-( apollo-server-express )
• Lokale Authentifizierungsstrategie - ( passport )
• Serverseite Rendering - ( next )
• Codeaufteilung - ( next )
• Auf statische Website erstellen - ( next )
• Containerbasierte Laufzeit - ( docker )

Dev/Test

• Heißmodul Nachladen - ( next )
• Schnappschusstests - ( jest )
• GraphQL Playground-( apollo-server-express )
• Schnellerer Paket install - ( pnpm / yarn )
• JS/TS Best Practices - ( eslint )

Architekturübersicht

server.ts ist der Einstiegspunkt. Es verwendet Express und übergibt Anfragen an den nächsten. Als nächstes rendert SSR die Seiten mit getServerSideProps() Hook von Apollo Helper. Daher stellt die App GraphQL -Anforderungen auf dem Client oder Server an.

Wenn der Client die Seite lädt, lädt IT -Code des nächsten Seitens von einem <Link href="/"> vor. Wenn der Client zur nächsten Seite navigiert, muss nur eine GraphQL -Abfrage zum Rendern erstellen. Großartig!

Siehe More: Next.js, Apollo GraphQL Client

GraphQL: Graphql-Tools von Apollo oder GraphQL DOCs

Verzeichnisstruktur

Jede Webseite verfügt über eine React -Komponente auf pages . Der Servercode ist auf server . Shared Code, der auf dem Client oder Server ausgeführt wird, befindet sich in src . Importieren Sie nicht vom server oder pages in src um zu vermeiden, dass Code in der falschen Umgebung ausgeführt wird.

Das Projektroot enthält Konfigurationsdateien wie TypeScript, Babel, Eslint, Docker, Flow, NPM, Garn, Git.

Wie man anfängt

Ein Klick -Download & Ausführen

Sie können das Repo mit einem Befehl herunterladen und ausführen, um sie alle zu regieren:

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

Aufstellen

Das Ausführen der App im Dev -Modus wird vollständig vorgestellt, einschließlich des Wiederladens von Hot -Modul :

npm install

npm start

Im Produktionsmodus laufen:

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

Konfiguration

Das Projekt wird mit Standardeinstellungen ( /src/config.ts ) aus dem Feld ausgeführt. Sie können eine .Env -Datei in Ihr Projektroot einbeziehen, um Einstellungen zu konfigurieren (dies ist das ' dotenv ' NPM -Paket). Die .Env -Datei ist in .Gitignore enthalten.

Wie man testet

Scherz

npm test

Dieses Projekt verwendet Scherz und kann Schnappschusstests von React -Komponenten durchführen. Wenn eine Komponente geändert wird, aktualisieren Sie die Snapshots mit npm test -- -u oder npx jest --updateSnapshot .

So erstellen Sie für den Einsatz

npm run build:prod : NextJS -App mit Einstiegspunkt server.ts , der node.js/express verwendet. Verwendet den Typscript -Compiler, um das Projekt SRC zum Erstellen zu transpilieren.

ODER

npm run build-docker Docker Container: Erstellt einen Docker-Container mit Dockerfile.

Statische Website (optional)

Mit NextJS können wir eine leistungsstatische statische Website erstellen, aber Sie müssen berücksichtigen, ob Sie eine Server -Side -Rendering benötigen.

npm run build-static-website : Build statische Website zu /build/static . Verwenden Sie einen statischen Webserver, z. Nginx/Github -Seiten.

Beitragen

Pull -Anfragen sind willkommen. Stellen Sie ein Problem für Ideen, Gespräche oder Feedback ein.

Gemeinschaft

Folgen Sie @Clintondannolfo auf Twitter.