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

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

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

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

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

قم بتطبيقها كلها في حال لم تقم بربط المشروع الخاص بك بمستودع على 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 :

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

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

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

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

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

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

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

قم بتطبيقها كلها في حال لم تقم بربط المشروع الخاص بك بمستودع على 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 :

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

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

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

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

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

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

COUNTY CHALLENGE.zip