Rutas, layouts y middleware

Tu primera página necesita tres decisiones: en qué archivo de rutas va, en qué layout se renderiza y qué entrada de la barra lateral la abre. Esta guía responde las tres y lista el middleware que ya corre en cada petición para que no lo agregues dos veces.

Archivos de rutas

bootstrap/app.php conecta los archivos. Laravel carga routes/web.php, routes/api.php, routes/console.php y routes/channels.php por su cuenta; el resto se carga en el callback then: con el middleware, prefijo y nombre de abajo.

La verificación de salud responde en /up.

ensure.subscribed se agrega a /app sólo cuando el paquete de facturación está instalado y BILLING_CORE_ENABLED y BILLING_USER_ENABLED no son false; sin facturación el alias no existe y una persona con sesión llega a /app sin suscripción. Ve Activa planes y facturación.

Agrega tus propias rutas

Las páginas del producto van en routes/app.php; heredan el prefijo /app y el nombre app.. Registra un componente Livewire como página completa:

use App\Livewire\App;

Route::livewire('/orders', App\Orders\Index::class)->name('orders');
Route::livewire('/orders/{order}', App\Orders\Show::class)->name('orders.show');

Eso es /app/orders, con nombre app.orders. config('app.home_route') es /app, el lugar al que /home redirige y en el que aterriza el flujo de inicio de sesión; cámbialo en config/app.php cuando el producto empiece en otro lado. Los CRUD de administración van en routes/admin.php como Route::front('Order'), que registra cada ruta del recurso App\Front\Resources\Order; ve El panel de administración.

Middleware en cada petición web

bootstrap/app.php agrega seis clases al grupo web, en este orden, y una séptima cuando el paquete de facturación está activo.

Todos se saltan las peticiones de actualización de Livewire, así que corren una vez por página, no una vez por interacción.

trustProxies(at: '*') confía en cualquier proxy, así que el esquema y la IP del cliente salen de los encabezados reenviados por el balanceador frente a la app.

Alias

App\Http\Middleware\IsPWABuilder está atado sólo a /: cuando APP_PWA está activo y la petición viene de la app móvil empaquetada, redirige a /app en lugar de mostrar la landing.

Convenciones de Livewire

config/livewire.php fija dónde va cada cosa.

Layouts

Cada layout vive en una carpeta layouts/ dentro de una carpeta de diseño y se busca por la misma cadena que los componentes de diseño: primero resources/views/components/tu-proyecto/layouts/, al final la genérica resources/views/components/project/layouts/, y gana la primera que lo tiene. Se sigue llamando por su nombre, layouts.app o layouts.sidebars.admin; Hazlo tuyo explica cómo cambiar uno en tu carpeta.

layouts/base.blade.php es el cascarón HTML: el <head> con el título, el favicon, los assets de Vite y los scripts de WireUI, luego <x-notifications>, <x-dialog>, la capa de carga, la sección content-base y el anfitrión de modales. Los demás layouts lo extienden:

Los layouts público y de ayuda ponen en la pestaña del navegador el nombre de la página: pasa title a layouts.web o layouts.help y la pestaña dice Título - Nombre de la app. Sin él, el layout público muestra solo el nombre de la app y el de ayuda Centro de ayuda.

Una dirección que no existe muestra resources/views/errors/404.blade.php dentro de layouts.auth: un No encontramos esa página traducido con un botón Volver al inicio. El botón lleva a un visitante a /, a un administrador al panel de administración y a cualquier otro usuario con sesión al panel de la app. Cambia ese archivo para cambiar la página; un 404 que tu código lance con abort(404) también la muestra.

El layout de la app elige su barra lateral por el primer segmento de la URL: layouts/sidebars/app.blade.php bajo /app, admin.blade.php bajo /admin, account.blade.php bajo /account; una sección para la que ninguna carpeta tiene menú no muestra ninguno. Un componente renderiza migas de pan pasándolas al layout:

public function render()
{
    return view('livewire.app.orders.show')->layout('layouts.app', [
        'breadcrumb' => [
            ['label' => __('Orders'), 'url' => '/app/orders'],
            ['label' => $this->order->number],
        ],
    ]);
}

layouts/partials/breadcrumbs.blade.php imprime un enlace de inicio a la raíz de la sección y una entrada por elemento; el último es la página actual y no lleva URL. Una pantalla cuyo camino debe empezar en otro lado le pasa al layout un title para ese primer enlace y una url para él, como hacen las pantallas de soporte bajo /admin/support para que su camino empiece en su propia sección.

Agrega una entrada a la barra lateral

Cada barra lateral renderiza <x-design::sidebar-menu>, respaldado por App\Classes\SidebarMenu. Fusiona los elementos que escribes en el archivo Blade con los recursos de Laravel Front de la sección que responden true a showOnMenu() y pasan la política viewAny para la persona con sesión, ordena todo por order y agrupa por menu_group. Los elementos sin grupo forman el bloque sin encabezado de arriba. resources en false deja fuera los recursos de Laravel Front, como hace la barra de administración con quien no tiene el rol de administrador, y un elemento puede traer su propio active, que gana sobre el que se calcula por su URL, para una entrada cuya dirección es prefijo de la de otra.

Para agregar una página a la barra lateral del producto, edita layouts/sidebars/app.blade.php en tu carpeta de diseño, copiado del genérico la primera vez:

<x-design::sidebar-menu
    :items="[
        ['name' => 'Dashboard', 'url' => '/app', 'icon' => 'home', 'exact' => true, 'order' => 1],
        ['name' => 'Orders', 'url' => '/app/orders', 'icon' => 'shopping-bag', 'order' => 2],
        ['name' => 'Reports', 'url' => '/app/reports', 'icon' => 'chart-bar', 'menu_group' => 'Analytics', 'show' => auth()->user()->can('viewAny', Report::class)],
    ]"
    :groups="[
        ['name' => 'Analytics', 'order' => 1],
    ]"
/>

Un recurso de Front declara su propio menu_group, menu_order e icon, así que un CRUD aparece en la barra lateral de administración sin tocar el archivo Blade.

La capa de carga

resources/views/components/project/loading-overlay.blade.php es un spinner de pantalla completa montado una vez en el layout base y controlado por resources/js/app.js. Se muestra solo en la navegación con wire:navigate, en clics a enlaces normales que salen de la página, cada vez que la página se descarga (una recarga completa, un formulario enviado a la manera clásica; los eventos beforeunload y pagehide del navegador) y mientras se envía un formulario con wire:submit. Las navegaciones también dibujan una barra de progreso delgada arriba. Después de 3 segundos agrega un mensaje y un botón Recargar, para que una petición atorada siempre tenga salida.

Para un botón que no es el envío de un formulario, actívala con el atributo spinner en el elemento que lleva wire:click. El atributo sólo cuenta en un elemento que tiene wire:click o wire:target él mismo; en un contenedor alrededor del botón no hace nada:

<x-button wire:click="retryPayment" spinner :label="__('Retry payment')" />

Para una subida de archivo, pon spinner en el <input type="file"> mismo, no en el botón que abre el selector, porque la petición arranca en el change del input; la capa se queda mientras el archivo se sube.

No agregues spinner a campos wire:model.live, filtros, pestañas ni búsquedas: la capa bloquea toda la pantalla y esas interacciones deben sentirse instantáneas.

El cambio de idioma

GET /locale/{locale}, con nombre locale, revisa el código contra las llaves de config('app.languages') y responde 404 a cualquier otro. Para un visitante guarda la elección en la sesión, que LocaleMiddleware lee en la siguiente petición; para una persona con sesión no escribe nada, porque su idioma sale del perfil. En ambos casos redirige de regreso, o a la misma página pública en el idioma elegido cuando el enlace nombra una. <x-language-switcher> renderiza un enlace por idioma con locale_url(), sólo para invitados fuera del centro de ayuda; en el centro de ayuda se muestra a todos y enlaza directo la copia de la página en cada idioma. Ve Idiomas y traducciones.