How to Set Up Laravel Jetstream with Svelte

The process to set up Laravel Jetstream with Svelte involves several key steps that integrate backend Laravel features with Svelte-based frontend development. Jetstream is a Laravel starter kit that provides scaffolding for user authentication, team management, and more, and while it officially supports Livewire and Inertia (with Vue.js), it can be configured to work with Svelte as the frontend framework, especially using Inertia.js as a bridge.

Here is a detailed step-by-step guide to set up Jetstream with Svelte:

1. Initial Laravel Project Setup

Start by creating a new Laravel project if you don't have one already:

bash
composer create-project laravel/laravel my-jetstream-app
cd my-jetstream-app

This sets up the base Laravel framework with all required dependencies.

2. Install Laravel Jetstream Package

Install Jetstream via Composer with the following command:

bash
composer require laravel/jetstream

After installation, you can run Jetstream's install artisan command.

3. Install Jetstream with Inertia Stack

To use Jetstream with Svelte, you want to choose the Inertia stack because it enables SPA (Single Page Application) style frontend integration, which works well with any modern frontend framework, including Svelte.

Run in your terminal:

bash
php artisan jetstream:install inertia

This will scaffold the necessary Inertia setup and includes Vue.js by default. However, the Vue.js parts need to be replaced or removed to use Svelte instead.

Add team support if needed by including `--teams` option:

bash
php artisan jetstream:install inertia --teams

4. Remove Vue and Install Svelte

Jetstream by default installs Vue.js because it's the recommended frontend framework for Inertia. You need to remove Vue-specific dependencies first.

- Delete Vue-related files typically located under `resources/js/Pages` and `resources/js/Layouts`.
- Remove Vue from your `package.json` dependencies.
- Install Svelte dependencies: Svelte and Svelte adapter for Inertia.

bash
npm uninstall vue
npm install svelte @inertiajs/inertia @inertiajs/inertia-svelte

5. Configure Vite for Svelte

Laravel Jetstream with Inertia uses Vite as the frontend build tool. Modify or create `vite.config.js` to include Svelte support:

js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import svelte from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.js'],
            refresh: true,
        }),
        svelte(),
    ],
});

This includes the Vite Svelte plugin, enabling Svelte files compilation.

6. Replace Vue with Svelte Components

Create or move your Inertia pages to Svelte components in `resources/js/Pages`.

For example, create a simple Svelte component for the welcome page (`Welcome.svelte`):

svelte

  export let user;


Welcome, {user.name}

Modify `resources/js/app.js` to initialize Inertia with Svelte renderer:

js
import { createInertiaApp } from '@inertiajs/inertia-svelte';
import { InertiaProgress } from '@inertiajs/progress';

createInertiaApp({
    resolve: name => import(`./Pages/${name}.svelte`),
    setup({ el, App, props }) {
        new App({ target: el, props });
    },
});

InertiaProgress.init();

7. Tailwind and CSS

Jetstream uses Tailwind CSS by default. Ensure Tailwind CSS is correctly configured and integrated for your Svelte components.

The default Tailwind config under `tailwind.config.js` should remain unchanged. Include Tailwind directives in your main CSS file:

css
@tailwind base;
@tailwind components;
@tailwind utilities;

8. Migrate Database and Install Node Modules

Run Laravel migrations for Jetstream:

bash
php artisan migrate

Install all node modules and build assets:

bash
npm install
npm run build

During development, run:

bash
npm run dev

This starts the Vite development server with hot module replacement for Svelte.

9. Updating Blade Files & Layouts

In default Jetstream with Inertia, there is a Blade wrapper `app.blade.php` which loads the Inertia app. You need to keep this Blade file in `resources/views/app.blade.php` to bootstrap your SPA.

Make sure the Inertia root div and necessary scripts are present:

blade

getLocale()) }}">

    
    
    {{ config('app.name') }}
    @vite('resources/js/app.js')


    @inertia

10. Running Your Application

At this point, your Laravel backend is serving API routes and Inertia is rendering frontend through Svelte components.

Run the Laravel server:

bash
php artisan serve

Ensure Vite dev server is running concurrently with:

bash
npm run dev

Navigate to `http://localhost:8000` in your browser to see the Jetstream UI rendered with Svelte.

***

Additional Tips:

- You may want to define global Svelte stores to handle shared state such as user authentication data.
- Replace Vue-specific Jetstream components with their Svelte equivalents.
- Adjust your routes and page components to use Svelte syntax while keeping Inertia link components for navigation.
- When working with authentication, use Jetstream's API endpoints while rendering frontend with Svelte via Inertia.
- For team and profile management, recreate the UI with Svelte components referencing Jetstream backend logic.
- Customize UI and workflows by modifying Svelte files inside `resources/js/Pages` and creating new components as needed.

This setup takes advantage of Laravel Jetstream's secure and feature-complete backend while leveraging the simplicity and reactivity of Svelte on the frontend through Inertia.js.

This is a general guide; some manual adjustments may be needed depending on your project's requirements and the versions of these tools you are using. The Laravel Jetstream and Inertia documentation, combined with Svelte and Vite configuration guides, will be a helpful resource throughout the process.

What are the steps to set up Jetstream with Svelte