Trabajando con el componente Laravel/UI

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.

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

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

Nota:

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

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

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

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

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

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

REACT JS ✌😍

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

1. Hay que agregar el UI por medio de composer

composer require laravel/ui

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

php artisan ui bootstrap --auth

1. 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”
}

1. 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

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/

Así ha quedado resource al correr el comando

php artisan ui vue --auth

!

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

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

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.*" 

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
`

		Sistema log in laravel 6

Se instala el paquete de rutas de autenticación, en la zona de desarrollo

Composer require laravel/ui:^1.0 - -dev

Sistema log in laravel 7
Se instala el paquete de rutas de autenticación, en la zona de desarrollo

Composer require laravel/ui - -dev

Ha estas alturas solo tenemos el sistema de rutas, aun no emos habilitados el sistema de registro y login, para ello vamos a lo siguiente: (los siguientes comandos pueden ser usados en las dos versiones 6 y 7 de laravel)
Habilita Sistema de autenticación sin agregar estilos

php artisan ui –-auth

Habilita Sistema de autenticación agregando a Bootstrap como estilos de diseño

php artisan ui bootstrap –-auth

Habilita Sistema de autenticación agregando a react como estilos de diseño

php artisan ui react –auth

Habilita Sistema de autenticación agregando a vue como estilos de diseño

php artisan ui vue --auth 

Cuando tenemos ya nuestra interfaz de login con el comando laravel ui, debemos de tener instalado Node Js, para poder ejecutar los comando siguientes

npm install

npm run dev

cómo puedo hacer un login con redes sociales?

Laravel everywhere and anywhere

Si les muestra un error al instalar laravel/ui puede ser porque ya está en su versión 2 y solo es compatible con Laravel 7.

Prueben instalando la versión 1 de laravel/ui con el siguiente comando:

composer require laravel/ui:^1.0 --dev

Actualmente se puede usar jetstream, pero es bueno ver opciones así como laravel/ui para aprender más sobre este gran framework

para descargar node js en windows
https://nodejs.org/es/

Para los que no les instale el paquete, si están usando Laravel 6 usen el siguiente comando

composer require laravel/ui:^1.0 --dev

Hola, yo hice lo sguiente

1. instale la version 6*,:
   composer create-project --prefer-dist laravel/laravel:^6.*

2)instale 2) instalé laravel ui:
composer require laravel/ui=“1.*” – dev

3)verique composer.json y veo que está instalada la dependencia (en require dev)

1. instalé login básico de bootstrap y autentificacion con php artisan, esto crea rutas y vistas para autentificación de usuarios:
   Php artisan ui bootstrap --auth

5)Luego se instalan los estilos:
npm install (aquí presente algunos mensajes de deprecated)

1. continué con npm run dev y se y todo quedó aparentemente bien, ,me falta hacer pruebas de registro pero visualmente los estilos quedaron correctos.

Comparto los mensajes de error porque me quedé con la duda:

1. Ejecuté el comando npm outdate y esto fue lo que me salió, interesante porque compara las versiones de las dependencias:

1. luego ejecuté npm update, pero me generó errores, y nmpm audit también, relacionados con el mismo mensaje deprecated.

Como les digo todo al final me funcionó pero me hubiuera gustado saber que hacer para corregir estos errores, vi por ahi en npm audit que hay una opción de fuerza bruta pero no estoy muy relacionado aun con este comando.

Que opinan compas… alguna opcion para ajustar estos errores o me podria generar inconvenientes en alguna funcion?

cuando escribo npm install me sale lo siguiente:

npm WARN deprecated popper.js@1.16.1: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
loadDevDep:sass-loader    ▀ ╢█████████████████████████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░╟
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm ERR! Linux 4.15.0-117-generic
npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "install"
npm ERR! node v8.10.0
npm ERR! npm  v3.5.2
npm ERR! code EMISSINGARG

npm ERR! typeerror Error: Missing required argument #1
npm ERR! typeerror     at andLogAndFinish (/usr/share/npm/lib/fetch-package-metadata.js:31:3)
npm ERR! typeerror     at fetchPackageMetadata (/usr/share/npm/lib/fetch-package-metadata.js:51:22)
npm ERR! typeerror     at resolveWithNewModule (/usr/share/npm/lib/install/deps.js:456:12)
npm ERR! typeerror     at /usr/share/npm/lib/install/deps.js:457:7
npm ERR! typeerror     at /usr/share/npm/node_modules/iferr/index.js:13:50
npm ERR! typeerror     at /usr/share/npm/lib/fetch-package-metadata.js:37:12
npm ERR! typeerror     at addRequestedAndFinish (/usr/share/npm/lib/fetch-package-metadata.js:82:5)
npm ERR! typeerror     at returnAndAddMetadata (/usr/share/npm/lib/fetch-package-metadata.js:117:7)
npm ERR! typeerror     at pickVersionFromRegistryDocument (/usr/share/npm/lib/fetch-package-metadata.js:134:20)
npm ERR! typeerror     at /usr/share/npm/node_modules/iferr/index.js:13:50
npm ERR! typeerror This is an error with npm itself. Please report this error at:
npm ERR! typeerror     <http://github.com/npm/npm/issues>

npm ERR! Please include the following file with any support request:
npm ERR!     /home/luciano/ui/npm-debug.log

Alguien mas le pasó? hasta ahora no pude solucionarlo.

En un momento leí por ahí que en nuevas versiones dejarían de soportar Bootstrap y demás para irse a Tailwind CSS por completo, pero se ve que siguieron dándole soporte, ya que incluso en la versión 8 de Laravel con la que estoy probando esto, funciona todo bien, sigue funcionando todo bien… Probé con VUE y también instala todo, aunque debo destacar de que instala VUE v2.x y no la v3.x que ya está disponible hace mucho, y en el caso de Bootstrap, instala la última version de la serie 4.x, que no esta mal, pero ya está disponible la 5.0.1… De todos modos está bueno que le sigan dando soporte… Otra cosa a destacar es que, mas allá de instalar vue.js, el login y registro de usuarios funciona sin vue.js, es decir, no cambió las rutas ni nada, ya que no hace requests tipo ajax con vue…

A mi me funcionó este comando para instalar laravel/ui en laravel 6: composer require laravel/ui=“1.*” --dev
Y no me funcionó: composer require laravel/ui:^1.0 --dev

No compila y genera carpetas css y js dentro de ui/public, no encuentra desactualizado ningun componente de nodejs y solo marcar Err en casi cada linea cuando se ejecuta el npm run dev pero el log indica que posiblemente no sea a causa del npm… alguna idea de por donde buscarle para que compile los css y js bien? Gracias

Para las personas que usan Homestead y al intentar usar el comando “npm install” les arrojará un error el cual proviene de VirtualBox, es decir, por el momento Homestead no provee una solución a dicho error. La solución por la que opté fue instalar NodeJs en mi maquina local y correr el mismo comando de “npm install” dentro de mi proyecto. Espero sea de ayuda

el comando de la cosola de Larvel nos permite instalar el sistema de login con diferente tipos de fronted
podemos implementar con boostrap, react o vue
el comando seria

php artisan ui bootstrap --auth 

Laravel realmente facilita el desarrollo con PHP, ya viene con un sistema completo para autenticar usuarios.

Wow! ,estoy cambiando mi opinión totalmente de booststrap

con react
y hace lo mismo pero tambien en js crea el archivo example.js
import React from ‘react’;
import ReactDOM from ‘react-dom’;

function Example() {
return (
<div className=“container”>
<div className=“row justify-content-center”>
<div className=“col-md-8”>
<div className=“card”>
<div className=“card-header”>Example Component</div>

                    <div className="card-body">I'm an example component!</div>
                </div>
            </div>
        </div>
    </div>
);

}

export default Example;

if (document.getElementById(‘example’)) {
ReactDOM.render(<Example />, document.getElementById(‘example’));
}

no entiendo de donde saco ese comando de instalacion, en la documentacion oficial no lo veo sino este:

php artisan ui vue --auth

de donde lo saco profe?

Si tuvieran problemas con las dependencias despues del npm update. Prueben actualizando la version de nodejs. Si estan en windows descargen el instalador actual.

php artisan ui react --auth =)

Para instalar laravel/ui para laravel 7.x =>
composer require --dev laravel/ui="^2.0"

Hola, estoy usando xampp, en linux mint 20 (basado en ubuntu), para completar las configuraciones necesarias para laravel ui tengo que instalar npm, opté por instalar entonces node.js, mi duda es: esto se instala dentro de la carpeta de proyecto (para xampp seria dentro de htdocs>miproyecto)? o de forma global, simplemente siguiendo los pasos de instalación para linux?

Para trabajar con este componente escribimos el comando:

Composer require laravel/ui --dev

–dev quiere decir para instalar en la zona de desarrollo y no en producción. Esto se puede observar en el archivo componer.json donde va a aparecer en el objeto require-dev como “laravel/ui”: “1.1”

Con esto tengo disponible en mi proyecto todo el sistema de rutas.

Si se escribe php artisan en la consola se puede ver que se instaló el comando ui que sirven para tener disponible el sistema de login y registro a nivel de rutas y de vistas
Ahora podemos escribir php artisan ui:auth para que se instale correctamente el sistema pero sin ningún estilo o framework de javascript

Pero tenemos 3 variantes:

php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth

Al ejecutar uno de estos comandos se crea :
Las rutas de autenticación
Una ruta y controlador de ejemplo
Se crean las vistas correspondientes, las carpetas auth y layouts.
Además , se crea un controlador de ejemplo que podemos usar o eliminar, y que utiliza el middleware de auth.

Luego ejecutamos:

 npm instal

Luego ejecutamos npm run dev, esto crea desde de public una carpeta de css y js
Básicamente todo lo que tenemos en resources/css y js se compila y se guarda a la carpeta pública, a la carpeta js y css. Esto es así porque tenemos un archivo webpack.mix.js donde se tiene esta configuración.

En laravel 8.x me dio error de instalación el ui es necesario antes ejecutar este comando:

composer upgrade

espero les sirva

Si no les logra descargar la libreria utilicen el comando

 composer require laravel/ui "^2.*"

Esto es debido a que laravel 7 no es compatible con la version 3 de ui que es la versión mas reciente ui 3 es compatible con laravel 8.
La version compatible con laravel 7 es 2.*, siendo que el simbolo * dice que descargue el ultimo release de la versión 2.
Suerte!!

A ver como, como? puedo usar React dentro de Laravel? porque? con que propósito?

Installe el apartado de auth con Vue.js y he quedado fascinado!

es preferible utilzar bootstrap, a mi me resulta más fácil poque tenia conocimiento en eso.

🤯🤯🤯

soy yo o mi carpeta de laravel pesa como 500mb ?