العودة للمقالات

بناء تطبيق متكامل باستخدام React و SvelteKit وخادم Laravel خلفي بلا خادم

Majd Muhtaseb02‏/07‏/202515 دقيقة

مقدمة

ستوجهك هذه المقالة خلال بناء تطبيق متكامل أساسي يستفيد من نقاط قوة React و SvelteKit و Laravel في بيئة لا خادمية. سنركز على نقاط التكامل الرئيسية ونوضح كيف يمكن لهذه التقنيات أن تعمل معًا بتناغم.

تجهيز المشروع

سنفترض أن لديك Node.js و npm (أو yarn/pnpm) و Laravel CLI مثبتة.

1. إنشاء مشروع Laravel (بلا خادم)

أولاً، قم بإنشاء مشروع Laravel جديد. سنستخدم محولًا لا خادميًا لاحقًا (مثل Bref). للتبسيط، يركز هذا المثال على واجهة برمجة التطبيقات الأساسية.

laravel new laravel-api
cd laravel-api

2. إنشاء مشروع SvelteKit (الواجهة الأمامية)

بعد ذلك، قم بإنشاء مشروع SvelteKit:

npm create svelte@latest sveltekit-app
cd sveltekit-app

اختر "Skeleton project" و Typescript كلغة مثال.

3. مكون React (الواجهة الأمامية)

داخل مشروع SvelteKit الخاص بك، لنقم بإنشاء مكون React بسيط (باستخدام Typescript) لعرض البيانات التي تم جلبها من خادم Laravel الخلفي. قد ترغب في إنشاء /src/lib/components/MyReactComponent.tsx:

// src/lib/components/MyReactComponent.tsx
import React, { useState, useEffect } from 'react';

interface DataItem {
  id: number;
  name: string;
}

const MyReactComponent: React.FC = () => {
  const [data, setData] = useState<DataItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('http://localhost:8000/api/data'); // استبدل بـ URL واجهة برمجة تطبيقات Laravel الخاصة بك
        if (!response.ok) {
          throw new Error(`خطأ HTTP! الحالة: ${response.status}`);
        }
        const jsonData: DataItem[] = await response.json();
        setData(jsonData);
      } catch (e: any) {
        setError(e.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) {
    return <p>جارٍ التحميل...</p>;
  }

  if (error) {
    return <p>خطأ: {error}</p>;
  }

  return (
    <ul>
      {data.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

export default MyReactComponent;

4. نقطة نهاية API في Laravel

في مشروع Laravel الخاص بك، قم بإنشاء نقطة نهاية API بسيطة لإرجاع بعض البيانات.

// routes/api.php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

Route::get('/data', function (Request $request) {
    return [
        ['id' => 1, 'name' => 'العنصر 1'],
        ['id' => 2, 'name' => 'العنصر 2'],
        ['id' => 3, 'name' => 'العنصر 3'],
    ];
});

لا تنسَ تشغيل خادم Laravel (على سبيل المثال، php artisan serve).

5. دمج React في SvelteKit

لاستخدام مكون React داخل SvelteKit، سنستخدم svelte-adapter-vite. أولاً ، قم بتثبيت @ sveltejs / vite-plugin-svelte في مشروع sveltekit الخاص بك. ثم يمكننا استخدام هذا الرمز في +page.svelte

<script lang="ts">
  import MyReactComponent from '$lib/components/MyReactComponent.tsx';
  import { onMount } from 'svelte';
  import React from 'react';
  import ReactDOM from 'react-dom/client';

  let container: HTMLElement;

  onMount(() => {
    container = document.getElementById('react-container')!;
    const root = ReactDOM.createRoot(container);
    root.render(React.createElement(MyReactComponent));
  });

  onDestroy(() => {
    if(container) {
      ReactDOM.unmountComponentAtNode(container);
    }
  });
  import { onDestroy } from 'svelte';
</script>

<div id="react-container" />

6. تثبيت React و ReactDOM

npm install react react-dom @types/react @types/react-dom

قد تحتاج إلى تكوين ملف svelte.config.js الخاص بك للتعامل مع ملفات .tsx بشكل صحيح. هذا مخطط تقريبي.

7. تشغيل تطبيق SvelteKit

ابدأ خادم تطوير SvelteKit الخاص بك:

npm run dev

يجب أن ترى الآن البيانات من واجهة برمجة تطبيقات Laravel الخاصة بك معروضة داخل مكون React، ويتم عرضها داخل تطبيق SvelteKit الخاص بك.

نشر بلا خادم (باختصار)

لنشر خادم Laravel الخلفي بلا خادم، ضع في اعتبارك استخدام Bref. تتوفر التعليمات في وثائق Bref. لاستخدام Sveltekit، استخدم محولًا ثابتًا.

خاتمة

يوضح هذا المثال تكاملًا أساسيًا بين React و SvelteKit وخادم Laravel خلفي. يمكنك توسيع هذا الأساس عن طريق إضافة المزيد من الميزات المعقدة والمصادقة وتفاعلات قاعدة البيانات. تذكر تهيئة CORS بشكل مناسب لنقاط نهاية API الخاصة بك. ترميز سعيد!