رفع موقع React.JS على مجلد فرعي
خلاصة يوم كامل من البحث والتجريب
ان كنت تعتقد أن اكتشاف المشاكل وحلها في React هو أمر سهل فربما لم تحاول رفع موقعك على استضافة داخل مجلد فرعي: public_html > sub
الخطوات
1- في البداية ستحتاج الى اضافة “homepage“ داخل ملف package.json على أن تحوي رابط موقعك واسم المجلد الفرعي الذي قمت بانشائه على الاستضافة كما في الصورة.
2- الخطوة التالية ستكون في ملف App.js وذلك بإضافة basename باسم مجلدك الفرعي الى RouterProvider الذي يضم جميع الـ Routes (على افتراض انك تستخدم react-router > 6).
3- الخطوة التي تليها هي تعديل الـ path الخاص بجميع الـ Route بحيث يتم اضافة URL الموقع كامل مع العنوان الفرعي الى الـ path, ولتحقيق ذلك dynamically استخدم process.env.PUBLIC_URL والتي ستجلب الـ URL بشكل تلقائي من homepage التي تم اضافتها في ملف package.json.
4- خطوة أخرى مزعجة لكنها ضرورية وهي تعديل جميع روابط الـ Link و navigate في جميع ملفات المشروع, وذلك بإضافة process.env.PUBLIC_URL الى الـ path الخاص بكل رابط.
5- الخطوة الأخيرة هي انشاء ملف .htaccess داخل المجلد الفرعي على الاستضافة مع اضافة الكود التالي داخله (استبدل جميع sub باسم المجلد الفرعي).
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /sub/
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /sub/index.html [L]
</IfModule>