En el artículo anterior del Manual de desarrollo de un API con Laravel comenzamos a hablar de la parte del frontend. Si bien es cierto que al desarrollar con Laravel nos ocuparemos de la parte del backend, ellos sí te ofrecen un starter kit basado en Next.JS que nos permite ahorrar muchas horas de desarrollo, al darte la base de código necesaria para comunicar con Laravel en todo lo que respecta a los procesos de login de usuarios y registro.

Sin embrargo, puede que no a todo el mundo le guste Next.JS y React, por lo que en este artículo queremos ofrecer referencias y consejos de alternativas para trabajar con otros starter kits que ocupan stacks de tecnologías frontend distintas.

Alternativa no oficial de starter Kit basada en Vue

Comenzamos presentando una alternativa de proyecto con Vue para realizar la autenticación en backends creados con Laravel Sanctum te sugerimos consultar este proyecto: https://github.com/filippetrovicAT/breeze-nuxt

En este caso tenemos una alternativa basada en Nuxt, muy inspirada en el funcionamiento del proyecto oficial de Laravel, que estaba basado en NextJS. Se trata de ofrecer lo mismo que ofrece Laravel Breeze pero en una aplicación completa hecha en un proyecto frontend del estilo de SPA.

Comunica de manera sencilla con el API realizada con Laravel Sanctum, de modo que en pocos minutos tendrías la estructura de aplicación frontend enganchada con el API de Laravel y capaz de realizar todo el proceso de registro y login de usuarios, autorización, etc.

Alternativa de SPA basada en Web Components y Lit

Además quiero presentar aquí una alternativa más cercana al Javascript nativo, ya que usa el estándar de Web Components y tiene menos dependencias de tecnologías frontend, apenas con la librería Lit que nos permite desarrollar Custom Elements que funcionan en cualquier navegador y framework.

Esta alternativa además tiene unos grados de acabado un poco más sofisticados, ya que implementa también el flujo para la verificación del email de los usuarios, que no está disponible en otros starter kits.

Este proyecto también está altamente inspirado en el repositorio oficial de Laravel, aunque con un stack de tecnologías pegado al propio Javascript, lo que permite tener menos código Javascript de terceros. Con ello conseguimos mayor rendimiento, menor peso de aplicación y a la vez se reduce el consumo de batería en dispositivos, ya que que no se usa un framework, solamente la micro-librería Lit, que tiene un peso menor de 6 Kb (Gzipped).

Como herramienta frontend se usa además Vite, que es una maravilla para la experiencia de desarrollo, ya que es sencillo y ligero.

El repositorio de este proyecto es https://github.com/Polydile/dile-app

Para usar este proyecto realizamos los siguientes pasos:

Clonar el repositorio

git clone https://github.com/Polydile/dile-app.git

Ahora nos metemos en la carpeta del proyecto que acabamos de clonar y luego tenemos que ejecutar npm (o cualquier otro gestor) para instalar las dependencias:

npm install

Ahora, para arrancar el servidor de desarrollo que nos ofrece Vite, debemos ejecutar el script dev:

npm run dev

Este proyecto espera que tu backend esté en http://localhost. Si esa no es la URL de tu backend, entonces necesitas crear una variable de entorno en el archivo .env llamada VITE_BACKEND_URL con el valor de la URL donde se encuentre tu backend. Podría ser algo como esto:

VITE_BACKEND_URL=http://localhost:8000

Existe un archivo llamado .env_example que tiene esa variable de configuración. Puedes copiar ese archivo en la misma carpeta donde se encuentra, con el nombre .env y cambiar el valor de la variable de entorno por el que tú necesites.

Starter Kit para API Laravel con Electron

Antes de acabar hay otro proyecto que querría comentar basado en Electron.js que también nos puede ofrecer una base de código interesante, en este caso para el desarrollo de una aplicación de escritorio que usa un backend de API desarrollado con Laravel.

Este proyecto lo podemos encontrar en https://github.com/Polydile/dile-app-electron y está bastante maduro, aunque sigue siendo un proyecto en vías de desarrollo.

La diferencia con los proyectos anteriores es que este basado en Electron está pensado para trabajar con autenticación basada en tokens, en lugar de autenticación basada en cookies de sesión.

Como hemos dicho ya, Laravel Sanctum permite trabajar tanto con cookies de sesión para aplicaciones statefull y con tokens JWT para el modelo de API Stateless. El trabajo con tokens es el adecuado para aplicaciones móviles o proyectos donde pensamos que va a ser esencial asuntos como la escalabilidad.

Este proyecto de starter kit tiene una base de código bastante completa, aunque le falta todavía la documentación. También usa Lit como librería.

Conclusión

Con este artículo has podido encontrar diversas alternativas de proyectos frontend preparados para ejercitar un backend de API con Laravel Sanctum basado en sesiones e incluso para proyectos Laravel Sanctum basados en tokens JWT. Los dos primeros tambien funcionarían con el scaffolding de Laravel Breeze para API.

Son alternativas con diversos stacks de tecnologías frontend, con frameworks como Nuxt o ElectronJS y con librerías como Lit.

Si estamos trabajando con el scaffolding de Laravel Breeze para API yo prefiero la opción basada en Web Components y Lit, por ser la alternativa más cercana al Javascript Vanilla. Al trabajar con el estándar de Web Components me siento muy cómodo porque es un estándar al que esperamos vida larga, como todos los estándares. Además esa opción es la que ofrece mayor cantidad de funcionalidades, ya que implementa vistas para recordar la clave y verificar el email de los usuarios.

Además, el proyecto basado en Electron es un buen ejemplo sobre cómo se tendría que desarrollar un proyecto frontend donde tengamos que autenticarnos con un API basada en tokens en lugar de sesiones.