Cómo configuro un nuevo proyecto Laravel

Después de usar Laravel por un tiempo, he recopilado las herramientas que me hacen más productivo para crear sitios y aplicaciones web. Las herramientas indispensables al comenzar cualquier nuevo proyecto son Folio con Volt, Prettier y Flux UI.

A continuación, explico cómo instalar y configurar cada una de estas herramientas.

#Laravel new

Para crear un nuevo proyecto Laravel, utilizo el instalador de Laravel con el comando:

laravel new <nombre_del_proyecto>

El instalador realiza una serie de preguntas, como qué starter kit instalar. Generalmente no utilizo ninguno al comenzar, ya que prefiero trabajar primero en el prototipo de la aplicación y, cuando sea necesario, implemento la autenticación de usuarios. Esto evita que el proyecto se llene rápidamente de componentes Blade o funcionalidades innecesarias, como suele suceder al usar un starter kit.

Después, elijo Pest como framework de pruebas y configuro la base de datos para usar SQLite.

#Folio y Volt

Utilizo Volt y Folio en la mayoría de mis proyectos porque permiten crear prototipos rápidos y facilitan iterar rápidamente al construir un sitio web o una aplicación web.

Folio lo uso principalmente para evitar definir rutas en el archivo routes/web.php o crear controladores. Con Folio, las rutas se generan automáticamente con base en la estructura de carpetas y archivos dentro de resources/view/pages/.

Por otro lado, Volt permite evitar crear archivos separados para componentes Livewire y sus vistas correspondientes. Todo el componente se define en un único archivo Blade, que incluye tanto el componente como la vista. Además, puedo usar componentes anónimos para crear rápidamente acciones dentro de páginas Folio sin necesidad de crear un archivo de componente Livewire.

Para instalar Folio y Volt, primero se instalan sus dependencias con Composer:

composer require laravel/folio livewire/volt

Después, ejecuto los comandos de instalación de cada uno:

php artisan folio:install && php artisan volt:install

Para probar que Folio funcione, creo una página index de Folio:

php artisan make:folio index

Finalmente, elimino cualquier ruta del archivo routes/web.php.

Al visitar el sitio del proyecto en http://127.0.0.1:8000, debería mostrarse una página en blanco.

#Prettier

Para mantener los archivos PHP y Blade organizados y consistentes, utilizo Pint y Prettier. Pint viene instalado por defecto en cualquier instalación nueva de Laravel, pero Prettier no.

Para instalar Prettier, se deben instalar las dependencias prettier-plugin-blade, prettier y prettier-plugin-tailwindcss:

npm install --save-dev prettier-plugin-blade@^2 prettier prettier-plugin-tailwindcss

Después, creo un archivo de configuración para Prettier .prettierrc:

{
    "printWidth": 120,
    "semi": true,
    "singleQuote": true,
    "tabWidth": 4,
    "trailingComma": "all",
    "plugins": ["prettier-plugin-blade", "prettier-plugin-tailwindcss"],
    "overrides": [
        {
            "files": ["*.blade.php"],
            "options": {
                "parser": "blade"
            }
        }
    ]
}

Esta configuración habilita los plugins de Blade y Tailwind CSS para Prettier y establece el número de espacios para la indentación en 4.

También creo un archivo .prettierignore para especificar los archivos o ubicaciones que deben ignorarse:

node_modules
dist
.env*
vendor/
/vendor
public/
.git
**/.git
package-lock.json
composer.lock

Para configurar Prettier con Blade mediante el archivo .blade.format.json, ajusto el plugin de Prettier para que utilice Laravel Pint:

{
    "useLaravelPint": true
}

Finalmente, asegúrate de que VS Code esté configurado para dar formato a los archivos Blade con esta configuración:

{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "[blade]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "prettier.documentSelectors": [
        "**/*.blade.php"
    ]
}

#Flux

Flux es una de las herramientas que utilizo para avanzar rápidamente en mis proyectos, ya que ofrece elementos UI consistentes y atractivos, eliminando la necesidad de diseñarlos manualmente. Además, las APIs de los componentes son intuitivas y se integran bien con Livewire.

Para instalar Flux, añado la dependencia con Composer:

composer require livewire/flux

Luego, lo activo con el comando de Artisan:

php artisan flux:activate

Si se utiliza la versión PRO de Flux, solicitará el correo electrónico y la licencia para continuar con la activación.

Después, creo un nuevo componente llamado AppLayout que contendrá el HTML básico del proyecto y registrará los assets CSS y JS de Flux:

artisan make:component app-layout

Por defecto, la vista del componente se crea en resources/views/components/app-layout.blade.php. Sin embargo, prefiero moverla a resources/views/layouts/app.blade.php. Para ello, edito el componente y cambio la ubicación de la vista.

En la vista del componente AppLayout, añado el siguiente HTML:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>{{ config('app.name') }}</title>
 
        @vite('resources/css/app.css')
    </head>
    <body>
        {{ $slot }}
    </body>
</html>

Posteriormente, añado los estilos y scripts de Flux:

<head>
    ...
    @fluxStyles
</head>
 
<body>
    ...
    @fluxScripts
</body>

Flux incluye vistas en la carpeta vendor, por lo que ajusto el archivo de configuración de Tailwind CSS para incluir estas rutas:

export default {
    darkMode: 'selector',
 
    content: [
        ...,
        "./vendor/livewire/flux-pro/stubs/**/*.blade.php",
        "./vendor/livewire/flux/stubs/**/*.blade.php",
    ],
 
    ...
};

Finalmente, Flux recomienda usar la fuente Inter, que registro en el layout:

<head>
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=inter:400,500,600&display=swap" rel="stylesheet" />
</head>

Teniendo Folio, Volt, Prettier y Flux en nuestros proyectos facilita enormemente el desarrollo y nos permite enfocarnos en lo que realmente importa: la funcionalidad de nuestro sitio o app.