hackernews react graphql

Hacker News Clone React/GraphQl

โครงการนี้เป็นโคลนของข่าวแฮ็กเกอร์ที่เขียนใหม่ด้วย Universal JavaScript โดยใช้ React และ GraphQL มีจุดประสงค์เพื่อเป็นตัวอย่างหรือแผ่นหม้อไอน้ำเพื่อช่วยให้คุณจัดโครงสร้างโครงการของคุณโดยใช้เทคโนโลยีพร้อมการผลิต

การสาธิตสด

ภาพรวม

การแสดงผล

• React - (กรอบ UI)

• GraphQl - (Web Data API)

• Apollo - (graphql ไคลเอนต์/เซิร์ฟเวอร์)

• ถัดไป - (การกำหนดเส้นทาง, SSR, การโหลดโมดูลร้อน, การแยกรหัส, เครื่องมือสร้างใช้ webpack)

• TypeScript - (ประเภทคงที่)

• WebPack - (โมดูล Bundler)

• POSTCSS - (การประมวลผล CSS)

• node.js - (เว็บเซิร์ฟเวอร์)

• ด่วน - (เว็บแอพเซิร์ฟเวอร์)

• หนังสือเดินทาง - (การรับรองความถูกต้อง)

• ESLINT - (การเขียนโค้ดแนวทางปฏิบัติที่ดีที่สุด/การเน้นรหัส)

• jest - (การทดสอบ)

• Docker - (การปรับใช้คอนเทนเนอร์)

• ตัวเลือก - เส้นด้ายหรือ PNPM Package Manager - (การพึ่งพาที่ดีกว่า)

ประโยชน์

ส่วนหน้า

• Declarative UI - ( react )
• การพิมพ์แบบคงที่ ( typescript )
• graphql fragment colocation - ( @apollo/client )
• Prefetch Page Assets - ( next )

เซิร์ฟเวอร์

• Universal JS - ( node & express )
• Declarative GraphQl Schema - ( apollo-server )
• GraphQl Query Batching-( apollo-server-express )
• GraphQL ที่เก็บไว้ในแบบสอบถาม-( apollo-server-express )
• Easy graphiql รวม-( apollo-server-express )
• กลยุทธ์การรับรองความถูกต้องในท้องถิ่น - ( passport )
• การแสดงผลด้านเซิร์ฟเวอร์ - ( next )
• การแยกรหัส - ( next )
• สร้างเว็บไซต์คงที่ - ( next )
• รันไทม์ตามคอนเทนเนอร์ - ( docker )

dev/test

• การโหลดโมดูลร้อน - ( next )
• การทดสอบสแน็ปช็อต - ( jest )
• GraphQl Playground-( apollo-server-express )
• การติดตั้งแพ็คเกจที่เร็วขึ้น - ( pnpm / yarn )
• แนวทางปฏิบัติที่ดีที่สุดของ JS/TS - ( eslint )

ภาพรวมสถาปัตยกรรม

server.ts เป็นจุดเข้า มันใช้ Express และส่งคำขอไปยังถัดไป SSR ถัดไปแสดงหน้าหน้าโดยใช้ getServerSideProps() Hook จาก Apollo Helper ดังนั้นแอพจึงทำให้คำขอ GraphQL บนไคลเอนต์หรือเซิร์ฟเวอร์

เมื่อไคลเอนต์โหลดหน้าเว็บจะโหลดรหัสหน้าถัดไปจาก <Link href="/"> เมื่อไคลเอนต์นำทางไปยังหน้าถัดไปจะต้องสร้างแบบสอบถาม GraphQL หนึ่งแบบเพื่อแสดงผล ยอดเยี่ยม!

ดูเพิ่มเติม: Next.js, Apollo GraphQl Client

graphql: graphql-tools โดย Apollo หรือ graphql docs

โครงสร้างไดเรกทอรี

หน้าเว็บแต่ละหน้ามีส่วนประกอบตอบสนองใน pages รหัสเซิร์ฟเวอร์อยู่ใน server รหัสที่ใช้ร่วมกันที่ทำงานบนไคลเอนต์หรือเซิร์ฟเวอร์อยู่ใน src อย่านำเข้าจาก server หรือ pages ใน src เพื่อหลีกเลี่ยงการเรียกใช้รหัสในสภาพแวดล้อมที่ไม่ถูกต้อง

รูทโครงการมีไฟล์กำหนดค่าเช่น typeScript, Babel, Eslint, Docker, Flow, NPM, เส้นด้าย, Git

วิธีเริ่มต้น

คลิกเดียวดาวน์โหลดและเรียกใช้

คุณสามารถดาวน์โหลดและเรียกใช้ repo ด้วยคำสั่งเดียวเพื่อปกครองพวกเขาทั้งหมด:

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

โครงการนี้ใช้ความตลกขบขันและสามารถทำการทดสอบสแน็ปช็อตของส่วนประกอบปฏิกิริยา เมื่อใดก็ตามที่มีการเปลี่ยนแปลงส่วนประกอบโปรดอัปเดตสแน็ปช็อตโดยใช้ npm test -- -u หรือ npx jest --updateSnapshot

วิธีการสร้างสำหรับการปรับใช้

npm run build:prod : NextJS แอปพร้อมจุดเริ่มต้น server.ts ที่ใช้ node.js/express ใช้คอมไพเลอร์ TypeScript เพื่อ transpile Project SRC เพื่อสร้าง

หรือ

npm run build-docker Docker: สร้างคอนเทนเนอร์ Docker โดยใช้ DockerFile

เว็บไซต์คงที่ (ไม่บังคับ)

NextJS ให้เราสร้างเว็บไซต์คงที่ที่ทรงพลัง แต่คุณต้องพิจารณาว่าคุณต้องการการแสดงผลด้านเซิร์ฟเวอร์หรือไม่

npm run build-static-website : สร้างเว็บไซต์คงที่เป็น /build/static ใช้เว็บเซิร์ฟเวอร์แบบคงที่ เช่น หน้า nginx/gitHub

การบริจาค

ยินดีต้อนรับคำขอดึง ยื่นปัญหาสำหรับแนวคิดการสนทนาหรือข้อเสนอแนะ

ชุมชน

หลังจากที่คุณ★แสดงโครงการนี้ให้ติดตาม @clintondannolfo บน Twitter