HACER CAMBIOS-AL EJEMPLO POR DEFECTO

 Una vez que has configurado tu proyecto con Laravel, Inertia y el Starter Kit elegido, el siguiente paso es entender cómo modificar la página de bienvenida por defecto y empezar a construir tu aplicación. En el ecosistema de Laravel con Inertia, la página de bienvenida ya no es una plantilla Blade tradicional, sino un componente de Vue o React que funciona como el punto de entrada de tu interfaz.

Aquí tienes un tutorial paso a paso para hacer tus primeros cambios.

🚀 Entendiendo la Estructura del Proyecto

Con el Starter Kit de Laravel (que incluye Vue/React e Inertia), la página de bienvenida que ves al acceder a la raíz de tu proyecto ya no está en resources/views/welcome.blade.php. En su lugar, es un componente de frontend gestionado por Inertia.

• El punto de entrada del frontend: El archivo resources/js/app.js (o app.ts si usas TypeScript) es donde se configura y arranca la aplicación Inertia.

• El componente principal: La página de inicio se encuentra en resources/js/Pages/Welcome.vue (si usas Vue) o resources/js/Pages/Welcome.jsx (si usas React).

• La ruta: La ruta '/' en routes/web.php devuelve Inertia::render('Welcome'), que es el comando que le dice a Inertia que cargue el componente Welcome.

✏️ Cómo Hacer Cambios en la Página de Bienvenida

Para modificar la página de bienvenida, solo tienes que editar el componente correspondiente en resources/js/Pages. Los cambios se reflejarán casi en tiempo real gracias a Vite.

Aquí te muestro cómo hacerlo con un ejemplo usando Vue 3 (el proceso es análogo con React):

1. Abre el archivo del componente: Navega a resources/js/Pages/Welcome.vue.

2. Edita la plantilla: El contenido visual está dentro de la etiqueta <template>. Puedes modificarlo libremente. Por ejemplo, para cambiar el título de "Laravel" a "Mi Aplicación con Inertia", busca el <h1> y edita su texto.

3. Añade lógica: Puedes usar la sección <script setup> para añadir lógica de JavaScript, como estados reactivos o funciones. Por ejemplo, para crear un contador:

vue

<template>
    <div>
        <h1 class="text-3xl font-bold">Mi Aplicación con Inertia</h1>
        <p>Has hecho clic {{ count }} veces</p>
        <button @click="increment" class="mt-4 px-4 py-2 bg-blue-500 text-white rounded">
            Haz clic aquí
        </button>
    </div>
</template>

<script setup>
import { ref } from 'vue';

// Estado reactivo
const count = ref(0);

// Función para incrementar el contador
const increment = () => {
    count.value++;
};
</script>

4. Asegúrate de que Vite esté corriendo: Para ver los cambios, es imprescindible tener el servidor de desarrollo de Vite en funcionamiento con el comando npm run dev. Si el comando está corriendo, al guardar el archivo, la página se actualizará automáticamente en tu navegador.

⚙️ Configuración de Pruebas con Jest (o Vitest)

El Starter Kit de Laravel normalmente no incluye un entorno de pruebas para el frontend. Para probar tus componentes de Vue o React, tienes que configurarlo manualmente.

Aunque hay referencias a cómo configurar Jest en proyectos Laravel más antiguos, la tendencia actual en el ecosistema de Laravel y Vite es usar Vitest, ya que está diseñado para funcionar perfectamente con Vite y tiene una configuración mucho más sencilla.

Pasos generales para configurar pruebas (basado en Vitest, que es la opción más moderna): 

1. Instalar Vitest y sus dependencias:

   bash

   npm install --save-dev vitest @vitest/ui jsdom @testing-library/vue

2. Crear un archivo de configuración: Crea vitest.config.js o vitest.config.ts en la raíz de tu proyecto. Puedes extender la configuración de Vite, pero asegúrate de incluir el plugin de Vue y el entorno jsdom.

3. Añadir un script de prueba a tu package.json:

   json

   "scripts": {
       "test": "vitest",
       "test:ui": "vitest --ui"
   }

4. Crear tus pruebas: Coloca tus archivos de prueba (por ejemplo, resources/js/__tests__/Welcome.spec.js) y comienza a escribir pruebas para tus componentes.

💡 Consejos Adicionales

• Recursos del Starter Kit: El Starter Kit de Laravel ya incluye algunas dependencias y configuraciones iniciales, como Tailwind CSS y el plugin de Vite para Vue/React, lo que te ahorra mucho trabajo de configuración manual.

• Problema común: En versiones anteriores, a veces el middleware de Inertia no se añadía automáticamente al archivo bootstrap/app.php. Si tu aplicación de Inertia no funciona, verifica que \App\Http\Middleware\HandleInertiaRequests::class esté en el grupo de middleware web dentro de ese archivo.

En resumen, para empezar a crear tu aplicación, todo se centra en modificar y crear nuevos componentes dentro de la carpeta resources/js/Pages. Con Vite ejecutándose, los cambios son inmediatos, lo que hace que el proceso de desarrollo sea muy ágil y eficiente.

Espero que este tutorial te sirva para dar tus primeros pasos. ¿Hay alguna parte en la que te gustaría que profundice más?