En los artículos anteriores del Manual del desarrollo de un API con Laravel hemos visto cómo crear una aplicación backend que ofrece servicios de autenticación y registro de usuarios, entre otras cosas. Tenemos por tanto un backend ya listo para experimentar su funcionamiento, pero no podemos usar el navegador tal cual, escribiendo la URL del servicio web, ya que necesitamos enviarle los datos de autenticación o registro.

Entonces, para poder usar este backend lo que vamos a hacer es montar una aplicación frontend del tipo SPA, con la que podremos probar si todo está funcionando correctamente. Sin embargo, montar una SPA no es una tarea trivial y necesitaríamos unas cuantas horas para tenerlo todo listo. Por tanto, lugar de empezar todo desde cero, vamos a utilizar un starter kit que nos proporcione ya la base de la aplicación lista, a partir de la cual luego podríamos personalizar nuestra aplicación para aportar la funcionalidad específica que necesitemos.

En este artículo vamos a poner un poco de orden en todas las alternativas que se nos abren ahora que queremos meter mano en nuestro frontend. Veremos qué tipos de starter kits ofrece Laravel de forma oficial, analizando sus diferencias y veremos cómo instalar, configurar y arrancar un proyecto de SPA ya realizado que te puede servir como punto de inicio para crear tu aplicación frontend que consuma los servicios de autenticación del backen que hemos desarrollado hasta este punto del manual.

Starter Kits oficales de Laravel

Con todas las alternativas de starter kits de aplicaciones frontend que vamos a ver en este artículo podrías montar tu cliente de API, para backends que se hayan realizado de dos modos distintos:

• Mediante Laravel Sanctum y Laravel Fortify, tal como hemos explicado en este manual
• Mediante Laravel Breeze con el scaffolding de API

Notas sobre los starter Kits oficiales de Laravel

Laravel tiene diversos starter kits oficiales desde los que podemos partir para el desarrollo de una aplicación web. Son los siguientes:

• Laravel Breeze
• Laravel Jetstream

Primero queremos aclarar que estos proyectos son ideales para construir un sitio web con Laravel, pues te ofrecen toda la infraestructura ya lista para algunas de las funcionalidades más comunes como el inicio de sesión, registro y asuntos extra como recordar la clave, verificar emails, etc. Pero ambos proyectos son para sitios web tradicionales, multipágina, no para una aplicación frontend moderna con el modelo de SPA. Nuestra idea en este caso es tener un proyecto de SPA (la parte frontend) que sea completamente independiente de la parte del backend.

Si lo que tienes que hacer es un sitio web tradicional, te recomendamos usar Laravel Breeze para un inicio sencillo de tu aplicación. Por otra parte recomensamos Laravel Jetstream para sitios web más sofisticados, siendo que además Jetstream tiene funcionalidades extra como la autenticación a dos pasos.

Si lo que quieres es tener un frontend completamente aislado del backend, entonces te vendrán bien los starter kits basados en stacks frontend que vamos a explicar en este artículo.

Starter Kit oficial de Laravel para una SPA: Laravel Breeze - Next.js Edition

Vamos a comenzar explicando cómo usar el starter kit oficial de Laravel basado en un framework frontend: Laravel Breeze - Next.js Edition

Este es un proyecto realizado con el framework NextJS, que está basado en React. Se trata de una implementación de Laravel Breeze, solo que no está desarrollada con vistas Blade en una aplicación Laravel, sino que está realizada mediante un proyecto frontend puro.

Este proyecto está pensado para servir como starter kit de una aplicación frontend SPA que se comunicará con un backend de API realizado con Laravel, para la autenticación por medio de sesiones y cookies.

Para usar este proyecto tienes que:

• Clonar el repositorio indicado
• Instalar las dependencias con npm

El comando de clonado lo harás con Git y la URL del repositorio. Puedes ver este artículo si tienes dudas sobre cómo clonar repositorios Git.

Una vez clonado, las dependencias las instalas con npm, para lo que es necesario que tengas NodeJS instalado en tu ordenador. Una vez instalado Node, las dependencias las instalas con este comando, lanzado desde la carpeta del proyecto clonado.

npm install

Posteriormente debes arrancar la aplicación NextJS. Esto lo consigues con uno de los scripts npm que tienes en el package.json. Lo ejecutas con este comando de terminal, situado en la carpeta del proyecto.

npm run dev

Además, es posible que necesites un cambio en la URL donde está el backend. Este proyecto espera que esté en localhost:8000 y si no fuera así deberías cambiarlo con estos pasos:

• Entrar en la carpeta "src" del proyecto NextJS
• Hacer una copia del archivo .env.example y llamarla .env
• Cambiar la URL del backend como variable de entorno

Por ejemplo, si estamos trabajando con Sail en el backend tendríamos que quitar el puerto en la URL de localhost.

NEXT_PUBLIC_BACKEND_URL=http://localhost

Conclusión

Si usas este proyecto frontend para implementar una SPA podrás tener un proyecto de aplicación frontend moderna en pocos minutos, con el flujo de autenticación ya desarrollado, lo que te quitará mucho trabajo. La aplicación debería comunicarse con el backend que hemos desarrollado en los pasos anteriores del manual del desarrollo de un API con Laravel Sanctum y Fortify.

Sin embargo, no todo el mundo conoce este modelo de proyecto basado en NextJS o prefiere otros stack de desarrollo de aplicaciones frontend. Existen muchas alternativas muy útiles en el mundo de la web, basadas en otras librerías como Vue o directamente en el estándar Web Components. En el próximo artículo abordaremos algunas alternativas no oficiales que puedes encontar para el inicio de una SPA con autenticación que funciona con un backend Laravel.