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

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

Profesor

Excelente aporte :)

Rafael Ángel Girón Girón

Gracias

Michelle Estefanía Arias López

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 && npm run dev

José Darío Bedoya Ortiz

El ultimo comando necesita instalar nodejs.

María Sierra

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

Buen aporte!

Oscar Aguilar López

Gracias por el aporte!!!

Gustavo Jara

Nota:

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

Italo Morales Fantone

Profesor

Gracias por aportar

Eduardo Rafael Romero Bernal

Ricardo Andres Zambrano Cuaicuan

Buen aporte

Cristian Pisco Intriago

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

muchas gracias me funciono

Patricia Antelo López

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

Jose Luis Barboza Gonzales

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

Buen aporte

Diego Fernando López Díaz

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

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

Javier Amaya Patricio

Mucha gracias el comando me funciono perfecto.

Carlos Eduardo Gomez García

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

solo es instalar la version 2.4 en laravel 7 y funciona

composer require laravel/ui:^2.4 --dev

Moises Alvarado

me paso lo mismo sigue vigente :

composer require laravel/ui:^2.4

Martin Campos

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

REACT JS ✌😍

Italo Morales Fantone

Profesor

Raúl López Hernando

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

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

Me funcionó en laravel 9, muchas gracias

Anderson Meza

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

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

Diana Flores

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

Kevin Fiorentino

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.

Eduardo Razo Cobián

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

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

Muchas gracias! excelente aporte

Carlos Daniel

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

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

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

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

Emanuel Gomez

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

Manuel Ojeda

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

Joel Marquez

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

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

Joel Marquez