Contexto

Como parte de un curso que estaba tomando sobre el uso de Angular, desarrollé DashTool, un front con funciones de login, registros, crud, administración de usuarios, permisos, módulos, posts, y crud para cada módulo. En éste artículo explicaré cómo levantar el proyecto ed Api desarrollado en laravel 12, y el front, desarrollado en angular 20.

Requerimientos

Los requerimientos para levantar ambos proyectos son los siguientes:

• PHP > 8.2 (XAMPP, ó PHP nativo instalado, o bien docker si lo usan)
• MariaDB ó MySQL (Cualquiera que tengan instalado incluyendo el que viene con XAMPP)
• Composer
• Node >22
• Git

Repositorios

• Front Angular DashTool
• API Laravel

Arquitectura Front Angular - API Laravel

Un mejor entendimiento de cómo funcionarán ambos proyectos, aquí el diagrama de explicación: Se usará Angular para el front, el cual se conectará al API desarrollada en Laravel, y el API se conecta a la base de datos de MariaDB:

Levantar API Laravel

Se inicia levantando el API en Laravel 12, se asume que ya se tiene instalado el entorno de PHP, ya sea de manera nativa o bien con XAMPP.

Clonar el proyecto:

git clone https://gitlab.com/linuxitos/api-rest-laravel-12-sanctum.git

Desde la terminal ir al directorio del proyecto para instalar/actualizar dependencias de paquetes con el siguiente comando:

composer install

Configurar la conexión a la base de datos:

Abrir el archivo .env o bien, renombrar el archivo example.env a .env y modificar la sección de la base de datos.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3307
DB_DATABASE=BDApiDashTool
DB_USERNAME=root
DB_PASSWORD=yy64r

Realizar la migración de base de datos:

php artisan migrate:fresh --seed

Y si todo ha sido correcto, entonces se podrá levantar el api de la siguiente manera:

php artisan serve

Y al abrir el navegador en la url : http://127.0.0.1:8000

Y con eso el API está arriba:

Si requieren la documentación del API, está en http://127.0.0.1:8000/api/documentation en el mismo proyecto:

Levantar Front Angular

Clonar el proyecto del repositorio:

git clone https://gitlab.com/linuxitos/dashtool-angular-v20.git

Entrar al directorio e instalar dependencias:

npm i

Abrir el archivo de la ruta src/app/conststnt.ts y ajustar la url del API a donde debe apuntar:

export const Constant = {
	EN_KEY: "UksopDJk88433LkskdKJERIkjdoi76kj",
	URL_API: "http://127.0.0.1:8000/api/v1/",
}

Y ahora a levantar el proyecto con el comando:

ng serve

Y por defecto iniciará en la ruta: http://localhost:4200/dashtool

Y listo, con éso se tiene el API y el front funcionando.