Implementación de Sistema de Autenticación en Laravel con Bootstrap

Clase 12 de 37 • Curso de Introducción a Laravel 6

Resumen

¿Cómo crear un nuevo proyecto con Laravel?

Crear un proyecto en Laravel es el primer paso para empezar a trabajar con sus poderosas herramientas y funcionalidades. En este proceso, comenzaremos desarrollando un sistema de autenticación y registro utilizando un componente especial proporcionado por Laravel, conocido como el sistema Laravel/Jetstream.

Paso a paso para crear el proyecto

Creación del proyecto: Utiliza el siguiente comando en tu terminal para crear un nuevo proyecto llamado highway.
```
laravel new highway
```
Abrir con tu editor de código: Una vez que el proyecto se haya creado correctamente, ábrelo en tu editor de código favorito.
Instalación del componente Jetstream: Con el proyecto abierto, el siguiente paso es instalar el componente Jetstream. Usa Composer con el siguiente comando:
```
composer require laravel/jetstream
```

Configuración del entorno de desarrollo y producción

Entorno de desarrollo: Instala Jetstream en tu ambiente de desarrollo y no de producción.
Transición a producción: Cuando todo esté listo para producción, solo sube el resultado final al servidor, sin las dependencias de desarrollo.

¿Cómo instalar el sistema de autenticación?

Laravel ofrece un sistema sencillo para implementar autenticación en tu aplicación. A través del uso del comando artisan y la opción de Jetstream, podemos integrar un sistema robusto y flexible para manejar el login de usuarios.

Opciones de instalación de autenticación

Existen varios frameworks con los que puedes integrar Jetstream para tu sistema de autenticación, tales como Bootstrap, Vue y Reactive Reach. Aquí te mostraremos cómo:

Instalación inicial:
```
php artisan jetstream:install {stack}
```
Reemplaza {stack} por la opción deseada: inertia o livewire.
Instalación con estilos y autenticación: Si deseas añadir estilos y funcionalidad de autenticación básica, por ejemplo, con Bootstrap:
```
php artisan jetstream:install livewire --teams
```
Verificación de rutas y vistas: Después de ejecutar el comando, verifica que se hayan creado nuevas rutas y vistas mediante los directorios correspondientes y la adición de un controlador de ejemplo.

Ejecución de comandos para completar la instalación

Instalación de dependencias: Usa NPM para instalar las dependencias de front-end necesarias.
```
npm install && npm run dev
```
Publicación de recursos: Los recursos JavaScript y CSS se compilan y se colocan en la carpeta public para su uso en el frontend de tu proyecto.

¿Cuáles son las consideraciones finales?

El uso de Jetstream permite a los desarrolladores ahorrar tiempo y esfuerzos al crear sistemas de autenticación y registro desde cero. Sin embargo, siempre es esencial conocer la existencia de estas herramientas y sus alternativas:

Diferentes stacks: Aprende a usar vite en lugar de mix si JEStream varía el método de compilación.
Componentes base: Si trabajas con frameworks como Vue o Reach dentro de Laravel, Jetstream puede ayudarte a establecer un componente base para la autenticación.

Te animo a explorar diferentes comandos y compartir tus hallazgos o dudas en la sección de comentarios. ¡Nos vemos en la próxima lección para seguir aprendiendo juntos!

Manuel Ojeda

student•

Antes de realizar el comando npm run dev les aconsejo que utilicen npm outdate, este último comando analizará y te dirá que dependencias están desactualizadas, y como último utilizan ``npm update para actualizar dichas dependencias.

Con eso ya podrás empezar el proyecto desde cero con las últimas versiones de tus dependencias.

Italo Morales Fantone

teacher•

Excelente aporte :)

Rafael Ángel Girón Girón

student•

Gracias

Michelle Estefanía Arias López

student•

Pasos:

Instalar node.js, disponible en: https://nodejs.org/es/download/
En la carpeta del proyecto:

composer require laravel/ui --dev

Para estilos y autenticación

php artisan ui bootstrap --auth

Para compilar

npm install &amp;&amp; npm run dev

José Darío Bedoya Ortiz

student•

El ultimo comando necesita instalar nodejs.

María Sierra

student•

Trabajando con el componente Laravel/UI

Este es un componente creado por Laravel para el registro y autenticación de usuarios de un sistema Web. Esta es la línea de comando que utilizaremos:

composer require laravel/ui --dev

Lo vamos a instalar de forma local en el lado del desarrollo.

Para instalar el sistema de registro y login utilizamos los siguientes comando:

# instalación sin formato
php artisan ui:auth

# instalación con el sistema de vue.js
php artisan ui vue --auth

# instalación con el sistema de react.js
php artisan ui react --auth

# instalación con Bootstrap
php artisan ui bootstrap --auth

Después, de ejecutar el comando se van a crear las vistas, el código de la ruta en el archivo web y por último un controlador.

Para que pueda verse el bootstrap tenemos que descargar las dependencias de JS, con los siguientes comandos:

# 1er comando para instalar las dependencias
npm install

# 2do comando para ver las dependencias desactualizadas
npm outdate

# 3er comando para actualizar las dependencias 
npm update

# 4to comando para compilar los archivos de bootstrap
npm run dev

Omar Villafuerte

student•

Buen aporte!

Oscar Aguilar López

student•

Gracias por el aporte!!!

Gustavo Jara

student•

Nota:

Se tiene que tener instalado NodeJS, podemos hacerlo desde -> https://nodejs.org, ya viene con npm.

Italo Morales Fantone

teacher•

Gracias por aportar

Eduardo Rafael Romero Bernal

student•

Ricardo Andres Zambrano Cuaicuan

student•

Buen aporte

Cristian Pisco Intriago

student•

Si están trabajando con la versión 6 de laravel, para instalar laravel/ui escriben lo siguiente:

composer require laravel/ui="^1.0" --dev

Mauricio Cristan

student•

muchas gracias me funciono

Patricia Antelo López

student•

Muchas gracias porque a mi me daba error. Sinceramente el profesor podría tener en cuenta estas cosas.

Jose Barboza

student•

composer require laravel/ui --dev php artisan ui bootstrap --auth se crearán rutas y controladores de ejemplo. instalar NodeJs aqui en windows con next y ejecutar estos comandos en cmd modo admin. npm install npm outdate npm update npm run dev

Ricardo Andres Zambrano Cuaicuan

student•

Buen aporte

Diego Fernando López Díaz

student•

Yo utilice la version 7.0 de laravel y me salio error. Lo solucione con el comando composer require laravel/ui "^2.0"

Rafael Leonardo Florez Diaz

student•

Muchas gracias estaba teniendo muchos problemas para instalar ui con esta versión

Javier Amaya Patricio

student•

Mucha gracias el comando me funciono perfecto.

Carlos Eduardo Gomez García

teacher•

Si has estado utilizando Laravel 7 para seguir el curso, es el momento de dejarlo, ahora si hay que empezar a usar Laravel 8, pues el paquete de composer laravel/ui ahora solo funciona en Laravel 8, si tratas de instalarlo en alguna versión anterior de Laravel te dará un error.

Eso si, siempre teniendo en cuenta los nuevos cambios que surgieron en Laravel 8

Cristian Dario Bastos

student•

solo es instalar la version 2.4 en laravel 7 y funciona

composer require laravel/ui:^2.4 --dev

Moises Alvarado

student•

me paso lo mismo sigue vigente :

composer require laravel/ui:^2.4

Martín S. Campos

student•

Al crearlo con vue, solo instala vue y crea un componente listo para usarse, en si los modulos que forman parte de la autenticacion no utilizan vue. Al hacerlo tambien por defecto me pone bootstrap

Andres Roberto Coello Goyes

student•

REACT JS ✌😍

Italo Morales Fantone

teacher•

Raúl López Hernando

student•

Les comento, yo estoy usando la version de Laravel 8 y tenia una serie de problemas. Les comparto los pasos para instalar el UI y que no les de error. Espero que les resulte util

Hay que agregar el UI por medio de composer

composer require laravel/ui

En mi caso utilizo Bootstrap asi que ejecutamos el siguiente comando para integrar el Bootstrap al UI

php artisan ui bootstrap --auth

Instalamos NPM npm install

4.Ejecutamos NPM npm run dev

**IMPORTANTE - En este momento les dara fallo por la version de SASS. Deben de ir al "package.json" y cambiar la version de "sass-loader" a la 10. Lo demas lo dejan igual

"devDependencies": { "axios": "^0.21", "bootstrap": "^4.6.0", "jquery": "^3.6", "laravel-mix": "^6.0.6", "lodash": "^4.17.19", "popper.js": "^1.16.1", "postcss": "^8.1.14", "resolve-url-loader": "^4.0.0", "sass": "^1.32.11", "sass-loader": "^10" }

Volvemos a realizar npm install para que baje los programas que necesite

6.Ejecutamos npm run dev para compilar

7.Corremos el proyecto y ya tendriamos nuestra zona de login y register funcionando con sus correspondientes estilos

carolina galvis arango

student•

yo tuve muchos problemas con el npm, tuve que actualizar el node 16 y npm 8.1 para lograr los comandos sin error

Julian David Alzate Cuervo

student•

Me funcionó en laravel 9, muchas gracias

Anderson Meza

student•

En mi caso no tengo instalado node.js y para darle diseño con bootstrap solo agregué la referencia a los estilos de bootstrap en la plantilla del login que está en la ruta "resources\views\layouts\app.blade.php ". los estilos los pueden sacar desde https://getbootstrap.com/![Captura de pantalla 2021-07-14 173743.png](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202021-07-14%20173743-9cd5665b-a3f1-485d-ad3c-0fad65b6d1f0.jpg)

Isabel Carolina Pineda Amaya

student•

Realmente tuve que hacerlo asi ,porque instalando nojs, me da error al ejecutar npm install , en Laravel 8. Gracias por tu aporte

Diana Flores

student•

Por que necesitamos usar npm en este caso? Por que no usar composer siempre?

Kevin Fiorentino

student•

Al tratarse de frontend, Laravel/UI debe estar utilizando dependencias que se encuentran en NPM, por eso su necesidad. Composer no podría resolver esas dependencias.

Francisco Javier Cervantes Candelario

student•

Para la versión 8.X de laravel :

1 - Instalar laravel/breeze

composer require laravel/breeze --dev

2 - Instalar el sistema de vue o react de login

php artisan breeze:install vue
 
// Or...
 
php artisan breeze:install react

3 - Compilar y ejecutar migraciones

npm install
npm run dev
php artisan migrate

Lesly Suárez

student•

Para bootstrap, laravel 6 La primera vez que lo hice tuve que insertar el link de bootstrap, porque cuando compile no me arrojo la carpeta public/css, pero ya se cual fue mi error: Estoy usando la version 6 asi que es:

composer require laravel/ui:^1.0 --dev //esto es super importante

php artisan ui bootstrap --auth

npm install

npm run dev

Y es todo, despues de que termine veran que tienen las carpetas de js y css. Uso windows 10 con la terminal de git bash

Carlos Daniel

student•

Muchas gracias! excelente aporte

Carlos Daniel

student•

Si les marca error al querer instalar el paquete de UI es porque descarga la versión 2 de Laravel/ui la cual no es compatible con Laravel 6, por lo que hay que descargar la versión 1 con el siguiente comanto

composer require laravel/ui="1.*"

Oscar Stevens Cuartas Bejarano

student•

al usar el comando NPM RUN DEV obtendo muchos errores y no funciona que puede ser??

`> @ dev /home/vagrant/CUARSA_PROJECTS/laravelSenior

npm run development

@ development /home/vagrant/CUARSA_PROJECTS/laravelSenior cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

sh: 1: cross-env: not found npm ERR! code ELIFECYCLE npm ERR! syscall spawn npm ERR! file sh npm ERR! errno ENOENT npm ERR! @ development: cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js npm ERR! spawn ENOENT npm ERR! npm ERR! Failed at the @ development script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in: npm ERR! /home/vagrant/.npm/_logs/2020-09-04T16_19_46_454Z-debug.log npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! @ dev: npm run development npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the @ dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in: npm ERR! /home/vagrant/.npm/_logs/2020-09-04T16_19_46_499Z-debug.log `

José EduardoJaimes Romano

student•

Hola yo tambien tenia ese problema y estuve buscando diferentes soluciones, pero la mas efectiva fue desinstalar Node.js y vovler a instalar la versión mas actualizada

Brian Sánchez Izquierdo

student•

Hola, me pasaba exactamente lo mismo y lo que hice fue actulizar mi version de node y npm.

Emanuel Gomez

student•

Y como soluciono esto: DevTools failed to parse SourceMap: http://localhost/blog/public/js/popper.js.map

Manuel Ojeda

student•

Al final no pasa nada si no cuentas con ese archivo, al final unicamente es un warning que nos da el navegador

Joel Marquez

student•

Se me instalan los enlaces de login y register, pero al momento de hacerles click, me aparece pagina no encontrada. Revise y si se me instalaron las carpetas y las vistas, pero no entiendo porque no se visualiza el formulario. :(

Stephania Zambrano Guerra

student•

Hola, pudiste resolver lo de la página no encontrada?

Joel Marquez

student•

Si lo resolvi, reinstale nuevamente el componente por consola.