اذهب إلى المحتوى
  • 0

كيف اقوم برفع تطبيق react على GitHub

منتصر احمد

السؤال

Recommended Posts

  • 0

إن github ليس افضل استضافة مجانية لتطبيق react، وإن كنت تريد نصيحتي فإن اسهل استضافة لرفع ملفات الـ react عليها هي netlify.

بعد قول هذا فلرفع تطبيق react على GitHub يجب ان نتبع الخطوات التالية :

في الشرح التالي افترض انك قمت برفع ملفات المشروع سابقاً على GitHub ولكنك تريد تشغيل المشروع في صفحة خاصة به على GitHub pages

1 - قم بإنشاء مستودع جديد على GitHub وستحصل على الاعدادات التالية :

1.png.809eb271221300091a1a511284a8fc3d.png

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

2 - نقوم بتنزيل الحزمة الخاصة ب GitHub في المشروع الخاص بنا كالتالي :

npm install gh-pages --save-dev

3 - نقوم بإضافة الخاصية homepage إلى ملف الـ package.json :

"homepage" : "http://{github-username}.github.io/{repo-name}",

حيث نستبدل الـ {github-username} باسم المستخدم الخاص بك على GitHub و الـ {repo-name} باسم المستودع الخاص بك.

4 - نضيف الوظيفتين التاليتين إلى ملف الـ package.json كذلك :

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

حيث ان الاولى خاصة بإعداد ملفات المشروع للرفع والثانية خاصة بالرفع على GitHub.

5 - والآن قم بأعداد التطبيق ورفعه كالتالي :

npm run deploy

حيث ان الوظيفة التالي ستقوم بتنفيذ كل من predeploy و deploy  حيث تقوم بأعداد ملفات المشروع بالشكل المناسف في ملف build ثم تقوم برفعها على punch جديد اسمه gh-pages.

6 - اعداد GitHub Pages :

23.thumb.png.24e743bc5282de5e24285bf794a70df5.png

بعد ان تقوم بكل ذلك يمكنك الوصول إلى التطبيق الخاص بك من خلال الذهاب إلى الـرابط homepage الذي عرفته سابقاً

التوثيق الرسمي من GitHub

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 38 دقائق مضت قال عمر قره محمد:

إن github ليس افضل استضافة مجانية لتطبيق react، وإن كنت تريد نصيحتي فإن اسهل استضافة لرفع ملفات الـ react عليها هي netlify.

بعد قول هذا فلرفع تطبيق react على GitHub يجب ان نتبع الخطوات التالية :

في الشرح التالي افترض انك قمت برفع ملفات المشروع سابقاً على GitHub ولكنك تريد تشغيل المشروع في صفحة خاصة به على GitHub pages

1 - قم بإنشاء مستودع جديد على GitHub وستحصل على الاعدادات التالية :

1.png.809eb271221300091a1a511284a8fc3d.png

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

2 - نقوم بتنزيل الحزمة الخاصة ب GitHub في المشروع الخاص بنا كالتالي :


npm install gh-pages --save-dev

3 - نقوم بإضافة الخاصية homepage إلى ملف الـ package.json :


"homepage" : "http://{github-username}.github.io/{repo-name}",

حيث نستبدل الـ {github-username} باسم المستخدم الخاص بك على GitHub و الـ {repo-name} باسم المستودع الخاص بك.

4 - نضيف الوظيفتين التاليتين إلى ملف الـ package.json كذلك :


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

حيث ان الاولى خاصة بإعداد ملفات المشروع للرفع والثانية خاصة بالرفع على GitHub.

5 - والآن قم بأعداد التطبيق ورفعه كالتالي :


npm run deploy

حيث ان الوظيفة التالي ستقوم بتنفيذ كل من predeploy و deploy  حيث تقوم بأعداد ملفات المشروع بالشكل المناسف في ملف build ثم تقوم برفعها على punch جديد اسمه gh-pages.

6 - اعداد GitHub Pages :

23.thumb.png.24e743bc5282de5e24285bf794a70df5.png

بعد ان تقوم بكل ذلك يمكنك الوصول إلى التطبيق الخاص بك من خلال الذهاب إلى الـرابط homepage الذي عرفته سابقاً

التوثيق الرسمي من GitHub

https://mohamed-montaser1.github.io/country_react_app_with_api/

عملت كل ماقلته بس مش بيطلع غير ال HEADER

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

ازاي ارفع موقع معمول ب react علي github و يبقي ليه رابط ؟

 

COUNTY CHALLENGE.zip

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...