{"id":4596,"date":"2025-06-21T18:04:56","date_gmt":"2025-06-22T00:04:56","guid":{"rendered":"https:\/\/linuxitos.com\/main\/?p=4596"},"modified":"2025-06-21T18:04:57","modified_gmt":"2025-06-22T00:04:57","slug":"dashtool-angular-20-laravel-12","status":"publish","type":"post","link":"https:\/\/linuxitos.com\/main\/dashtool-angular-20-laravel-12\/","title":{"rendered":"DashTool Angular 20 &amp; Laravel 12"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2025\/06\/laravel-angular.png\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"380\" src=\"https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2025\/06\/laravel-angular.png\" alt=\"\" class=\"wp-image-4597\" srcset=\"https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2025\/06\/laravel-angular.png 800w, https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2025\/06\/laravel-angular-300x143.png 300w, https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2025\/06\/laravel-angular-768x365.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><\/figure>\n\n\n\n<h1 class=\"wp-block-heading\">Contexto<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Como parte de un curso que estaba tomando sobre el uso de Angular, desarroll\u00e9 DashTool, un front con funciones de login, registros, crud, administraci\u00f3n de usuarios, permisos, m\u00f3dulos, posts, y crud para cada m\u00f3dulo. En \u00e9ste art\u00edculo explicar\u00e9 c\u00f3mo levantar el proyecto ed Api desarrollado en laravel 12, y el front, desarrollado en angular 20.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Requerimientos<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Los requerimientos para levantar ambos proyectos son los siguientes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>PHP > 8.2 (XAMPP, \u00f3 PHP nativo instalado, o bien docker si lo usan)<\/li>\n\n\n\n<li>MariaDB \u00f3 MySQL (Cualquiera que tengan instalado incluyendo el que viene con XAMPP)<\/li>\n\n\n\n<li>Composer<\/li>\n\n\n\n<li>Node >22<\/li>\n\n\n\n<li>Git<\/li>\n<\/ul>\n\n\n\n<h1 class=\"wp-block-heading\">Repositorios<\/h1>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/gitlab.com\/linuxitos\/dashtool-angular-v20\" target=\"_blank\" rel=\"noreferrer noopener\">Front Angular DashTool<\/a> <\/li>\n\n\n\n<li><a href=\"https:\/\/gitlab.com\/linuxitos\/api-rest-laravel-12-sanctum\" target=\"_blank\" rel=\"noreferrer noopener\">API Laravel<\/a><\/li>\n<\/ul>\n\n\n\n<h1 class=\"wp-block-heading\">Arquitectura Front Angular &#8211; API Laravel<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Un mejor entendimiento de c\u00f3mo funcionar\u00e1n ambos proyectos, aqu\u00ed el diagrama de explicaci\u00f3n: Se usar\u00e1 Angular para el front, el cual se conectar\u00e1 al API desarrollada en Laravel, y el API se conecta a la base de datos de MariaDB:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2025\/06\/arquitectura-front-angular-api-laravel-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"400\" src=\"https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2025\/06\/arquitectura-front-angular-api-laravel-1.png\" alt=\"\" class=\"wp-image-4605\" srcset=\"https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2025\/06\/arquitectura-front-angular-api-laravel-1.png 800w, https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2025\/06\/arquitectura-front-angular-api-laravel-1-300x150.png 300w, https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2025\/06\/arquitectura-front-angular-api-laravel-1-768x384.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><\/figure>\n\n\n\n<h1 class=\"wp-block-heading\">Levantar API Laravel<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Clonar el proyecto:<\/p>\n\n\n\n<pre style=\"background: rgb(54, 63, 72); border-radius: 6px; border: 0px; box-sizing: border-box; color: white; font-family: menlo, monaco, monospace; font-style: inherit; font-weight: inherit; line-height: 15.68px; margin-bottom: 1.1em; max-width: 100%; outline: 0px; overflow: auto; padding: 13.125px 16.4062px; vertical-align: baseline; white-space: pre-wrap; word-wrap: break-word;\">git clone https:\/\/gitlab.com\/linuxitos\/api-rest-laravel-12-sanctum.git<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Desde la terminal ir al directorio del proyecto para instalar\/actualizar dependencias de paquetes con el siguiente comando:<\/p>\n\n\n\n<pre style=\"background: rgb(54, 63, 72); border-radius: 6px; border: 0px; box-sizing: border-box; color: white; font-family: menlo, monaco, monospace; font-style: inherit; font-weight: inherit; line-height: 15.68px; margin-bottom: 1.1em; max-width: 100%; outline: 0px; overflow: auto; padding: 13.125px 16.4062px; vertical-align: baseline; white-space: pre-wrap; word-wrap: break-word;\">composer install<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Configurar la conexi\u00f3n a la base de datos:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Abrir el archivo .env o bien, renombrar el archivo example.env a .env y modificar la secci\u00f3n de la base de datos.<\/p>\n\n\n\n<pre style=\"background: rgb(245, 245, 245); border-radius: 6px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333; font-family: menlo, monaco, monospace; font-style: inherit; font-weight: inherit; line-height: 15.68px; margin-bottom: 1.1em; max-width: 100%; outline: 0px; overflow: auto; padding: 13.125px 16.4062px; vertical-align: baseline; white-space: pre-wrap; word-wrap: break-word;\">DB_CONNECTION=mysql\nDB_HOST=127.0.0.1\nDB_PORT=3307\nDB_DATABASE=BDApiDashTool\nDB_USERNAME=root\nDB_PASSWORD=yy64r<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Realizar la migraci\u00f3n de base de datos:<\/p>\n\n\n\n<pre style=\"background: rgb(54, 63, 72); border-radius: 6px; border: 0px; box-sizing: border-box; color: white; font-family: menlo, monaco, monospace; font-style: inherit; font-weight: inherit; line-height: 15.68px; margin-bottom: 1.1em; max-width: 100%; outline: 0px; overflow: auto; padding: 13.125px 16.4062px; vertical-align: baseline; white-space: pre-wrap; word-wrap: break-word;\">php artisan migrate:fresh --seed<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Y si todo ha sido correcto, entonces se podr\u00e1 levantar el api de la siguiente manera:<\/p>\n\n\n\n<pre style=\"background: rgb(54, 63, 72); border-radius: 6px; border: 0px; box-sizing: border-box; color: white; font-family: menlo, monaco, monospace; font-style: inherit; font-weight: inherit; line-height: 15.68px; margin-bottom: 1.1em; max-width: 100%; outline: 0px; overflow: auto; padding: 13.125px 16.4062px; vertical-align: baseline; white-space: pre-wrap; word-wrap: break-word;\">php artisan serve<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Y al abrir el navegador en la url : <a href=\"http:\/\/127.0.0.1:8000\" target=\"_blank\" rel=\"noreferrer noopener\">http:\/\/127.0.0.1:8000<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2025\/06\/image-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"504\" src=\"https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2025\/06\/image-1-1024x504.png\" alt=\"\" class=\"wp-image-4611\" srcset=\"https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2025\/06\/image-1-1024x504.png 1024w, https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2025\/06\/image-1-300x148.png 300w, https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2025\/06\/image-1-768x378.png 768w, https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2025\/06\/image-1.png 1083w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Y con eso el API est\u00e1 arriba:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Si requieren la documentaci\u00f3n del API, est\u00e1 en <a href=\"http:\/\/127.0.0.1:8000\/api\/documentation\">http:\/\/127.0.0.1:8000\/api\/documentation<\/a> en el mismo proyecto:<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Levantar Front Angular<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Clonar el proyecto del repositorio:<\/p>\n\n\n\n<pre style=\"background: rgb(54, 63, 72); border-radius: 6px; border: 0px; box-sizing: border-box; color: white; font-family: menlo, monaco, monospace; font-style: inherit; font-weight: inherit; line-height: 15.68px; margin-bottom: 1.1em; max-width: 100%; outline: 0px; overflow: auto; padding: 13.125px 16.4062px; vertical-align: baseline; white-space: pre-wrap; word-wrap: break-word;\">git clone https:\/\/gitlab.com\/linuxitos\/dashtool-angular-v20.git<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Entrar al directorio e instalar dependencias:<\/p>\n\n\n\n<pre style=\"background: rgb(54, 63, 72); border-radius: 6px; border: 0px; box-sizing: border-box; color: white; font-family: menlo, monaco, monospace; font-style: inherit; font-weight: inherit; line-height: 15.68px; margin-bottom: 1.1em; max-width: 100%; outline: 0px; overflow: auto; padding: 13.125px 16.4062px; vertical-align: baseline; white-space: pre-wrap; word-wrap: break-word;\">npm i<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Abrir el archivo de la ruta src\/app\/conststnt.ts y ajustar la url del API a donde debe apuntar:<\/p>\n\n\n\n<pre style=\"background: rgb(245, 245, 245); border-radius: 6px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333; font-family: menlo, monaco, monospace; font-style: inherit; font-weight: inherit; line-height: 15.68px; margin-bottom: 1.1em; max-width: 100%; outline: 0px; overflow: auto; padding: 13.125px 16.4062px; vertical-align: baseline; white-space: pre-wrap; word-wrap: break-word;\">export const Constant = {\n\tEN_KEY: \"UksopDJk88433LkskdKJERIkjdoi76kj\",\n\tURL_API: \"http:\/\/127.0.0.1:8000\/api\/v1\/\",\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Y ahora a levantar el proyecto con el comando:<\/p>\n\n\n\n<pre style=\"background: rgb(54, 63, 72); border-radius: 6px; border: 0px; box-sizing: border-box; color: white; font-family: menlo, monaco, monospace; font-style: inherit; font-weight: inherit; line-height: 15.68px; margin-bottom: 1.1em; max-width: 100%; outline: 0px; overflow: auto; padding: 13.125px 16.4062px; vertical-align: baseline; white-space: pre-wrap; word-wrap: break-word;\">ng serve<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Y por defecto iniciar\u00e1 en la ruta: <a href=\"http:\/\/localhost:4200\/dashtool\" target=\"_blank\" rel=\"noreferrer noopener\">http:\/\/localhost:4200\/dashtool<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2025\/06\/Screenshot-From-2025-06-21-18-04-19.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"747\" src=\"https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2025\/06\/Screenshot-From-2025-06-21-18-04-19-1024x747.png\" alt=\"\" class=\"wp-image-4613\" srcset=\"https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2025\/06\/Screenshot-From-2025-06-21-18-04-19-1024x747.png 1024w, https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2025\/06\/Screenshot-From-2025-06-21-18-04-19-300x219.png 300w, https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2025\/06\/Screenshot-From-2025-06-21-18-04-19-768x560.png 768w, https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2025\/06\/Screenshot-From-2025-06-21-18-04-19.png 1256w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Y listo, con \u00e9so se tiene el API y el front funcionando.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Contexto Como parte de un curso que estaba tomando sobre el uso de Angular, desarroll\u00e9 DashTool, un front con funciones de login, registros, crud, administraci\u00f3n de usuarios, permisos, m\u00f3dulos, posts, y crud para cada m\u00f3dulo. En \u00e9ste art\u00edculo explicar\u00e9 c\u00f3mo levantar el proyecto ed Api desarrollado en laravel 12, y el front, desarrollado en angular [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4597,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,929,1511],"tags":[2020,1694,1638,1690,1556,1587],"class_list":["post-4596","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-fedora","category-mysql-server","category-server","tag-angular","tag-docker","tag-laravel","tag-mariadb","tag-php","tag-xampp"],"_links":{"self":[{"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/posts\/4596","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/comments?post=4596"}],"version-history":[{"count":12,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/posts\/4596\/revisions"}],"predecessor-version":[{"id":4614,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/posts\/4596\/revisions\/4614"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/media\/4597"}],"wp:attachment":[{"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/media?parent=4596"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/categories?post=4596"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/tags?post=4596"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}