7: Instala Jetstream con Inertia.js en tu portafolio Laravel
7: Instala Jetstream con Inertia.js en tu portafolio Laravel
Introducción
En este tutorial instalaremos Laravel Jetstream, un paquete oficial que nos proporcionará un sistema completo de autenticación y gestión de usuarios. Además, integraremos Inertia.js para crear una experiencia de aplicación de página única (SPA) con Vue.js, manteniendo la simplicidad del desarrollo tradicional de Laravel.
¿Qué es Laravel Jetstream?
Jetstream es un paquete de Laravel que proporciona un sistema completo de scaffolding para autenticación que incluye registro, inicio de sesión, verificación de email, restablecimiento de contraseña y gestión de perfiles. Además, puede incluir:
Autenticación de dos factores (2FA)
Gestión de sesiones del navegador
Gestión de equipos (opcional)
Gestión de tokens API
Jetstream soporta dos stacks principales: Livewire e Inertia.js. Nosotros utilizaremos Inertia porque nos permite trabajar con Vue.js de manera sencilla y moderna.
⚠️ Importante: Jetstream solo debe instalarse en proyectos nuevos de Laravel. Instalarlo en un proyecto existente puede causar problemas inesperados.
Paso 1: Instalar el paquete Jetstream
Asegúrate de estar en la raíz de tu proyecto Laravel y ejecuta el siguiente comando con Composer:
composer require laravel/jetstreamEste comando descargará e instalará el paquete Jetstream junto con todas sus dependencias necesarias.
Paso 2: Instalar Jetstream con Inertia
Una vez instalado el paquete, ejecuta el comando Artisan para instalar Jetstream con el stack de Inertia:
php artisan jetstream:install inertiaEste comando realizará múltiples tareas automáticamente:
Generará controladores, migraciones y vistas
Instalará las dependencias frontend de Vue.js e Inertia
Configurará Tailwind CSS para los estilos
Creará los componentes Vue necesarios
Opciones adicionales
Si deseas incluir soporte para equipos (teams), añade el flag --teams:
php artisan jetstream:install inertia --teamsPara esta sección no usaremos equipos, pero la opción está disponible si la necesitas más adelante.
Si quieres soporte para Server-Side Rendering (SSR):
php artisan jetstream:install inertia --ssrPaso 3: Instalar dependencias NPM
Jetstream utiliza Vite como bundler y requiere dependencias de Node.js. Ejecuta:
npm installEsto instalará todas las dependencias frontend necesarias, incluyendo:
Vue.js
Inertia.js para Vue
Tailwind CSS
Vite
Paso 4: Compilar los assets
Compila los assets para desarrollo:
npm run buildPara desarrollo continuo con hot-reload, puedes usar:
npm run devPaso 5: Ejecutar las migraciones
Jetstream crea varias tablas necesarias para la autenticación. Ejecuta las migraciones:
php artisan migrateNota: Asegúrate de tener configurada tu base de datos en el archivo
.envantes de ejecutar este comando. Si usas SQLite, recuerda que el archivodatabase/database.sqlitedebe existir.
Paso 6: Verificar la instalación
Inicia el servidor de desarrollo de Laravel:
php artisan serveVisita http://localhost:8000 en tu navegador. Ahora deberías ver:
Botones de Login y Register en la esquina superior derecha
Enlaces funcionales para registro y autenticación
Diseño moderno con Tailwind CSS
Si todo funciona correctamente, ¡la instalación fue exitosa!
¿Qué se ha generado automáticamente?
Al ejecutar jetstream:install inertia, se han creado:
Backend
Rutas de autenticación en
routes/web.phpControladores para login, registro, verificación de email, etc.
Migraciones para usuarios, sesiones, verificación de email, 2FA y más
Frontend
Componentes Vue en
resources/js/Pages/Layouts y componentes reutilizables
Configuración de Tailwind CSS
Archivos de configuración de Vite
Estilos modernos y responsivos
Comandos útiles de Jetstream
Una vez instalado, puedes verificar que el comando está disponible:
php artisan jetstream:installY verás los comandos disponibles para gestionar Jetstream.
Comprobación final
Para confirmar que todo está funcionando correctamente:
Registra un nuevo usuario desde la interfaz
Inicia sesión con tus credenciales
Verifica el dashboard que debería mostrar el perfil del usuario
Si puedes completar estos pasos, ¡tienes un sistema de autenticación completo funcionando!
Recomendaciones adicionales
Te recomiendo familiarizarte con la documentación de las tecnologías que integraremos:
Inertia.js: Para entender cómo funciona el enrutamiento y las páginas
Vue.js: Para los componentes frontend
Tailwind CSS: Para los estilos
No te preocupes si ahora parecen abrumadoras. En las siguientes secciones exploraremos cada una de estas tecnologías en detalle y comenzaremos a resolver dudas una por una.
Resumen
✅ Instalamos Laravel Jetstream con Composer
✅ Configuramos Jetstream con el stack Inertia
✅ Instalamos dependencias NPM y compilamos assets
✅ Ejecutamos migraciones para crear las tablas necesarias
✅ Verificamos que el sistema de autenticación funciona
¡Excelente trabajo! Ahora tu proyecto tiene una base sólida con autenticación completa y el stack Bolt (Vue + Inertia + Tailwind) configurado y listo para comenzar a construir tu portafolio.
Recursos adicionales
¿Tienes dudas sobre algún paso? No dudes en consultar la documentación oficial o revisar los videos del curso donde se explican estos procesos con mayor detalle
*************************************
Entender la diferencia entre Laravel Jetstream e Inertia es más fácil si piensas en el primero como un "paquete de inicio" y en el segundo como la "tecnología de conexión" que ese paquete puede usar. No son cosas comparables directamente; uno es un producto y el otro es una herramienta que ese producto emplea.
Para que lo veas más claro, imagina que quieres construir una casa:
Laravel Jetstream es como un kit de construcción de casas prefabricadas. Te da todo un plano listo para usar: los cimientos (autenticación), la estructura (gestión de usuarios, perfiles), y los materiales básicos. Puedes personalizarlo, pero la base ya está hecha .
Inertia es, en cambio, el sistema que conecta los enchufes de tu casa con tu televisor. Es una capa técnica que permite la comunicación, en este caso, entre el "backend" de Laravel y el "frontend" (las partes que ves y con las que interactúas) sin la necesidad de crear una API tradicional .
En resumen: Jetstream es un producto completo que incluye autenticación, perfiles de usuario y más, mientras que Inertia es la tecnología que Jetstream utiliza para comunicar el servidor con el frontend cuando eliges su versión con Vue.js.
Para que lo entiendas mejor, aquí te detallo cada cosa por separado.
🚀 ¿Qué es Laravel Jetstream?
Es un "starter kit" o "kit de inicio" oficial para Laravel. Su objetivo es darte una base sólida y profesional para empezar tu proyecto, ahorrándote el trabajo de programar las funcionalidades más comunes desde cero .
Proporciona un sistema de autenticación completo: Incluye registro, inicio de sesión, verificación de email, restablecimiento de contraseña e incluso autenticación de dos factores (2FA) .
Ofrece funcionalidades adicionales listas para usar: Gestión de sesiones, carga de fotos de perfil, y gestión de equipos (opcional) .
Te da a elegir el stack frontend: Lo más importante es que te permite elegir entre dos tecnologías para construir la interfaz de usuario: Livewire (con Blade, que es el motor de plantillas de Laravel) o Inertia (con Vue.js o React) .
🔌 ¿Qué es Inertia?
Es una librería o puente que conecta el frontend con el backend sin la complejidad de tener que construir una API separada .
Crea aplicaciones de una sola página (SPA): Te permite crear interfaces modernas y rápidas que se sienten como una aplicación, sin recargar la página al navegar .
Simplifica el desarrollo: Utiliza el enrutador de Laravel (que ya conoces) en lugar de uno de cliente (como el de Vue Router). Sigues creando controladores y pasando datos, pero en lugar de devolver una vista de Blade, le dices a Inertia que renderice un componente de Vue o React .
Funciona sin API: Con Inertia, no necesitas crear un API REST o GraphQL. La comunicación entre el servidor y el cliente es directa y simple .
✨ ¿Cómo se relacionan Jetstream e Inertia?
La relación es simple: Inertia es una de las dos opciones principales que Jetstream te ofrece para construir tu frontend.
Cuando instalas Laravel Jetstream, el comando te pregunta qué stack quieres usar :
Si eliges
livewire, usarás componentes de Livewire y plantillas Blade.Si eliges
inertia(que es la opción que has estado siguiendo en tus tutoriales), Jetstream generará automáticamente todos los componentes de autenticación y gestión de usuarios en Vue.js (o React), utilizando Inertia como el puente de comunicación .
En otras palabras, Jetstream utiliza a Inertia para construir sus páginas (login, registro, dashboard, perfil) cuando eliges el stack de Inertia. Al instalarlo, Jetstream genera una carpeta resources/js/Pages/ con todas esas páginas en Vue.js, listas para que las modifiques .
🆚 Diferencias Clave
Espero que esta explicación te ayude a tener una visión más clara. Ahora que entiendes estos conceptos, ¿te gustaría ver cómo se personaliza un componente de Jetstream generado con Inertia?
.............................................
¡Exactamente! Inertia está integrado dentro de Jetstream
¡Correcto! Inertia está incluido como parte de Laravel Jetstream cuando eliges el stack de Inertia durante la instalación. No son dos cosas separadas que instalas por tu cuenta, sino que Jetstream ya trae Inertia preconfigurado y funcionando.
🎯 La relación exacta
1. Jetstream es el paquete "padre"
Cuando ejecutas este comando:
composer require laravel/jetstreamEstás instalando Laravel Jetstream, que es un paquete completo que incluye:
El sistema de autenticación
Las vistas y componentes
Y también las dependencias necesarias para Inertia
2. Inertia se activa con un comando
Cuando ejecutas el comando de instalación:
php artisan jetstream:install inertiaLo que estás haciendo es decirle a Jetstream: "Quiero que uses Inertia como tu stack frontend". En ese momento, Jetstream:
Instala todas las dependencias de Inertia
Instala Vue.js (o React)
Configura Vite
Genera todos los componentes de autenticación en Vue/React
Configura el enrutamiento
📦 El flujo completo de instalación
Paso 1: Instalar Jetstream
composer require laravel/jetstreamEsto solo instala el paquete Jetstream en tu proyecto, pero aún no está activo.
Paso 2: Activar Jetstream con Inertia
php artisan jetstream:install inertiaAquí es donde ocurre la magia:
Jetstream instala y configura todas las dependencias de Inertia
Crea la estructura de carpetas para Vue/React
Genera páginas completas (login, register, dashboard, profile)
Configura el archivo
app.jscon InertiaPrepara Vite para compilar los assets
Paso 3: Instalar dependencias NPM
npm installEsto instala las dependencias que Jetstream ya agregó a tu package.json, incluyendo:
"devDependencies": {
"@inertiajs/vue3": "^1.0.0", // ← Inertia para Vue
"@vitejs/plugin-vue": "^4.0.0",
"vue": "^3.2.0"
}Paso 4: Compilar
npm run build🗂️ ¿Qué genera Jetstream con Inertia?
Cuando instalas Jetstream con Inertia, Jetstream genera todo esto por ti:
Backend (Laravel)
app/
├── Actions/
│ ├── Fortify/ ← Sistema de autenticación
│ │ ├── CreateNewUser.php
│ │ ├── UpdateUserPassword.php
│ │ └── ...
│ └── Jetstream/
│ ├── AddTeamMember.php
│ └── ...
├── Http/
│ ├── Controllers/
│ │ └── ProfileController.php ← Controlador de perfil
│ └── Middleware/
│ ├── HandleInertiaRequests.php ← Middleware de Inertia
│ └── ...
├── Providers/
│ └── JetstreamServiceProvider.php ← Configuración de Jetstream
└── ...Frontend (Vue + Inertia)
resources/
├── js/
│ ├── Components/ ← TODOS estos vienen con Jetstream
│ │ ├── ApplicationLogo.vue
│ │ ├── Button.vue
│ │ ├── Checkbox.vue
│ │ ├── Dropdown.vue
│ │ ├── Input.vue
│ │ ├── Modal.vue
│ │ └── ... (más de 15 componentes)
│ ├── Layouts/
│ │ └── AppLayout.vue ← Layout principal
│ ├── Pages/ ← Páginas completas de Jetstream
│ │ ├── Welcome.vue
│ │ ├── Dashboard.vue
│ │ ├── Auth/
│ │ │ ├── Login.vue
│ │ │ ├── Register.vue
│ │ │ ├── ForgotPassword.vue
│ │ │ ├── ResetPassword.vue
│ │ │ └── VerifyEmail.vue
│ │ └── Profile/
│ │ ├── Show.vue
│ │ └── Partials/
│ │ ├── UpdateProfileInformationForm.vue
│ │ ├── UpdatePasswordForm.vue
│ │ └── TwoFactorAuthenticationForm.vue
│ └── app.js ← Configuración de Inertia
├── views/
│ └── app.blade.php ← Plantilla raíz (única) para Inertia
└── ...Configuraciones
config/
├── fortify.php ← Configuración de Fortify (autenticación)
└── jetstream.php ← Configuración de Jetstream💡 Entendiendo la integración
Jetstream se encarga de TODO:
Configura Fortify (sistema de autenticación de Laravel)
Crea las Actions (lógica de negocio para autenticación)
Genera todas las páginas en Vue/React
Configura Inertia correctamente
Configura Vite para compilar
Agrega todas las dependencias necesarias
Inertia solo hace UNA cosa:
Actúa como el puente entre las páginas de Jetstream y Laravel.
🔍 Ejemplo: Cómo se usan juntos
En el backend (Jetstream + Laravel)
routes/web.php (generado por Jetstream):
// Jetstream ya configuró esta ruta
Route::middleware(['auth:sanctum', 'verified'])->group(function () {
Route::get('/dashboard', function () {
return Inertia::render('Dashboard'); // ← Jetstream usando Inertia
})->name('dashboard');
});En el frontend (Vue + Inertia)
resources/js/Pages/Dashboard.vue (generado por Jetstream):
<template>
<AppLayout>
<Head title="Dashboard" />
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-6">
<!-- Contenido del dashboard -->
<h1 class="text-2xl font-bold">Bienvenido, {{ $page.props.auth.user.name }}</h1>
</div>
</div>
</div>
</AppLayout>
</template>
<script setup>
import { Head } from '@inertiajs/vue3'; // ← Importado de Inertia
import AppLayout from '@/Layouts/AppLayout.vue'; // ← Layout de Jetstream
</script>📊 Diagrama visual
┌─────────────────────────────────────────────────────────────┐
│ LARAVEL JETSTREAM │
│ │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ Sistema de Autenticación │ │
│ │ • Fortify (backend) │ │
│ │ • Actions (CreateNewUser, etc.) │ │
│ └───────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────┐ ┌─────────────────────────────┐ │
│ │ STACK: LIVEWIRE │ │ STACK: INERTIA │ │
│ │ │ │ │ │
│ │ • Blade templates │ │ • Vue.js o React │ │
│ │ • Livewire comps │ │ • Inertia.js (puente) │ │
│ │ • Tailwind CSS │ │ • Tailwind CSS │ │
│ └─────────────────────┘ └─────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ Componentes UI (Button, Modal, Dropdown, etc.) │ │
│ └───────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘🔧 ¿Qué pasa si solo quiero Inertia sin Jetstream?
Es posible, pero tendrías que hacer todo manualmente:
Instalar
inertia-laravelInstalar
@inertiajs/vue3o@inertiajs/reactConfigurar Vite manualmente
Crear tu propia estructura de carpetas
Crear el sistema de autenticación desde cero (o instalar Fortify por separado)
Crear todas las páginas (login, register, profile) desde cero
Configurar middleware y rutas de autenticación
Manejar la verificación de email y 2FA por tu cuenta
Como ves, Jetstream ahorra horas de trabajo al hacer todo esto por ti.
✅ Resumen final
| Aspecto | Respuesta |
|---|---|
| ¿Inertia está dentro de Jetstream? | ✅ Sí, cuando instalas jetstream:install inertia |
| ¿Puedo usar Inertia sin Jetstream? | ✅ Sí, pero tendrías que configurar todo manualmente |
| ¿Jetstream funciona sin Inertia? | ✅ Sí, con el stack Livewire (Blade) |
| ¿Qué gano con Jetstream + Inertia? | Todo el sistema de autenticación YA hecho en Vue/React |
En pocas palabras:
Jetstream es el "paquete completo" que incluye autenticación, gestión de usuarios, componentes UI y también Inertia (si eliges ese stack). No tienes que instalar Inertia por separado; Jetstream lo hace por ti.
¿Quieres ver cómo personalizar un componente de Jetstream generado con Inertia? ¡Dime y lo exploramos juntos!
Comentarios
Publicar un comentario