5 pasos para instalar Inertia.js en tu aplicación Laravel
Guadalupe
17 Apr 2023
¿Estás empezando a aprender Laravel? Entonces, debes saber que existe una tecnología de moda que permite a los usuarios interactuar con las aplicaciones web de forma rápida y con capacidad de respuesta, ya que todo se renderiza en el lado del cliente. Sin embargo, puede ser una molestia para los desarrolladores que construyen aplicaciones renderizadas del lado del servidor con frameworks como Laravel o Django.
¡Afortunadamente, Inertia.js intervino y vino al rescate! En este artículo, te explicaremos cómo puedes empezar a usar esta herramienta y cómo instalarla en tu aplicación Laravel, Vue.js y Tailwind CSS para crear una aplicación web de blog moderna. ¡Sigue leyendo!
¿Por qué usar Inertia.js?
Si los desarrolladores de Laravel fueran a construir SPAs web con Vue antes de Inertia, tendrían que configurar APIs y devolver datos JSON con Laravel, y luego usar algo como AXIOS para recuperar los datos en componentes Vue. También necesitan algo como Vue Router para gestionar las rutas, lo que significa perder el enrutamiento de Laravel, así como los middlewares y controladores.
Por otro lado, Inertia.js permite a los desarrolladores web construir aplicaciones modernas con Vue, React y Svelte de una sola página utilizando enrutamiento y controladores clásicos del lado del servidor.
Inertia fue diseñado para desarrolladores de Laravel, Ruby on Rails y Django para permitirles construir aplicaciones sin cambiar sus técnicas de codificación para crear controladores, obtener datos de una base de datos y renderizar vistas. ¡Gracias a Inertia.js, los desarrolladores de Laravel se sentirán como en casa!
¿Cómo funciona Inertia.js?
Construir SPA solo con Laravel y Vue te dará una página JavaScript completa para tu frontend, pero esto no te proporcionará una experiencia de aplicación de una sola página. Cada enlace pulsado hará que tu framework del lado del cliente se reinicie en la siguiente carga de página. ¡Aquí es donde Inertia entra en escena!
Inertia es básicamente una librería de enrutamiento del lado del cliente. Este te permite navegar entre páginas sin tener que recargar toda la página. Esto se logra a través del componente <Link>, que es una envoltura ligera alrededor de una etiqueta de anclaje estándar.
Cuando hace clic en un enlace de Inertia, este intercepta el clic y le redirige a XHR en su lugar. El navegador no recargará la página de esta manera, dando al usuario una experiencia completa de una sola página.
Te puede interesar: ¿Por qué usar Laravel en 2023? 4 ventajas que debes conocer
¿Cómo integrar Inertia.js en Laravel?
La instalación de Laravel Inertia es sencilla y fácil de entender, gracias a la excelente documentación de Inertia. Entonces, si te interesa saber cómo instalar Inertia en tu aplicación Laravel, debes seguir estos pasos:
Paso 1: Configuración del lado del servidor con Laravel
Una vez que hayas terminado con la instalación de Laravel, navega hasta el directorio actual e instala las dependencias de Inertia.
composer require inertiajs/inertia-laravelA continuación, configura la plantilla raíz que se cargará en la visita de la primera página. Esto se usará para cargar los activos de tu sitio (CSS/JS) y contener una raíz <div> para arrancar tu aplicación Javascript.
Luego, busca el archivo app.blade.php dentro del directorio Resources/Views o si no lo encuentras, puedes crear un nuevo archivo o reemplazar el welcome.blade.php.
Después de reemplazar el contenido existente con este código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
<script src="{{ mix('/js/app.js') }}" defer></script>
@inertiaHead
</head>
<body>
@inertia
</body>
</html>Aquí, @inertia actúa como un helper que es una forma conveniente de pasar el primer contenido a inertia y decirle a Laravel que las vistas están siendo generadas usando esta herramienta.
Paso 2: Configuración del middleware
A continuación, configura el middleware Inertia. En Laravel, necesitas publicar el middleware HandleInertiaRequests en tu aplicación, lo que puedes hacer usando este comando artisan:
php artisan inertia:middlewareDespués de ejecutar el siguiente comando, registra el middleware Inertia dentro de tu archivo App/Http/Kernel.php, como el último elemento de tu grupo de middleware web.
'web' => [
// ...
\App\Http\Middleware\HandleInertiaRequests::class,
],Después de completar esto, tu configuración del lado del servidor está completa y funcionando. Ahora vamos a la configuración del lado del cliente y comenzar tu experiencia Laravel-Inertia.
Paso 3: Configuración del lado del cliente con Vue/React/Svelte
A continuación, vamos a empezar instalando algunas dependencias para crear la conexión entre el backend de Laravel y tu framework frontend.
- Instalar dependencias:
Instala los adaptadores del lado cliente de Inertia usando NPM o Yarn.
- Vue
npm install @inertiajs/inertia @inertiajs/inertia-vue3yarn add @inertiajs/inertia @inertiajs/inertia-vue3- React
npm install @inertiajs/inertia @inertiajs/inertia-reactyarn add @inertiajs/inertia @inertiajs/inertia-react- Svelte
npm install @inertiajs/inertia @inertiajs/inertia-svelteyarn add @inertiajs/inertia @inertiajs/inertia-svelte- Iniciar la app:
A continuación, actualiza tu archivo JavaScript principal en resources/js/app.js para arrancar tu aplicación Inertia. Todo lo que estamos haciendo aquí es inicializar el framework del lado del cliente con el componente base de Inertia.
- Vue
import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'
createInertiaApp({
resolve: name => require(`./Pages/${name}`),
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.mount(el)
},
}) - React
import React from 'react'
import { render } from 'react-dom'
import { createInertiaApp } from '@inertiajs/inertia-react'
createInertiaApp({
resolve: name => require(`./Pages/${name}`),
setup({ el, App, props }) {
render(, el)
},
})- Svelte
import { createInertiaApp } from '@inertiajs/inertia-svelte'
createInertiaApp({
resolve: name => require(`./Pages/${name}.svelte`),
setup({ el, App, props }) {
new App({ target: el, props })
},
})Añade el código anterior a tu archivo resources/js/app.js. El callback "resolve" indica a Inertia cómo cargar un componente de página. Recibe un nombre de página y debería devolver un módulo de componente de página.
Para que el callback resolve funcione, debes crear un nuevo directorio llamado Pages y almacenar sus vistas del lado del cliente, ya que resolve buscará los componentes dentro del directorio Pages.
Te puede interesar: Descubre 4 de los mejores paquetes de Laravel para instalar
Paso 4: Compila tu proyecto con Laravel Mix
A continuación, ve al archivo webpack.mix.js, y después de mix.js('resources/js/app.js', 'public/js'), añade el código .vue() para finalizar tu proyecto. Ahora, el paso final sería ejecutar npm mix y después de que las dependencias requeridas se instalen automáticamente, puede que tengas que ejecutarlo una vez más. Después de esto, tu proyecto Laravel-Inertia estará listo para su despliegue.
Paso 5: Renderiza tu vista y enrutamiento
Finalmente, toda la configuración de Laravel-Inertia está completa y lista para desplegar. Todo lo que queda es renderizar tus vistas y pasar parámetros a la vista como props. Renderizar tu plantilla de vista frontend es lo mismo que renderizar la plantilla de hoja normal de Laravel que se hace con la ayuda de la función helper view().
En Inertia es lo mismo, la única diferencia es que en lugar de usar la función de ayuda view(), podemos usar la función de ayuda Inertia::render() o inertia(), que toma dos parámetros, el primero es el nombre de la plantilla que puede haber creado dentro de la carpeta resources/js/Pages y el segundo es un array de datos que pasará a tu plantilla de frontend como props. Mira el siguiente ejemplo:
use Inertia\Inertia;
class EventsController extends Controller
{
public function show(Event $event)
{
return Inertia::render('Event/Show', [
'event' => $event->only(
'id',
'title',
'start_date',
'description'
),
]);
}
}Ahora, tu Laravel-Inertia está completamente configurado y tienes Single Page Application (SPA) sin ningún uso de APIs. Inertia también soporta la publicación de datos de formulario, carga de archivos, validación, redirecciones y muchas otras características que facilitan el trabajo.
¡Ahora ya sabes qué es y cómo instalar Inertia en Laravel! Asimismo, si eres un desarrollador full-stack o un desarrollador backend con un equipo de desarrolladores, te recomendamos que utilices Inertia.js, ya que puede reducir mucho tu trabajo. ¡Esperamos que esta información te haya sido de ayuda!
¿Te gustaría aprender a programar? En Coders Free contamos con diversos cursos online con todos los niveles de programación, así como servicios de diseño gráfico para hacer crecer tu negocio. ¡Contáctanos para obtener más información!