mernboilerplate antd
1.0.0
سأستمر في هذا المستودع بإضافة أفضل ممارسات الإنتاج التي يجب أن نتبعها في مشروع MERN (MongoDB وExpress.js وReact.js وNode.js). ومن أجل تجربة مستخدم أفضل أيضًا، أستخدم Antd Pro لواجهة المستخدم. ربما سأستخدم MUI لاحقًا أيضًا.
فيما يلي عينة من صفحة القائمة النموذجية:
كما يوحي الاسم، تم بناء هذا المستودع فوق Express.js وReact.js، ولكن في تفاصيل التنفيذ، سنجد تقنيات داعمة أخرى أيضًا.
يمكن العثور على أطر العمل والحزم التفصيلية في ملفات package.json في دليل الخادم والعميل.
يمكن تشغيل هذا المشروع بشكل أساسي بطريقتين. أحدهما يستخدم عامل الإرساء، والطريقة الأخرى هي التشغيل يدويًا عبر vscode.
اعتمادًا على خيار استضافة MongoDB، نختار ملف إنشاء عامل الإرساء المناسب.
لدينا حاليًا ملفان لإنشاء عامل الإرساء:
docker-compose.mongocloud.yml - مجموعة MongoDB.com المستضافةdocker-compose.yml - حاوية MongoDB المحلية MONGODB_CLOUD_URL في docker-compose.mongocloud.yml إلى عنوان URL المناسب لـ MongoDB.REACT_APP_API_URL في docker-compose.yml إلى عنوان URL المناسب لواجهة برمجة التطبيقات. إذا أردنا تعريف عميلنا بالإنترنت، فنحن بحاجة إلى تغيير REACT_APP_API_URL إلى عنوان URL المناسب لواجهة برمجة التطبيقات. بخلاف ذلك، احتفظ بـ REACT_APP_API_URL كـ http://localhost:8002 .تشغيل أوامر إنشاء عامل الإرساء
من المتوقع أن يكون الجهاز مثبتًا عليه عامل الإرساء وتكوين الإرساء. انتقل إلى جذر المستودع وقم بتنفيذ الأوامر المناسبة. سيؤدي ذلك إلى تدوير حاويات الخادم والعميل جنبًا إلى جنب مع حاوية MongoDB (إذا كنا نستخدم خادم MongoDB المحلي) داخل بيئة Docker.
استخدام حاويات الإرساء مع MongoDB المستضافة على السحابة
> cd project-root
> docker-compose -f docker-compose.mongocloud.yml build
> docker-compose -f docker-compose.mongocloud.yml upاستخدام حاويات الإرساء مع MongoDB المحلي
> cd project-root
> docker-compose build
> docker-compose upكل من العميل والخادم جاهزان للعمل ويجب أن نرى الشاشة التالية إذا انتقلنا إلى عنوان URL الخاص بالعميل.
البيانات الأولية: انتقل إلى داخل حاوية عامل الإرساء وقم بتنفيذ الأوامر أدناه. سيؤدي ذلك إلى زرع قاعدة البيانات roles users وبيانات products .
docker exec -it appserver bash
npm run db:seed
npm run db:migrate يجب أن تشاهد الإخراج التالي: 
يجب عليك الآن تسجيل الدخول إلى التطبيق والاطلاع على قائمة المنتجات.
للتشغيل عبر vscode، يجب علينا تشغيل مشاريع جانب الخادم والعميل بشكل منفصل، وكذلك التأكد من تشغيل mongodb.
قم بإنشاء ملف .env داخل دليل server . أضف الإدخالات أدناه أو قم بالتغيير وفقًا لذلك. يمكنك متابعة ملف .env.sample لرؤية التنسيق.
DB_HOST=localhost
DB_PORT=27017
DB_NAME=appdb
JWT_SECRET=secret
JWT_EXPIRES_IN=3600
PORT=5000
IS_MONGODB_CLOUD_URL=false
MONGODB_CLOUD_URL=mongodb+srv:// <USER >: <PASSWORD >@cluster0.abcd.mongodb.net/myFirstDatabase?retryWrites=true
نفترض أننا نقوم بتشغيل MongoDB في حاوية عامل الإرساء.
cd server
npm i
npm run db:up
npm start cd client-pro
nvm use --lts
yarn
yarn startلزرع قاعدة البيانات، نحتاج إلى تشغيل الأوامر التالية في حاوية عامل الإرساء. يمكنك تشغيل هذه الأوامر في الجهاز أيضًا إذا كنت تقوم بتشغيل الخادم والعميل خارج بيئة عامل الإرساء. أفترض أننا نقوم بتشغيل خادم التطبيقات في حاوية عامل الإرساء.
docker exec -it appserver bash
npm run db:seed
npm run db:migrate يجب أن تكون قادرًا على رؤية اسم المستخدم وكلمة المرور في الملف /server/setup/users.json .
لقد قدمت واجهة مستخدم لإدارة الأذونات للتطبيق. وترد صورة عينة أدناه.
Sentry.io يمكننا أيضًا إرسال السجلات إلى Sentry.io. لاستخدام هذه الميزة، نحتاج إلى إضافة إدخال dsn إلى client/src/env.config.js . مقتطف الإعداد يشبه أدناه في ملف index.js
Sentry . init ( {
dsn : Config . dsn ,
integrations : [ new Integrations . BrowserTracing ( ) ] ,
tracesSampleRate : 1.0 ,
} ) ; server لعرض واجهة برمجة التطبيقات، افتح متصفحك وقم بزيارة http://localhost:5000/api-docs من الناحية المثالية، يجب أن نضيف جميع نقاط نهاية واجهة برمجة التطبيقات إلى التفاخر، ولكن لغرض العرض التوضيحي، أضفنا نقطة نهاية واجهة برمجة تطبيقات المنتجات فقط.
لاختبار واجهات برمجة التطبيقات، يمكننا إعادة استخدام مجموعة ساعي البريد. افتح docs/rbac-mern-boilerplate.postman_collection.json في Postman وسترى نقاط النهاية مع الحمولات المناسبة.
| مشروع | يأمر | مهمة |
|---|---|---|
| جذر | npm run build | يبني الحاويات |
| جذر | npm run start | ابدأ المشاريع وقاعدة البيانات في حاويات عامل الإرساء |
| جذر | docker exec -it appserver /bin/sh ثم npm run db:seed | ينفذ منتجات البذور داخل الحاوية |
| الخادم | npm i | تثبيت تبعيات جانب الخادم |
| الخادم | npm run db:up | ابدأ تشغيل قاعدة البيانات في حاوية عامل إرساء |
| الخادم | npm run test | تنفيذ الاختبارات باستخدام jest |
| عميل | npm i | تثبيت تبعيات جانب العميل |
| عميل | npm run start | ابدأ تطبيق رد الفعل |
| عميل | npm run build | أنشئ تطبيق التفاعل في وضع الإنتاج |
| عميل | npm run test | تنفيذ الاختبارات باستخدام Testing Library |
في هذا المستودع، قمنا بتضمين اختبار الوحدة واختبار التكامل. في الوقت الحالي، تغطية الكود منخفضة جدًا، ولكننا نعمل على جعلها أكثر من 90% في مكان ما في المستقبل.
localStorage و axios . لإجراء الاختبارات، يمكننا تشغيل الأمر npm run test .
Jest كمكتبة اختبار، وأضفنا حزم supertest و mongodb-memory-server لتسهيل اختبار التكامل.Jest لاختبار طبقات الخدمة والاستهزاء بالتبعيات الخارجية مثل MongoDB . لإجراء الاختبارات، يمكننا تشغيل الأمر npm run test .
هذا المشروع مرخص من معهد ماساتشوستس للتكنولوجيا.
في الوقت الحالي، لا أتقبل أي مساهمات من المجتمع فيما يتعلق بالرمز. ولكن إذا كان لديك أي اقتراحات أو وجدت أي أخطاء، فلا تتردد في فتح مشكلة أو طلب سحب.
من ناحية أخرى، إذا كنت تريد معرفة شيء ما، أو تريد بدء مناقشة حول هذا المشروع، فيرجى بدء مناقشة في لوحة مناقشة GitHub الخاصة بنا.
لقد قمت بتسجيل خطوات الترميز لهذا المشروع. يمكنك العثور على مقاطع الفيديو في قائمة التشغيل على YouTube. مقاطع الفيديو هذه متوفرة باللغة البنغالية فقط، ولكن يسعدني أن أقوم بجلسات خاصة مخصصة + مدفوعة الأجر باللغة الإنجليزية للجمهور المهتم عالميًا. لا تتردد في التواصل معي على [email protected] للحصول على أي نوع من المساعدة.
شكرًا. هتافات.
