Back to articles

Build a Full-Stack App with React, SvelteKit, and a Laravel API

Majd Muhtaseb11/21/202510 minutes

Introduction

This article demonstrates how to create a basic full-stack application using React for the UI, SvelteKit for handling routing and server-side rendering, and Laravel for building a backend API. This stack offers a modern and performant solution for web development.

Setting up the Laravel API

First, create a new Laravel project:

laravel new my-laravel-api
cd my-laravel-api

Next, create a simple resource controller and model:

php artisan make:model Item -mcr

Update the migration file (database/migrations/*_create_items_table.php) with the desired schema. For example:

public function up()
{
    Schema::create('items', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->text('description')->nullable();
        $table->timestamps();
    });
}

Run the migrations:

php artisan migrate

Update the ItemController.php with basic CRUD operations:

<?php

namespace App\Http\Controllers;

use App\Models\Item;
use Illuminate\Http\Request;

class ItemController extends Controller
{
    public function index()
    {
        return Item::all();
    }

    public function store(Request $request)
    {
        return Item::create($request->all());
    }

    public function show(Item $item)
    {
        return $item;
    }

    public function update(Request $request, Item $item)
    {
        $item->update($request->all());
        return $item;
    }

    public function destroy(Item $item)
    {
        $item->delete();
        return response()->json(['message' => 'Item deleted']);
    }
}

Define the API routes in routes/api.php:

<?php

use App\Http\Controllers\ItemController;
use Illuminate\Support\Facades\Route;

Route::resource('items', ItemController::class);

Setting up the SvelteKit Frontend

Create a new SvelteKit project:

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

Install axios for making API requests:

npm install axios

Create a +page.svelte file in the src/routes directory to fetch and display the items from the Laravel API:

<script>
    import axios from 'axios';

    let items = [];

    async function getItems() {
        const response = await axios.get('http://localhost:8000/api/items'); // Adjust URL if needed
        items = response.data;
    }

    getItems();
</script>

<h1>Items</h1>

{#each items as item}
    <div>
        <h2>{item.name}</h2>
        <p>{item.description}</p>
    </div>
{/each}

Integrating React Components

Inside your +page.svelte or any other Svelte component, you can embed React components using svelte-add. First, add the svelte-add integration:

npm install -D svelte-add
npx svelte-add@latest react

Then, create a simple React component (e.g., src/lib/MyReactComponent.jsx):

// src/lib/MyReactComponent.jsx
import React from 'react';

function MyReactComponent() {
  return (
    <div>
      <p>This is a React component embedded in SvelteKit!</p>
    </div>
  );
}

export default MyReactComponent;

Now, import and use the React component in your Svelte component:

// src/routes/+page.svelte
<script>
  import MyReactComponent from '$lib/MyReactComponent.jsx';
  import { onMount } from 'svelte';

  let reactComponent;

  onMount(() => {
    reactComponent = MyReactComponent;
  });
</script>

{#if reactComponent}
  <svelte:component this={reactComponent} />
{/if}

Conclusion

This article provided a basic outline for building a full-stack application using React, SvelteKit, and Laravel. You can expand upon this foundation to create more complex and feature-rich applications. Remember to handle CORS configurations in your Laravel API for cross-origin requests.