Back to articles

Build a Fullstack App with React, SvelteKit, and a Serverless Laravel Backend

Majd Muhtaseb07/02/202512 minutes

Introduction

This article guides you through building a basic fullstack application leveraging the strengths of React, SvelteKit, and Laravel in a serverless environment. We'll focus on the key integration points and demonstrate how these technologies can work together harmoniously.

Project Setup

We'll assume you have Node.js, npm (or yarn/pnpm), and the Laravel CLI installed.

1. Create a Laravel Project (Serverless)

First, create a new Laravel project. We'll use a serverless adapter later (e.g., Bref). For simplicity, this example focuses on the core API.

laravel new laravel-api
cd laravel-api

2. Create a SvelteKit Project (Frontend)

Next, create a SvelteKit project:

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

Choose "Skeleton project" and Typescript as the example language.

3. React Component (Frontend)

Within your SvelteKit project, let's create a simple React component (using Typescript) to display data fetched from the Laravel backend. You might want to create /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'); // Replace with your Laravel API URL
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const jsonData: DataItem[] = await response.json();
        setData(jsonData);
      } catch (e: any) {
        setError(e.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error}</p>;
  }

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

export default MyReactComponent;

4. Laravel API Endpoint

In your Laravel project, create a simple API endpoint to return some data.

// routes/api.php

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

Route::get('/data', function (Request $request) {
    return [
        ['id' => 1, 'name' => 'Item 1'],
        ['id' => 2, 'name' => 'Item 2'],
        ['id' => 3, 'name' => 'Item 3'],
    ];
});

Don't forget to start the Laravel server (e.g., php artisan serve).

5. Integrate React into SvelteKit

To use the React component within SvelteKit, we'll use svelte-adapter-vite. First install @sveltejs/vite-plugin-svelte in your sveltekit project. Then we can use this code in +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. Install React and ReactDOM

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

You might need to configure your svelte.config.js file to properly handle .tsx files. This is a rough outline.

7. Run the SvelteKit App

Start your SvelteKit development server:

npm run dev

You should now see the data from your Laravel API displayed within the React component, rendered within your SvelteKit application.

Serverless Deployment (Briefly)

For serverless deployment of the Laravel backend, consider using Bref. Instructions are available on the Bref documentation. For Sveltekit use a static adapter.

Conclusion

This example demonstrates a fundamental integration of React, SvelteKit, and a Laravel backend. You can expand upon this foundation by adding more complex features, authentication, and database interactions. Remember to configure CORS appropriately for your API endpoints. Happy coding!