28. Kits de inicio: Laravel Breeze y Laravel Jestream

En este capítulo de Laravel, te presentamos dos kits de inicio muy populares para proyectos web en Laravel: Laravel Breeze y Laravel Jetstream. Laravel Breeze es un kit de inicio minimalista que te permite crear rápidamente una aplicación web con autenticación de usuario y vistas básicas. Laravel Jetstream, por otro lado, es un kit de inicio más completo y personalizable que incluye características avanzadas como autenticación de dos factores y soporte para múltiples equipos.

 

Aprenderás cómo instalar y configurar estos kits de inicio en tu proyecto Laravel, y cómo personalizarlos según las necesidades específicas de tu proyecto. Además, exploraremos las diferencias entre ambos kits de inicio y cuál es el más adecuado para diferentes tipos de proyectos web. Con los conocimientos adquiridos en este capítulo, estarás en una posición sólida para utilizar cualquiera de estos kits de inicio para tus proyectos web en Laravel.

Tema anterior Siguiente tema

10 comentarios

Inicia sesión para comentar

Iniciar sesión

Comentarios:

  • Hector Bances

    Hector Bances hace 5 meses

    GRACIAS

  • Nestor Perez

    Nestor Perez hace 6 meses

    Hola Victor, te felicito y te agradezco mucho la forma en que proporcionas tu conocimiento, estoy aprendiendo mucho, habia visto otros cursos pero este es el mejor sin duda!!! Gracias.

  • David

    David hace 1 año

    Ambos kit se deben instalar al principio? Es decir, si hemos seguido el ejemplo de nuestra plataforma de cursos que se iba haciendo durante el curso no podemos instalarlo sobre ese proyecto ya existente?

    • Victor Arana Flores hace 1 año

      Hola David, es posible instalarlo despues, pero es posible que falle ciertas partes de tu aplicacion. 

      Ambos paquetes modifican la estructura de tu proyecto, y quizas sin darte cuenta termine sobreescribiendo algunos cambios que hayas hecho. Por eso se recomienda que lo instales al principio, pero nada te impide instalarlo despues.

  • Angel Alberto Atencio Caldera

    Angel Alberto Atencio Caldera hace 1 año

    Me sale este error he intentado solucionarlo pero no he podido…

    • Victor Arana Flores hace 1 año

      Hola Angel, crea un virtualhost como enseño en el video, y asegurate que en tus variables de entorno, en la variable APP_URL, coloques el dominio que estes usando.

    • John Mejia hace 9 meses

      Según veo, este error aparece cuando la URL de consulta de la aplicación contiene subdirectorios (ej. http://localhost/example-app/public/) y por tanto la ruta de consulta a livewire debiera ser algo como “http://localhost/example-app/public/livewire/livewire.js”.

      Yo intenté modificando la APP_URL y ASSET_URL (también definida en el archivo .env) pero ninguna de las opciones me funciona para corregir el enrutamiento correcto al enlace “livewire.js”. Lo que me funcionó fue lo siguiente:

      Publicar el archivo de configuración de Livewire usando 

      php artisan vendor:publish --tag=livewire:config”

      Modificar o adicionar la siguiente línea al final del archivo de configuración en config/livewire.php:

      'asset_url' => '/example-app/public/livewire/livewire.js',

      donde “/example-app/public/” debe cambiarse para apuntar a la URL pública de la aplicación.

      Con esto deberá funcionar correctamente la visualización de la página. Sin embargo, presentará nuevamente errores al intentar hacer cambios al perfil del usuario ya que la URL de actualización apuntará a “http://localhost/livewire/update” y no a la ruta deseada.

      Para corregir este caso, editamos el archivo routes/web.php y adicionamos las siguientes líneas:

      Livewire::setUpdateRoute(function($handle) {
	// Remueve "livewire/livewire.js" de la ruta en el config
    $path_livewire = dirname(dirname(config('livewire.asset_url')));
    return Route::get($path_livewire . '/livewire/update', $handle);
});

      Y listo, con esto ya debe funcionar correctamente la aplicación ya que la URL de actualización se convierte a “http://localhost/example-app/public/livewire/update”.

      Enlaces de referencia a consultar:

  • Eduardo Martínez

    Eduardo Martínez hace 1 año

    Buenas! Muchas gracias por el trabajo realizado en este curso. Tengo una duda que no he podido aclarar por el momento. Nada más ejecuto `php artisan breeze:install` Me aparece un prompt que me solicita en in inglés “Wich  stack would you like to install?” con las siguientes opciones:

    - blade
    - react
    - vue
    - api

    Tengo la vaga impresión de que debo seleccionar blade pero no las tengo todas conmigo.

    Por lo pronto voy a cancelar la instalación de breeze y realizar un backup del proyecto en caso de metedura de pata.

    ¡Gracias por vuestra atención! Y en especial a ti, Victor. ¡Eres un maquina!


    [Editado el 19/05/2023]

    Después de hacer una instalación limpia de Laravel 10 con Breeze, he podido observar que que seleccionar la opción blade es el equivalente a cómo se instalaba en versiones anteriores. Después de ésta, hay un par de preguntas más, pero en mi opinión no requiren de mayor conocimiento para saber decidir la respuesta.

  • Walter

    Walter hace 2 años

    ? Alpine

    Ya sea que instalemos Jetstream o Breeze estaremos usando Alpine que es una librería JS que nos permite agregar interactividad a nuestra web. Cuenta de esto lo da el archivo resources/js/app.js

    import './bootstrap';

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();

     

     

     

  • Walter

    Walter hace 2 años

    ? Laravel Jetstream

    Es un paquete más complejo que Breeze (hecho netamente con Blade y Tailwind) ya que al momento de su instalación debemos escoger entre Livewire o Inertia.

    Podemos crear un nuevo proyecto Laravel para luego hacer la instalación del kit de inicio Jetstream:

    laravel new jetstream

    O directamente crear un nuevo proyecto Laravel junto a Jetstream:

    laravel new jetstream --jet

    ? Instalación

    composer require laravel/jetstream

    Instalar Jetstream con Livewire

    php artisan jetstream:install livewire

    Luego

    npm install
npm run build

    Teniendo creada la base de datos y configurada en Laravel:

    php artisan migrate

    Abrimos el proyecto en 127.0.0.1:8000 con:

    php artisan serve

    ? Personalización

    Foto de perfil

    En el archivo de configuración config\jetstream.php descomentamos la línea:

    Feactures::profilePhotos(),

    y vemos dónde se guardarán las imágenes:

    'profile_photo_disk' => 'public',

    Las imágenes se guardan en la ruta /storage/app/public/profile-photos/ pero debemos usar la ruta /public/ para poder acceder a las imágenes, entonces creamos un acceso directo a la carpeta profile-photos de la siguiente manera:

    php artisan storage:link

    Si utilizamos php artisan serve para levantar nuestro servidor tendríamos que configurar el archivo .env con:

    APP_URL=http://127.0.0.1:8000

    En cambio si usamos un servidor virtual configuramos con el nombre que hayamos elegido:

    APP_URL=http://jetstream.test

    En este archivo también deberíamos configurar lo siguiente:

    FILESYSTEM_DISK=public

    Términos y Política de Privacidad

    En el archivo de configuración config\jetstream.php descomentamos la línea:

    Feactures::termsAndPrivacyPolicy(),

    Los cuales se pueden configurar en los archivos resources/markdown/policy.md y resources/markdown/terms.md

     

  • Walter

    Walter hace 2 años

    ? Laravel Breeze

    Implementación mínima y simple de todas las funciones de autenticación de Laravel.

    Creamos un nuevo proyecto para probar el kit de inicio Breeze:

    laravel new breeze

    ?Instalación

    composer require laravel/breeze --dev

    Luego

    php artisan breeze:install

    Esto nos crea varios archivos, entre ellos:

    • postcss.config.js
    • tailwind.config.js

    Todas las vistas que se agregan se han diseñado con Tailwind.

    Como Breeze trabaja con sesiones debemos ejecutar la migración para actualizar nuestra base de datos (que ya debemos tener creada y configurada en Laravel):

    php artisan migrate

    Luego, como utilizamos Vite, debemos ejecutar:

    npm install
npm run dev

     

  • Juan Ramos

    Juan Ramos hace 2 años

    Importante: Antes de ejecutar Jetstream se debe instalar Nodejs.

    Importante: Jetstream solo debe instalarse en nuevas aplicaciones de Laravel. Intentar instalar Jetstream en una aplicación Laravel existente dará como resultado un comportamiento y problemas inesperados.

     

    Ejecutar dentro del directorio del proyecto el comando: composer require laravel/jetstream

    Después requerimos la instalación de livewire con el comando php artisan jetstream:install livewire para finalizar la instalación debemos instalar las dependencias NPM:

    • npm install
    • npm run build
    • php artisan migrate

     

    Es recomendable cambiar en el archivo .env el FILESYSTEM_DISK a “public” para que los archivos cargados sean guardados en esa ruta por default:

    FILESYSTEM_DISK=public

     

    Y agregar tu IP local, mas puerto de conexión en la sección:

    APP_URL=http://xxx.xxx.xx.x:8000

     

    También podemos hacer la instalación de un nuevo proyecto de Laravarel con Jetstream incluido a través de la terminal utilizando el comando: laravel new example --jet

    • Jerónimo Sánchez hace 2 años

      El único problema que me dio, instalando JetStream después de seguir los anteriores vídeos, fue que en la tabla user me faltaron por crear los campos current_team_id y profile_photo_path. Pero hice un “php migrate rollback” para dar marcha atrás a la última migración realizada y a la migración 2014_10_12_200000_add_two_factor_columns_to_users_table.php le añadí en el método/function up() lo siguiente: 

       

                  $table->foreignId('current_team_id')

                          ->after('remember_token')

                          ->nullable();


       

                  $table->string('profile_photo_path', 2048)

                          ->after('current_team_id')

                          ->nullable();


      Luego hice un “php artisan migrate” y a la migración anterior le comenté las dos líneas anteriores para crear los campos current_team_id y profile_phpto_path. 

       

      Así conseguí los campos que me faltaban.

       

  • Antonio Hernandez

    Antonio Hernandez hace 2 años

    Te felicito, me gusta la forma en la que explicas cada tema, terminando este curso si duda alguna compraré el de Laravel Eloquent de Cero a Experto.

    • Victor Arana Flores hace 2 años

      Tambien te va gustar bastante el otro curso.