مكتبة الشروحات

مآل تطبيقات React هو إلى ملفات ستاتيكية (HTML/JS/CSS) وصور images إذا ما تم بناء التطبيق فهي تستضاف كأية ملفات HTML، وتقرأها المتصفحات بشكل طبيعي.

1. إنشاء البناء لمشروع React الخاص بك

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

npm run build

2. تحميل وفك ضغط البناء على cPanel

إذا تم إنشاء البناء على جهازك، قم بضغط مجلد build إلى ملف ZIP. بعد ذلك، قم بتسجيل الدخول إلى cPanel وانتقل إلى مدير الملفات. وانتقل إلى مسار مجلد الويب (public_html أو مجلد مجال فرعي)، قم بتحميل ملف ZIP ثم فك ضغطه. هذا سيستخرج جميع محتويات البناء.

3. ضمان إعادة توجيه الروابط

لكي تعمل الروابط URLs بشكل صحيح مع React Router، أضف ملف .htaccess إلى مجلد الويب الخاص بمشروعك للتعامل مع إعادة كتابة العناوين Rewriting:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

ستضمن هذه التعليمات أن جميع عناوين URL، باستثناء تلك التي تشير إلى ملفات أو أدلة موجودة، تعيد توجيه الروابط الافتراضية إلى ملف index.html الخاص بك.

4. ربط الواجهة الأمامية بالخلفية

في حالة كنتم تودون ربط الواجهة بتطبيق خلفية مطور عبر Node.js أو Python، قوموا بإنشاء مجال فرعي مخصص لتطبيق الخلفية. على سبيل المثال، يمكن أن يكون مجالك الرئيسي example.tld وليكم مثلا المجال الفرعي للخلفية backend.example.tld أو عنوانا آخر من اختياركم. سيساعد ذلك على فصل الواجهة الأمامية عن الخلفية منطقياً وتسهيل إدارة كلاهما.