hackernews react graphql

Hacker News Clone React/GraphQL

هذا المشروع عبارة عن استنساخ من أخبار Hacker التي تم إعادة كتابتها بـ Universal JavaScript ، باستخدام React و GraphQL. يهدف إلى أن تكون مثالاً أو غلاية لمساعدتك على تنظيم مشاريعك باستخدام تقنيات جاهزة للإنتاج.

عرض مباشر

ملخص

يضم

• رد فعل - (إطار واجهة المستخدم)

• GraphQL - (API بيانات الويب)

• Apollo - (عميل/خادم GraphQL)

• التالي - (التوجيه ، SSR ، إعادة تحميل الوحدة النمطية الساخنة ، تقسيم التعليمات البرمجية ، أداة الإنشاء يستخدم WebPack)

• TypeScript - (أنواع ثابتة)

• Webpack - (Bundler Module)

• postcss - (معالجة CSS)

• node.js - (خادم الويب)

• Express - (خادم تطبيق الويب)

• جواز السفر - (المصادقة)

• ESLINT - (ترميز أفضل الممارسات/تمييز الكود)

• Jest - (اختبارات)

• Docker - (نشر الحاوية)

• اختياري - YARN أو PNPM Package Manager - (تبعيات أفضل)

فوائد

الواجهة الأمامية

• واجهة المستخدم التعريفية - ( react )
• الكتابة الثابتة ( typescript )
• GraphQl Fragment Colocation - ( @apollo/client )
• أصول صفحة الجلب المسبق - ( next )

الخادم

• Universal JS - ( node & express )
• مخطط GraphQL التصريح - ( apollo-server )
• دفعة الاستعلام GraphQL-( apollo-server-express )
• استعلامات GraphQL المخزنة-( apollo-server-express )
• تشمل GraphIQL السهل-( apollo-server-express )
• استراتيجية المصادقة المحلية - ( passport )
• عرض جانب الخادم - ( next )
• تقسيم الكود - ( next )
• بناء على موقع ثابت - ( next )
• وقت التشغيل القائم على الحاوية - ( docker )

ديف/اختبار

• الوحدة الساخنة إعادة تحميل - ( next )
• اختبار لقطة - ( jest )
• ملعب GraphQL-( apollo-server-express )
• تثبيت حزمة أسرع - ( pnpm / yarn )
• أفضل الممارسات JS/TS - ( eslint )

نظرة عامة على الهندسة المعمارية

server.ts هي نقطة الدخول. يستخدم Express ويقوم بتمرير الطلبات إلى التالي. يقوم SSR التالي بإعداد الصفحات باستخدام خطاف getServerSideProps() من Apollo Helper. لذلك يقدم التطبيق طلبات GraphQL على العميل أو الخادم.

عندما يقوم العميل بتحميل الصفحة ، فإنه يدرس رمز الصفحات التالية من أي <Link href="/"> . عندما ينتقل العميل إلى الصفحة التالية ، فإنه يحتاج فقط إلى إجراء استعلام GraphQL واحد لتقديمه. عظيم!

شاهد المزيد: Next.js ، عميل Apollo GraphQL

GraphQL: GraphQl-Tools من مستندات Apollo أو GraphQL

هيكل الدليل

تحتوي كل صفحة ويب على مكون رد فعل في pages . رمز الخادم في server . الكود المشترك الذي يتم تشغيله على العميل أو الخادم موجود في src . لا تستورد من server أو pages في src لتجنب تشغيل التعليمات البرمجية في البيئة الخاطئة.

يحتوي جذر المشروع على ملفات التكوين مثل TypeScript و Babel و Eslint و Docker و Flow و NPM و Yarn و 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

يستخدم هذا المشروع Jest ويمكنه إجراء اختبار لقطة لمكونات React. كلما تم تغيير مكون ، يرجى تحديث اللقطات باستخدام npm test -- -u أو npx jest --updateSnapshot .

كيفية البناء للنشر

npm run build:prod : NextJS App مع server.ts التي تستخدم Node.js/Express. يستخدم برنامج التحويل البرمجي TypeScript لنقل المشروع SRC للبناء.

أو

npm run build-docker Docker Container: يبني حاوية Docker باستخدام DockerFile.

موقع ثابت (اختياري)

يتيح لنا NextJS إنشاء موقع ويب ثابت قوي ولكن عليك التفكير في ما إذا كنت بحاجة إلى تقديم جانب الخادم.

npm run build-static-website : يبني موقعًا ثابتًا على /build/static . استخدم خادم ويب ثابت على سبيل المثال. صفحات nginx/github.

المساهمة

طلبات السحب موضع ترحيب. تقديم مشكلة للأفكار أو المحادثة أو التعليقات.

مجتمع

بعد أن ★ نجم هذا المشروع ، اتبع clintondannolfo على Twitter.