دليل: دمج Quasar مع Laravel

1. إعداد Laravel و Quasar

1. تثبيت Laravel:
   • إنشاء مشروع Laravel جديد (إذا لم يكن موجودًا بالفعل):
     bash

     نسخ الكود

     composer create-project --prefer-dist laravel/laravel my-laravel-app

   • الانتقال إلى دليل مشروع Laravel:
     bash

     نسخ الكود

     cd my-laravel-app

2. تثبيت Quasar داخل Laravel:
   • الانتقال إلى مجلد resources:
     bash

     نسخ الكود

     cd resources

   • إنشاء مشروع Quasar جديد:
     bash

     نسخ الكود

     quasar create quasar

   • عند المطالبة، قم بتكوين مشروع Quasar وفقًا لمتطلباتك.
3. الانتقال إلى دليل Quasar:
   bash

   نسخ الكود

   cd quasar


2. تكوين مخرجات بناء Quasar

قم بتحديث ملف quasar.config.js في دليل Quasar لتوجيه المخرجات مباشرة إلى مجلد public الخاص بـ Laravel:

3. بناء Quasar

1. الانتقال إلى دليل Quasar:
   bash

   نسخ الكود

   cd resources/quasar

2. تشغيل أمر بناء Quasar:
   bash

   نسخ الكود

   quasar build

3. التحقق من أن مخرجات البناء تم وضعها مباشرة في مجلد public الخاص بـ Laravel:
   swift

   نسخ الكود

   public/
├── index.html
├── css/
│ └── app.css
├── js/
│ └── app.js
├── assets/
│ ├── some-asset.png
│ └── other-asset.svg


4. تكوين مسارات Laravel

1. افتح ملف routes/web.php وأضف المسار التالي لتقديم تطبيق Quasar على عنوان الجذر:
   php

   نسخ الكود

   Route::get('/{any}', function () {
return view('app'); // قالب Blade لتطبيق Quasar
})->where('any', '.*');

2. تأكد من أن مسارات API (مثل /api) لا يتم اعتراضها بواسطة مسار Quasar:
   • يقوم Laravel بالفعل بإضافة بادئة /api لمسارات API. إذا لزم الأمر، تحقق من ذلك في RouteServiceProvider.php:
     php

     نسخ الكود

     protected function mapApiRoutes()
{
Route::prefix('api')
->middleware('api')
->namespace($this->namespace)
->group(base_path('routes/api.php'));
}


5. إنشاء قالب Blade لتطبيق Quasar

1. أنشئ ملف Blade جديد باسم resources/views/app.blade.php:
   blade

   نسخ الكود

   @php
// تضمين ملف index.html الخاص بـ Quasar مباشرة من مجلد public
@include_once public_path('index.html');
@endphp

2. سيضمن ذلك أن يقوم Laravel بتضمين ملف index.html الذي تم إنشاؤه بواسطة Quasar لتقديم تطبيق SPA.

6. سير العمل أثناء التطوير

التطوير مع التحديث المباشر:

1. تشغيل خادم Laravel:
   bash

   نسخ الكود

   php artisan serve

2. تشغيل خادم التطوير الخاص بـ Quasar:
   bash

   نسخ الكود

   cd resources/quasar
quasar dev

3. الوصول إلى خادم التطوير الخاص بـ Quasar على:
   arduino

   نسخ الكود

   http://localhost:8080

4. لضمان توجيه طلبات API إلى Laravel، قم بتحديث devServer في quasar.config.js:
   javascript

   نسخ الكود

   devServer: {
proxy: {
'/api': {
target: 'http://localhost:8000', // الخلفية الخاصة بـ Laravel
changeOrigin: true,
secure: false,
},
},
}


7. الاختبار وتصحيح الأخطاء

اختبار بناء الإنتاج:

1. بناء تطبيق Quasar:
   bash

   نسخ الكود

   cd resources/quasar
quasar build

2. تشغيل Laravel والوصول إلى عنوان الجذر:
   bash

   نسخ الكود

   php artisan serve

3. افتح متصفحك وانتقل إلى http://localhost:8000/. يجب أن يتم تحميل تطبيق Quasar كصفحة رئيسية.

المشكلات الشائعة والحلول:

1. عدم العثور على الملفات الثابتة:
   • تأكد من وجود ملفات Quasar في مجلد public بعد البناء.
   • تحقق من وجود index.html، css/app.css، وjs/app.js.
2. فشل طلبات API:
   • تأكد من أن مسارات API تحتوي على البادئة /api ولا يتم اعتراضها بواسطة مسار Quasar.
   • تحقق من تكوين devServer.proxy الخاص بـ Quasar للتطوير المحلي.
3. مشكلات ذاكرة التخزين المؤقت للمتصفح: