بناء تطبيق متكامل باستخدام React و SvelteKit وخادم Laravel خلفي بلا خادم
مقدمة
ستوجهك هذه المقالة خلال بناء تطبيق متكامل أساسي يستفيد من نقاط قوة 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 الخاصة بك. ترميز سعيد!