رفع مشروع react js

يمكنك رفع المشروع على github pages باتباع الخطوات التالية:

1. في البداية يجب أن نقوم بإنشاء repo محلية للمشروع عن طريق استعمال التعليمة git init في مجلد المشروع، بعدها علينا تنفيذ ما يلي لحفظ التغييرات و إرسالها إلى github:

   git commit -m "first commit"
   git branch -M main
   git remote add origin رابط المشروع على غيت هاب
   git push -u origin main

2. بعدها نقوم بتنزيل الحزمة الخاصة ب github pages كما يلي:

   npm install gh-pages --save-dev

3. بعدها علينا إضافة ما يلي إلى قسم scripts ضمن package.json:

   "predeploy" : "npm run build",
   "deploy" : "gh-pages -d build",

4. ثم نقوم بحفظ التغييرات و إرسالها إلى السيرفر كما يلي:

   git add .
   git commit -m "setup gh-pages"
   git push

5. و في النهاية نقوم بتنفيذ ما يلي:

   npm run deploy

يمكنك معرفة كيفية رفع مشروع React علي أستضافة Netlify من خلال هذه الإجابة فهي تشرح كيفية الرفع بكل بساطة.

و إذا أردت أن تتعمق أكثر يمكنك تصفح توثيق استضافة Netlify من هنا والذي يتكلم عن كيفية رفع مشروع React.

ويفضل أن تقراء هذه المقالة فهي تشرح مرحلة نشر التطبيق في عملية تطوير الويب بالتفصيل والتي تتصمن رفع المشاريع علي استضافة Netlify.

بتاريخ منذ ساعة مضت قال Mohammed Fahmy3:

يمكنك معرفة كيفية رفع مشروع React علي أستضافة Netlify من خلال هذه الإجابة فهي تشرح كيفية الرفع بكل بساطة.

و إذا أردت أن تتعمق أكثر يمكنك تصفح توثيق استضافة Netlify من هنا والذي يتكلم عن كيفية رفع مشروع React.

ويفضل أن تقراء هذه المقالة فهي تشرح مرحلة نشر التطبيق في عملية تطوير الويب بالتفصيل والتي تتصمن رفع المشاريع علي استضافة Netlify.

 

بعد رفع المشروع ظهرت هذه الصورة علما و أني عند إستعمال vs code كنت أفعل الأمر npm run json-server حتى أتجاوز هذا الخلل

بتاريخ الآن قال محمود سعداوي:

بعد رفع المشروع ظهرت هذه الصورة علما و أني عند إستعمال vs code كنت أفعل الأمر npm run json-server حتى أتجاوز هذا الخلل

 

ما أقصده هو أنه لم يقع التعرف على البيانات التي قمت بجلبها من db.json.

سبب المشكلة هي أن الكود لا يستطيع الوصول إلى قاعدة البيانات JSON server ولحل هذه المشكلة قم بعمل import لقاعدة البيانات في تطبيق React وقم بالتعديل على الكود لكي يستخدم البيانات من الimport بدل من عمل طلبات requests لسيرفر json server

حل آخر هو عمل api حقيقي وتقوم برفعه على إستضافة وتستعمله بدلا من json server

في كل الطريقتين يجب أن يصل كود React إلى البيانات التي يقوم بعرضها وإلا سيظهر خطأ بعدم إمكانيته للوصول للبيانات.

بتاريخ 45 دقائق مضت قال Mohammed Fahmy3:

حل آخر هو عمل api حقيقي وتقوم برفعه على إستضافة وتستعمله بدلا من json server

هذا ما قمت به في الواقع، حيث قمت بجلب البيانات بواسطة fetch

يمكنك رفع مشروع React الخاص بك إلى Netlify باتباع الخطوات التالية:

1. تأكد من تنفيذ json server بنجاح و يتم استخدامه في المشروع.
2. تحتاج إلى إنشاء ملف build من مشروع React الخاص بك. يمكنك القيام بذلك عن طريق تنفيذ الأمر "npm run build" في مشروعك. سينشئ هذا الأمر مجلدًا جديدًا يسمى "build" و يحتوي على جميع ملفات التطبيق النهائية.
3. افتح حسابًا جديدًا في Netlify. يمكنك القيام بذلك عن طريق زيارة موقع Netlify و اختيار تسجيل الدخول ثم التسجيل للحصول على حساب جديد.
4. بعد تسجيل الدخول، يجب عليك النقر على الزر "New site from Git" لإنشاء موقع جديد أو يمكنك رفع مجلد المشروع build مباشرًة بدون رفعه على GitHub ولكن ذلك أفضل.
5. اختر موفر الخدمة الذي تستخدمه لإدارة مشروع React الخاص بك. ستظهر لك قائمة بالموفرين المدعومين. اختر الموفر الذي تريد استخدامه.
6. تأكد من السماح لـ Netlify بالوصول إلى حسابك على موفر الخدمة. على سبيل المثال، إذا كنت تستخدم GitHub، فستحتاج إلى السماح لـ Netlify بالوصول إلى حساب GitHub الخاص بك.
7. حدد مستودعك (repository) في القائمة المنسدلة.
8. قم بتكوين إعدادات المشروع. يمكنك تحديد الفرع الذي تريد نشره وكذلك ملف البناء الذي أنشأته من خلال الأمر "npm run build" و هو ملف "build" في حالة استخدام create-react-app.
9. بعد ذلك، يمكنك النقر على الزر "Deploy site" لنشر مشروع React الخاص بك على Netlify.
10. بعد الانتهاء من النشر، سيتم توفير رابط URL لمشروعك على Netlify. يمكنك النقر عليه لعرض التطبيق الخاص بك..

كما يمكنك تخصيص اسم النطاق الخاص بتطبيقك على Netlify إذا كنت ترغب في ذلك.

Continues Integration

يمكنك أيضًا إدارة تطبيقك على Netlify باستخدام لوحة التحكم الخاصة بهم، حيث يمكنك عرض معلومات الاستخدام وإدارة تكوينات المشروع والتحكم في الإعدادات الأمنية. بالإضافة إلى ذلك، يمكنك تحديث التطبيق الخاص بك على Netlify عن طريق تحديث النسخة المرفوعة من التطبيق على GitHub.

ولتحديث التطبيق الخاص بك على Netlify، يمكنك تحديث النسخة المرفوعة من التطبيق على GitHub. وفي حالة كان تطبيقك مرتبطًا بخدمة Continues Integration مثل Travis CI أو CircleCI، سيتم تنفيذ سلسلة من الأوامر الآلية لتحديث التطبيق بعد تحديث النسخة المرفوعة على GitHub.

إذا كنت تستخدم Git كأداة لإدارة مشروعك، يمكنك استخدام أمر "git push" لتحديث النسخة المرفوعة على GitHub، ثم يتم تنفيذ عملية النشر الآلية على Netlify.

بعد تحديث النسخة المرفوعة على GitHub، يمكنك الذهاب إلى لوحة التحكم الخاصة بتطبيقك على Netlify وتفحص عملية النشر للتأكد من نجاحها. وفي حالة وجود أي مشاكل، يمكنك العودة إلى النسخة السابقة من التطبيق المرفوع على GitHub.

بتاريخ 7 ساعة قال Mustafa Suleiman:

يمكنك رفع مشروع React الخاص بك إلى Netlify باتباع الخطوات التالية:

1. تأكد من تنفيذ json server بنجاح و يتم استخدامه في المشروع.
2. تحتاج إلى إنشاء ملف build من مشروع React الخاص بك. يمكنك القيام بذلك عن طريق تنفيذ الأمر "npm run build" في مشروعك. سينشئ هذا الأمر مجلدًا جديدًا يسمى "build" و يحتوي على جميع ملفات التطبيق النهائية.
3. افتح حسابًا جديدًا في Netlify. يمكنك القيام بذلك عن طريق زيارة موقع Netlify و اختيار تسجيل الدخول ثم التسجيل للحصول على حساب جديد.
4. بعد تسجيل الدخول، يجب عليك النقر على الزر "New site from Git" لإنشاء موقع جديد أو يمكنك رفع مجلد المشروع build مباشرًة بدون رفعه على GitHub ولكن ذلك أفضل.
5. اختر موفر الخدمة الذي تستخدمه لإدارة مشروع React الخاص بك. ستظهر لك قائمة بالموفرين المدعومين. اختر الموفر الذي تريد استخدامه.
6. تأكد من السماح لـ Netlify بالوصول إلى حسابك على موفر الخدمة. على سبيل المثال، إذا كنت تستخدم GitHub، فستحتاج إلى السماح لـ Netlify بالوصول إلى حساب GitHub الخاص بك.
7. حدد مستودعك (repository) في القائمة المنسدلة.
8. قم بتكوين إعدادات المشروع. يمكنك تحديد الفرع الذي تريد نشره وكذلك ملف البناء الذي أنشأته من خلال الأمر "npm run build" و هو ملف "build" في حالة استخدام create-react-app.
9. بعد ذلك، يمكنك النقر على الزر "Deploy site" لنشر مشروع React الخاص بك على Netlify.
10. بعد الانتهاء من النشر، سيتم توفير رابط URL لمشروعك على Netlify. يمكنك النقر عليه لعرض التطبيق الخاص بك..

كما يمكنك تخصيص اسم النطاق الخاص بتطبيقك على Netlify إذا كنت ترغب في ذلك.

Continues Integration

يمكنك أيضًا إدارة تطبيقك على Netlify باستخدام لوحة التحكم الخاصة بهم، حيث يمكنك عرض معلومات الاستخدام وإدارة تكوينات المشروع والتحكم في الإعدادات الأمنية. بالإضافة إلى ذلك، يمكنك تحديث التطبيق الخاص بك على Netlify عن طريق تحديث النسخة المرفوعة من التطبيق على GitHub.

ولتحديث التطبيق الخاص بك على Netlify، يمكنك تحديث النسخة المرفوعة من التطبيق على GitHub. وفي حالة كان تطبيقك مرتبطًا بخدمة Continues Integration مثل Travis CI أو CircleCI، سيتم تنفيذ سلسلة من الأوامر الآلية لتحديث التطبيق بعد تحديث النسخة المرفوعة على GitHub.

إذا كنت تستخدم Git كأداة لإدارة مشروعك، يمكنك استخدام أمر "git push" لتحديث النسخة المرفوعة على GitHub، ثم يتم تنفيذ عملية النشر الآلية على Netlify.

بعد تحديث النسخة المرفوعة على GitHub، يمكنك الذهاب إلى لوحة التحكم الخاصة بتطبيقك على Netlify وتفحص عملية النشر للتأكد من نجاحها. وفي حالة وجود أي مشاكل، يمكنك العودة إلى النسخة السابقة من التطبيق المرفوع على GitHub.

جربت كل هذه الأوار و لكن نفس المشكل