Laravel e Inertia.js son dos herramientas poderosas que, combinadas, te permiten desarrollar aplicaciones web modernas de una forma sencilla y eficiente. En este artículo, aprenderás a crear una web con Laravel e Inertia.js paso a paso, incluso si eres un principiante.
¿Qué es Laravel?
Laravel es un framework de PHP muy popular que se utiliza para desarrollar aplicaciones web robustas y seguras. Es conocido por su facilidad de uso, una curva de aprendizaje amigable, y una amplia variedad de herramientas y bibliotecas que simplifican el desarrollo.
¿Qué es Inertia.js?
Inertia.js es una tecnología que conecta Laravel (backend) con un frontend basado en frameworks JavaScript modernos como React o Vue.js, sin la necesidad de crear una API completa. Es ideal si prefieres trabajar con un solo stack y te permite desarrollar Single Page Applications (SPA) de manera muy sencilla.
Preparativos: Instalación y Configuración
Antes de comenzar, asegúrate de tener instalado lo siguiente:
- PHP (>= 8.0)
- Composer (para gestionar las dependencias de PHP)
- Node.js y npm (para manejar las dependencias de JavaScript)
- Un entorno local de desarrollo como XAMPP o Laravel Sail.
Paso 1: Crear un Proyecto de Laravel
Primero, debes crear un proyecto nuevo de Laravel. Abre tu terminal y ejecuta el siguiente comando:
composer create-project --prefer-dist laravel/laravel nombre-del-proyecto
Entra en la carpeta del proyecto recién creado:
cd nombre-del-proyecto
Paso 2: Instalar Inertia.js y React
Vamos a instalar Inertia.js y React para comenzar a trabajar. Primero, instalemos Inertia.js en Laravel:
composer require inertiajs/inertia-laravel
Después, instala React y la biblioteca de Inertia.js para el frontend:
npm install @inertiajs/inertia @inertiajs/inertia-react react react-dom
Finalmente, instala Laravel Breeze, que proporciona una configuración de autenticación básica:
composer require laravel/breeze --dev
php artisan breeze:install react
npm install && npm run dev
Laravel Breeze configura autenticación básica (registro, login, etc.) usando Inertia.js y React, lo cual es perfecto para principiantes.
Paso 3: Configurar Middleware y Rutas
Para que Laravel funcione correctamente con Inertia.js, debes agregar el middleware de Inertia. Asegúrate de que el middleware HandleInertiaRequests
esté registrado en el archivo Kernel.php
:
// app/Http/Kernel.php
protected $middlewareGroups = [
'web' => [
// Otros middlewares
\App\Http\Middleware\HandleInertiaRequests::class,
],
];
Luego, crea una ruta para mostrar la página principal de tu aplicación:
// routes/web.php
use Inertia\Inertia;
Route::get('/', function () {
return Inertia::render('Welcome', [
'message' => '¡Bienvenido a tu primera web con Laravel e Inertia.js!',
]);
});
En este ejemplo, estamos devolviendo una vista llamada Welcome
usando Inertia.js.
Paso 4: Crear Componentes de React
Vamos a crear un componente simple en React para mostrar un mensaje. Dirígete a la carpeta resources/js/Pages
y crea un archivo llamado Welcome.jsx
:
// resources/js/Pages/Welcome.jsx
import React from 'react';
const Welcome = ({ message }) => {
return (
<div>
<h1>{message}</h1>
<p>¡Este es tu primer proyecto con Laravel e Inertia.js!</p>
</div>
);
};
export default Welcome;
Paso 5: Compilar los Archivos
Para ver los cambios, debes compilar tus archivos de JavaScript con Laravel Mix. Ejecuta el siguiente comando:
npm run dev
Laravel Mix compilará todos los archivos JS y CSS para que puedas ver los cambios en tu navegador.
Paso 6: Iniciar el Servidor
Finalmente, inicia el servidor de desarrollo de Laravel:
php artisan serve
Visita http://localhost:8000
en tu navegador y deberías ver el mensaje que configuraste en tu componente Welcome
.
Resumen Final
Con Laravel e Inertia.js, puedes crear aplicaciones web modernas de manera más rápida y sin tener que preocuparte demasiado por las complejidades de una API REST completa. Laravel proporciona la lógica del backend, mientras que Inertia.js y React se encargan de la experiencia del usuario, brindándote lo mejor de ambos mundos.
Si eres principiante, esta combinación te permitirá entrar al desarrollo de aplicaciones modernas de forma gradual, sin sentirte abrumado por las tecnologías. ¡Sigue explorando y experimentando para mejorar tu habilidad como desarrollador!