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

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

Majd Muhtaseb17‏/06‏/202518 دقيقة

مقدمة

توضح هذه المقالة كيفية بناء تطبيق حديث ومتكامل من خلال الجمع بين نقاط القوة في React للواجهة الأمامية، و SvelteKit للتوجيه وأدوات البناء، و Laravel backend بدون خادم لنقاط نهاية API. يتيح هذا النهج واجهات أمامية عالية الأداء، وتجربة مطور سلسة، وبنية تحتية خلفية فعالة من حيث التكلفة.

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

أولاً، لنهيئ مشروع SvelteKit جديدًا:

npm create svelte@latest my-app
cd my-app
npm install

سيكون هذا واجهتنا الأمامية. الآن دعونا ننتقل إلى الواجهة الخلفية.

Laravel Backend (بدون خادم)

سنقوم بإنشاء نقطة نهاية API بسيطة في Laravel، تم تكوينها ليتم نشرها في بيئة بدون خادم (مثل AWS Lambda أو Vapor). للإيجاز، افترض أن لديك مشروع Laravel تم تكوينه للنشر بدون خادم.

إنشاء وحدة تحكم بسيطة:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ExampleController extends Controller
{
    public function index()
    {
        return response()->json(['message' => 'مرحبا من Laravel!']);
    }
}

حدد مسارًا في routes/api.php:

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ExampleController;

Route::get('/hello', [ExampleController::class, 'index']);

تذكر تكوين مشروع Laravel الخاص بك للنشر بدون خادم. توفر خدمات مثل Laravel Vapor أدوات ممتازة لذلك.

React Component في SvelteKit

الآن، دعنا ننشئ مكون React داخل مشروع SvelteKit الخاص بنا لجلب البيانات من Laravel API الخاص بنا.

قم أولاً بتثبيت React و ReactDOM كاعتمادات تطوير:

npm install react react-dom --save-dev

قم بإنشاء ملف src/lib/ReactComponent.jsx:

import React, { useState, useEffect } from 'react';

function ReactComponent() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('/api/hello'); // Proxy من خلال SvelteKit
        const data = await response.json();
        setMessage(data.message);
      } catch (error) {
        setMessage('خطأ في جلب البيانات.');
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      <p>رسالة من Laravel: {message}</p>
    </div>
  );
}

export default ReactComponent;

SvelteKit API Endpoint (Proxy)

قم بإنشاء نقطة نهاية API في SvelteKit لعمل وكيل للطلب إلى الواجهة الخلفية Laravel الخاصة بك. هذا يتجنب مشكلات CORS ويسمح لك بإدارة مفاتيح API بشكل آمن. قم بإنشاء src/routes/api/hello/+server.js:

import { json } from '@sveltejs/kit';

/** @type {import('./$types').RequestHandler} */
export async function GET() {
  const backendUrl = 'YOUR_LARAVEL_BACKEND_URL'; // استبدل بـ URL Laravel الخاص بك
  try {
    const response = await fetch(backendUrl + '/api/hello');
    const data = await response.json();
    return json(data);
  } catch (error) {
    return json({ message: 'خطأ في تمرير الطلب.' }, { status: 500 });
  }
}

هام: استبدل YOUR_LARAVEL_BACKEND_URL بـ URL الفعلي لـ Laravel API المنشور.

عرض مكون React في Svelte

أخيرًا، دعنا نعرض مكون React في صفحة Svelte. قم بتعديل src/routes/+page.svelte:

<script>
  import ReactComponent from '$lib/ReactComponent.jsx';
  import { onMount } from 'svelte';
  import { render } from 'react-dom/client';

  let container;

  onMount(() => {
    container = document.getElementById('react-container');
		const root = render(<ReactComponent/>, container);

  });
</script>

<h1>مرحبا بكم في SvelteKit</h1>

<div id="react-container" />

خاتمة

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