Laravel / Inertia con Svelte
Este repositorio tiene El andamio con Laravel, Inertiajs y Svelte para que pueda usarlo; sin embargo, si desea conocer y realizar la instalación manual, aqui dejo toda la guía.
Recuerde que debe tener instalado previamente "composer". Hay muchos tutoriales disponibles para ello.
vamos a crear una carpeta en cualquier lugar de windows para hacer allí la instalación .
Pasos de instalacion Laravel / inertia / svelte
Laravel
- abrir una Terminal (cmd, gitbash o cualquiera) en la carpeta elegida para el proyecto.
- instalamos Laravel con el comando:
composer create-project laravel/laravel [nombre-app]
Esto deberia instalar Laravel sin novedades, eso toma unos segundos o minutos dependiendo de las caracateristicas de su máquina. Despues de la instalación, Ingrese a la carpeta del proyecto y luego suba el servidor de la siguiente manera:
- para ingresar a la carpeta del proyecto
cd nombre-app
- para subir el server
php artisan serve
ahora abre el link en un browser. Suele ser: http://127.0.0.1:8000 y listo, ya tenemos Laravel instalado que es nuestra instalación base.
Ahora pasamos a instalar Inertia Js que hará las veces de "interface" entre laravel y Svelte.
Inertia js - Server Side
- Debe asegurarse de estar dentro de la carpeta del proyecto y luego desde allí instalar el marco del lado del servidor (Server-Side Setup) con la siguiente instrucción en la Terminal:
composer require inertiajs/inertia-laravel
esto llevará un tiempo dependiendo de tu máquina, "ten paciencia".
- si todo va bien, es hora de abrir nuestro proyecto en un editor de codigo, en mi caso usaré vscode, asi que ahi en la terminal desde la carpeta del proyecto digitas:
code .
y se abrirá vscode con la estructura del proyecto. (Si deseas puedes cerrar la terminal y seguir desde vscode abriendo una terminal desde el editor)
el primer archivo que editaremos será "web.php" que se encuentra en la carpeta "routes". (routes/web.php) alli reemplazaremos todo el codigo por la siguiente plantilla:
<?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 and all of them will
| be assigned to the "web" middleware group. Make something great!
|
*/
Route::get('/', function () {
return inertia::render('Home');
});
Ahora vas a la siguiente ruta del proyecto: "resources/views", allí puedes borrar el archivo existente: "welcome.blade.php" y creas uno nuevo con el nombre "app.blade.php" que será el archivo que inertia buscara como entrada.
dentro de ese archivo copias la siguiente plantilla:
<!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>
Esta plantilla incluye los activos, así como las directivas @inertia y @inertiaHead que se utilizarán para cargar los recursos de su sitio (CSS y JavaScript). También contendrá una raíz en la que se iniciará su aplicación JavaScript por lo que de forma predeterminada, el adaptador Laravel de Inertia asumirá que su plantilla raíz se llama app.blade.php
Inertia Middleware
Ahora abrimos una terminal desde vscode e instalaremos el Middleware de Inertia con la siguiente instrucción:
php artisan inertia:middleware
ésta es muy rápida ! 🏃♂️✈️
- Una vez que se haya publicado el middleware, registre el middleware HandleInertiaRequests en la ruta App\Http\Kernel como el último elemento de su grupo de middleware web:
'web' => [
// ...
// otros
// ...
\App\Http\Middleware\HandleInertiaRequests::class,
],
Es importante que lo agregue de úlimo en el "middlewareGroups.web".
Listo, Ya tenemos el Side-Server.
Ahora instalemos el lado del cliente (Client-Side Setup).
Inertia js Client Side
- para ello ingresamos la siguiente instrucción en la terminal:
npm install @inertiajs/svelte
- A continuación, vamos a actualizar el archivo JavaScript principal para iniciar la aplicación con Inertia. Para lograr esto, inicializaremos el marco del lado del cliente con el componente base Inertia. asi que vamos a abrir el archivo que se encuentra en la ruta: "resources/js/app.js" y pegue allí la siguiente plantilla:
import './bootstrap';
import { createInertiaApp } from '@inertiajs/svelte'
createInertiaApp({
resolve: name => {
const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true })
return pages[`./Pages/${name}.svelte`]
},
setup({ el, App, props }) {
new App({ target: el, props })
},
})
esto tiene lo necesario para inicializar el marco del lado del cliente, incluido el componente raíz de la aplicación Inertia.
Ya casi terminamos; ahora nos faltaría instalar el plugin @sveltejs/vite-plugin-svelte.
- para ello ingresamos en la terminal la siguiente instrucción:
npm install --save-dev @sveltejs/vite-plugin-svelte
- Ahora vamos a importarlo y agregarlo en el archivo de configuración de vite, éste archivo debe verlo en la raiz del proyecto con el nombre "vite.config.js" y debe verse así:
//vite.config.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/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
svelte({
/* plugin options */
})
],
});
(Para evitar errores de digitación, copie y pegue (reemplace) la plantilla completa)
Por ultimo vamos a crear nuestro primer componente Svelte para testear la instalación. Para ello vamos a la carpeta "resources/js" y dentro de ella creamos una carpeta "pages" y dentro de pages creamos el componente: "Home.svelte".
Hecho lo anterior, el componente debe verse en la ruta de la siguiente manera: resources/js/pages/Home.svelte
ahora dentro del archivo Home.svelte copia y pega la siguiente plantilla:
//Home.svelte
<script>
let saludo = 'Hola desde Inertia con Laravel y Svelte'
</script>
<h1>{saludo}</h1>
- Ok, vamos a probar nuestra aplicación y para ello arrancamos nuestro servidor de cliente ingresando en la terminal:
npm run dev
- abrimos otra terminal más y alli ingresamos:
php artisan serve
y Voilà !
Deberías ver nuestro Saludo de prueba en el servidor: 'Hola desde Inertia con Laravel y Svelte'
- y asi tenemos a Laravel 10 disponible para backend,
- y Svelte para el frontend juntos como un proyecto monolitico.
Adicionalmente, si deseas usar Tailwind, puedes seguir el manual de instalación de la pagina oficial de Tailwind para Laravel, funciona a la perfección.
Saludos y Espero te sea de utilidad.
Orlando Camacho
