Blog / Laravel / Instalación de Laravel 8 y JetStream
Con Laravel 8 vino la posibilidad de usar
el panel de administración JetStream, lo que parece ser
una versión libre y simplificada de Laravel Nova.
JetStream incluye login, registro, verificación de email,
sistema de doble autenticación, manejo de sesiones,
soporte API usando Laravel Sanctum y opcionalmente,
control de grupos (teams).
Reemplaza a la anterior autenticación de Laravel
JetStream se instalará con LiveWire o con Inertia
y está maquetado con el
framework CSS: Tailwind CSS.
LiveWire vs Inertia.js
JetStream puede instalarse con LiveWire o Inertia,
y solo con uno de los dos.
Ver más...
Para resumir, LiveWire se orienta a componentes
y es la opción más cómoda si sueles desarrollar con Blade.
Provee de interactividad propia de SPAs JS, sin que haya que usar JS.
El renderizado se produce en el servidor, y es una herramienta propia de Laravel,
fuera de Laravel no vas a poder usarla.
Inertia se orienta al desarrollo de páginas
con frameworks JS: Vue, React, etc., en teoría... Actualmente,
lo que provee JetStream está hecho en Vue,
para usar otro framework como ReactJs hay que reemplazar
todo lo que hay en Vue.
El
siguiente artículo (en inglés)
contiene una comparativa en profundidad.
Instalando Laravel JetStream con Inertia
Este tutorial se basa en Ubuntu.
Para ahorrar tiempo
revisa mis conclusiones.
Vamos a necesitar una
versión de PHP 7.3 o superior*
y NodeJs instalado.
El plan es crear una "web clásica"
en la parte pública, que es más fácil de optimizar en cuanto a SEO,
rendimiento, accesibilidad, ...
y hacer la parte privada de la aplicación con ReactJs
aprovechando JetStream. Como no se proporciona actualmente
una estructura de base para este Framework, no usaré Inertia,
que está todavía "un poco verde" (versión actual de
inertiajs/inertia-laravel": "^0.2.12),
pero explicaré como se instala.
Instalar Laravel
Suelo tener una versión "limpia" de Laravel en disco,
por si alguna vez no dispongo de Internet y voy a hacer alguna prueba.
Entonces, instalaré primero Laravel sin JetStream,
y más tarde lo añadiré a una copia de esta instalación base.
Voy a usar
Composer,
el comando, para un proyecto llamado "laravel8", será:
composer create-project --prefer-dist laravel/laravel laravel8
Voy a cambiar algunos permisos:
cd laravel8
sudo chmod 775 -R bootstrap/cache
sudo chmod 775 -R storage/
Inicio un repositorio de Git:
git init
git add --all
git commit -m 'first commit'
Puede ser un buen momento, para hacer cambios y adaptar
la instalación a tu proceso de trabajo, por ejemplo:
yo cargo localmente la fuente nunito y cambio cosas
en la configuración como el idioma por defecto. Nuevo commit.
Es el momento de abrir la página de inicio de Laravel y ver que funciona.
Mi ruta es: http://localhost/laravel/laravel8
Instalar JetStream
Hago una copia completa, incluyendo permisos, de mi instalación "limpia".
En el directorio donde se ubican los proyectos Laravel:
sudo cp -r -p laravel8 laravel8-jetstream
Creo una base de datos para la aplicación y añado
los datos de acceso en el fichero .env.
Podemos usar la URL con localhost (http://localhost/laravel/laravel8-jetstream)
o crear un
Virtual host.
Ahora sí, JetStream.
Nos situamos dentro del directorio de la app
y ejecutamos en orden los siguientes comandos:
composer require laravel/jetstream
php artisan jetstream:install inertia
npm install && npm run dev
php artisan migrate
Si vamos a usar los "teams" de JetStream,
al comando de instalación artisan anterior se le añade el flag:
php artisan jetstream:install inertia --teams
Para usar LiveWire usamos el siguiente comando
y como antes, podemos usar o no los teams:
php artisan jetstream:install livewire --teams
Ahora la página de inicio incluye dos enlaces en la esquina
superior derecha: login y register.
En pantallas de menos de unos 575px no aparecen.
Podemos registrar un usuario para acceder al Dashboard,
al que nos lleva directamente.
NOTA: si no empezaste creando un virtualhost
creo que necesitarás pasar a la sección:
Problemas encontrados.
Problemas encontrados
El principal problema es que al ser todo bastante reciente
muchos errores no aparecen en las búsquedas, o tenemos antiguos
resultados sin relación...
Tendremos errores nuevos que hay que resolver incluso arreglando
errores de sintaxis en los vendors.
Y cuando se suceden, lo que la solución que te ofrece JetStream
ya no es tan atractiva en términos de ahorro de tiempo...
Ver más...
En la primera instalación use LiveWire y me apareció
un error de sintaxis tras la instalación:
syntax error, unexpected ')' en una de las clases de
Illuminate
El framework indica donde.
Corregido cargo el Dashboard.
Al instalar con Inertia la página del Dashboard
me aparecio en blanco. No hay logs de error en el framework,
entramos en el mundo JS...
La consola indica dos errores,
no se cargan app.css y app.js.
Después de
borrar cache de Laravel y navegador, refrescar la página,
vuelta a la página de inicio (ahora los accesos login / register
cambiaron por dashboard), etc. Salta el mismo error que con LiveWire,
este sí genera logs. Los limpio y corrijo la clase correspondiente.
Volvemos a la página del dashboard en blanco.
Las rutas de los recursos no coinciden con la de la aplicación,
por ejemplo: http://localhost/css/app.css debería ser:
http://localhost/laravel/laravel8-jetstream/puclic/css/app.css.
Cambio la ruta para .env / APP_URL, config/app.php / url
y config/sanctum.php / stateful. No funciona.
Abro "resources/views/app.blade.php". Los dos ficheros
con rutas incorrectas se "imprimen" con:
mix('css/app.css')
mix('js/app.js')
Reemplazar mix()
por asset()
permite visualizar el Dashboard, pero nada más...
Inertia controla las rutas, y su ruta base es incorrecta.
Creo un
virtualhost y todo se soluciona.
Voy a editar el perfil se usuario, cargo una foto y obtengo el error: Illuminate\Contracts\Container\BindingResolutionException
Target [Laravel\Fortify\Contracts\UpdatesUserProfileInformation] is not instantiable.
Hasta aquí voy a probar JetStream + Inertia por el momento.
¿Mi aplicación está usando versi o LiveWire?
Si tienes varias instalaciones de prueba en algun momento
puedes no saber que se está usando en cada proyecto.
Fichero de configuración de jetstream:
"config/jetstream.php", valor de 'stack'.
