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