كيفية رفع مشروع react على vercel والإتصال بقاعدة بيانات MongoDB

عليك إنشاء قاعدة البيانات على MongoDB Atlas وبناء Cluster وتعيين اسم مستخدم وكلمة مرور ستحصل على رابط للإتصال، وعليك أن تضع ذلك في ملف .env في مشروع وكافة متغيرات البيئة اللازمة.

والآن أثناء نشر مشروعك على Vercel عليك تحديد متغيرات البيئة كما كتبتها في ملف .env أي كتابة مثلاً MONGODB_URL كالتالي:

أي وضع الاسم ثم القيمة الخاصة بذلك المتغير.

وبعد الإنتهاء من إضافة كافة المتغيرات عليك الضغط على deploy، وفي حال كان هناك مشروع منشور بالفعل، تستطيع الوصول لمتغيرات البيئة من خلال إعدادات المشروع settings ثم environment variables ثم إضافة المتغيرات وتأكد من تفعيل Automatically expose system environment variables.

لتوصيل مشروع React الخاص بك بقاعدة بيانات MongoDB على الإنترنت عند استضافته على Vercel، يجب اتباع الخطوات التالية:

تأكد من أن ملفات الاعدادات الخاصة بقاعدة البيانات مثل اسم المستخدم وكلمة المرور وعنوان الخادم صحيحة. يمكنك إنشاء ملف .env في مشروعك وتعيين القيم الخاصة بقاعدة البيانات بالتالي:

DB_USERNAME=اسم_المستخدم
DB_PASSWORD=كلمة_المرور
DB_HOST=عنوان_الخادم
DB_NAME=اسم_قاعدة_البيانات

قم بتثبيت مكتبة MongoDB للاتصال بقاعدة البيانات من خلال الأمر التالي في مجلد المشروع:

npm install mongodb

في ملف الكود الخاص باتصال قاعدة البيانات، قم بتعيين متغيرات البيئة من ملف .env. على سبيل المثال، يمكنك استخدام الكود التالي:

javascript

const MongoClient = require('mongodb').MongoClient;
require('dotenv').config();

const uri = `mongodb+srv://${process.env.DB_USERNAME}:${process.env.DB_PASSWORD}@${process.env.DB_HOST}/${process.env.DB_NAME}?retryWrites=true&w=majority`;

const client = new MongoClient(uri, { useNewUrlParser: true, useUnifiedTopology: true });

client.connect((err) => {
  if (err) {
    console.error('حدث خطأ أثناء الاتصال بقاعدة البيانات:', err);
  } else {
    console.log('تم الاتصال بقاعدة البيانات بنجاح');
    // استمر في تنفيذ العمليات المطلوبة على قاعدة البيانات هنا
  }
});

بعد اتصالك بقاعدة البيانات بنجاح، يمكنك القيام بالعمليات المطلوبة مثل الاستعلامات والإدخال والتحديث والحذف.

قم برفع مشروع React الخاص بك على Vercel باستخدام أداة Vercel CLI أو من خلال الواجهة الرسومية لـ Vercel.

بعد رفع المشروع على Vercel وتكوين اتصالك بقاعدة البيانات MongoDB، يجب أن يكون التطبيق قادرًا على الاتصال بقاعدة البيانات بنجاح عند الوصول إلى الموقع المستضاف على Vercel.

إن كان هناك شيء غير واضح او تحتاج الى تفاصيل أكثر , يرجى الاشارة إلي في التعليق .

استخدم هذه  متغيرات البيئه فى الباك اند PORT=4000
DB_URL=mongodb+srv://myemail: password@cluster0.iiprckc.mongodb.net/?retryWrites=true&w=majority
JWT_SECRET=super-secret-goes-here
JWT_EXPIRES_IN=7d

وفى رياكت 

JWT_SECRET=super-secret-goes-here
JWT_EXPIRES_IN=7d
REACT_APP_API_BASE_URL=http://localhost:4000/api

ما الخطا هنا