Instalación de dependencias

Requisitos

• Estar dentro del sistema operativo Linux con acceso a la terminal

• Una aplicación Laravel funcional

• Contar con internet*

• Tener instalado npm (seguir la guía oficial de instalación)

• Tener instalado composer (seguir la guía oficial de instalación)

Procedimiento

Para descargar librerías en proyecto, usualmente se acude a páginas de internet como github o se descargan directo desde las páginas de la librería, un ejemplo es datatables.

Sin embargo, esta forma de trabajo se vuelve tediosa al migrar proyectos de una computadora a otra. Debido a esto, se desarrollaron herramientas que ayudan a gestionar paquetes de javascript (npm, pnpm, yarn), php (composer), python (pip, conda, poetry) entre otros lenguajes.

1. Abrir la terminal de comandos (dentro de VSCode o cualquier terminal instalada).

2. Instalar pnpm. Esta es una extensión de las capacidades de npm que sustancialmente mejora la velocidad de descarga y link a la aplicación.

    # actualizar npm a la versión más reciente
    npm install -g npm
    # instalar pnpm de forma general para usarlo en cualquier proyecto
    npm install -g pnpm
   

3. Navegar al sitio en el que se ubicó el proyecto.

    cd /var/www/aplicacion-laravel
   

4. Descargar las librerías necesarias de la aplicación una vez tenemos las herramientas necesarias y conexión a internet.

    pnpm i jquery
    pnpm i bootstrap@latest
    pnpm i @fortawesome/fontawesome-free
    composer require realrashid/sweet-alert
   

   💡

   Debido a la lógica de gestión de dependencias de pnpm, las librerías que descargues son almacenadas en tu carpeta home (/home/user/.pnpm), por lo que no es necesaria la conexión a internet al reusar paquetería existente.
   💡

   npm y pnpm son gestores de paquetes muy potentes con varias herramientas útiles, revisa su documentación para conocer todos los comandos.

5. Uso de la paquetería PHP

   Debido a que PHP es un lenguaje interpretado del lado del servidor, puedes hacer uso de las librerías directamente desde tus controladores, modelos o comandos debido a que cuando instalas un paquete (composer require), Composer genera o actualiza el archivo vendor/autoload.php y este archivo es incluido en tu index.php de la aplicación laravel y se carga en automático al ejecutar php artisan tinker.

   Esto permite el uso de cualquier librería sin necesidad de configuración adicional, solo tienes que usar la importación en el lugar en el que la requieras.

    # importación
    use RealRashid\SweetAlert\Facades\Alert;
    # uso
    Alert::success('Título de la alerta', 'Contenido');
   

6. Uso de la paquetería JavaScrypt

   Este tipo de herramientas son un poco más difíciles de integrar con una aplicación laravel debido a que se requiere de un empaquetador para comprimir el código y sean usadas de forma óptima. Esto nos ayuda a mantener un bajo peso de los archivos necesarios e impacta directamente sobre la experiencia del usuario.

    // archivo app/resources/js/bootstrap.js
    // este archivo viene con la aplicación laravel, sirve como punto de entrada para código js
    import axios from 'axios';
    window.axios = axios;
   
    window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
   

    // ejemplo para incluir librerías:
   
    // importación
    import '@fortawesome/fontawesome-free/css/all.min.css'
    import 'bootstrap/dist/css/bootstrap.min.css'
    import 'choices.js/public/assets/styles/choices.min.css'
    import axios from 'axios'
    import Alpine from 'alpinejs'
    import * as bootstrap from 'bootstrap'
    import $ from 'jquery'
    import Swal from 'sweetalert2'
    import Choices from 'choices.js'
   
    // hacer visible el código al navegador
    window.$ = window.jQuery = $
    window.axios = axios
    window.Alpine = Alpine
    window.bootstrap = bootstrap
    window.Swal = Swal
    window.Choices = Choices
   
    // configuraciones adicionales, específico de cada librería
    window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'
    Alpine.start()
   

   💡

   Nota que jquery está siendo asignado antes que cualquier otra cosa, esto es a veces necesario debido a que otras librerías dependen de jquery.
   💡

   Nota que es recomendable importar primero assets css para que estén disponibles cuanto antes y la interfaz no dé “rebotes” al cargar primero el html y luego el css.

7. Empaquetar el código

    # iniciar el servidor de desarrollo para tener acceso a HRM (Hot Module Replacement) que reemplaza solo los cambios para no reiniciar toda la aplicación
    pnpm dev
    # para construir el proyecto, esto comprime los archivos css y js con ofuscación para que no sean humanamente legibles y estén optimizados para navegadores
    pnpm build
   

8. Incluir los assets resultantes en el HTML

    <!DOCTYPE html>
    <html lang="{{ app()->getLocale() }}">
    <head>
        <!-- Character encoding -->
        <meta charset="UTF-8">
        <!-- Viewport for responsive design -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Compatibility with Internet Explorer -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        ...
        <!-- Styles and Scripts -->
        @vite('resources/css/app.css')
    </head>
    <body>
        ...
   
        @vite('resources/js/app.js')
        ...
    </body>
    </html>