Instalar Laravel 9 Inertia con Svelte y Vite🥇| Programee

En este post te voy a explicar, paso a paso, cómo preparar un entorno de trabajo fullstack en Laravel, para que puedas combinar la potencia de Laravel 9 con Svelte.

Para ello es necesario utilizar InertiaJS, que se encargará de «conectar» ambos y nos permitirá trabajar con ellos, pero no es suficiente con mirar la documentación de InertiaJS, pues hay «detallitos» que pueden complicar la instalación.

En anteriores versiones Laravel trabajaba con Laravel Mix, pero esto ya no ocurre pues ahora trabaja con Vite. Y esto es importante de cara a algunas cosas que hay que realizar para que el proyecto funcione correctamente.

Preparación previa

Asegúrate de tener instalada una versión reciente de PHP, en este caso utilizaremos la actual en el momento de escribir el artículo ( 8.1 ).
Una vez tenemos PHP, instala Composer y selecciona la versión de PHP que has descargado. Si aun no tienes PHP en el path, aprovecha y añádelo durante la instalación de Composer.

aa32e3fe — -10% 3 Meses ✅ CUPÓN: PROGRAMEE

Configuración del lado del servidor

Instalar Laravel 9

Con Composer ya instalado, ve a la consola y en el directorio que desees ejecuta el siguiente comando: (substituye programee-app por el nombre de tu proyecto)

composer create-project laravel/laravel programee-app

Una vez finalizada la instalación de Laravel, entra al directorio que se acaba de crear:

cd programee-app

Finalmente recuerda crear una key para tu proyecto de Laravel:

php artisan key:generate

Instalar InertiaJS

Si todo ha ido bien, Laravel ya se encuentra listo para funcionar por lo que es momento de pasar a instalar InertiaJS, que nos permitirá trabajar con Laravel y Svelte.

composer require inertiajs/inertia-laravel

//si el comando anterior no funciona, prueba con este
composer require inertiajs/inertia-laravel --ignore-platform-req=ext-fileinfo

Crear Middleware

php artisan inertia:middleware

Con el Middleware creado, iremos a: app/Http/Kernel.php y aproximadamente en la línea 40 de código, en «web», añadiremos esta línea al final:

\App\Http\Middleware\HandleInertiaRequests::class,

El código debería quedar algo similar a esto:

 'web' => [
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
            \App\Http\Middleware\HandleInertiaRequests::class,
        ],

Modificar web.php

Iremos a routes/web.php y modificaremos este archivo. Tiene que quedar algo similar a esto:

<?php

use Illuminate\Support\Facades\Route;
use Inertia\Inertia;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return Inertia('Welcome');
});

?>

El «return Inertia(«Welcome») devolverá el componente de Svelte que nosotros deseemos.

Configuración del lado del cliente

Modificar welcome.blade.php

Tendremos que ir a resources/views y modificar el nombre del archivo welcome.blade.php por app.blade.php. Además, habrá que cambiarle el contenido por lo siguiente:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    @vite('resources/js/app.js')
    @inertiaHead
  </head>
  <body>
    @inertia
  </body>
</html>

Por lo general, el paso anterior suele estar mal explicado, pues se explica para los casos en los que Laravel utiliza Mix. Pero como he dicho al principio del articulo, las nuevas versiones de Laravel funcionan con Vite.

Instalar Inertia-Svelte y vite-plugin-svelte

Con NodeJS instalado, ejecutaremos en la consola los siguientes comandos con npm:

npm install @inertiajs/inertia @inertiajs/inertia-svelte
npm i @sveltejs/vite-plugin-svelte

Modificar app.js

Después iremos a resources/js/app.js y lo dejaremos con el siguiente contenido:

import { createInertiaApp } from '@inertiajs/inertia-svelte'

import { Inertia } from "@inertiajs/inertia";

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

Modificar vite.conf

Ve a vite.conf y dentro de «plugins» añade Svelte:

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({}),
    ],
});

Crear el primer componente con Svelte

Ahora solo falta crear nuestros componentes con Svelte. Para ello ve a resources/js y crea una carpeta/directorio llamado Pages. Dentro de esta carpeta crea un archivo llamado Welcome.svelte con el siguiente contenido.

<script>
    const saludo = "Hola David!";
    let contador = 0;
    const click = () => contador++;
</script>

<h1>{saludo}</h1>
<button on:click={click}>PROGRAMEE {contador}</button>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

La hora de la verdad

Ahora, si lo has hecho todo paso a paso (y nada ha cambiado con el paso de los años) necesitarás dos consolas.

En la primera consola ejecuta:

npm run dev

En la segunda consola ejecuta:

php artisan serve

Si se abre algo similar a esto, es que todo ha ido correctamente 🙂