# Guía de Instalación y Configuración del Entorno de Desarrollo Esta guía cubre todo lo necesario para tener el entorno de desarrollo funcionando en Windows usando **Laragon**. --- ## Requisitos previos - Windows 10 u 11 (64-bit) - Acceso a internet - Permisos de administrador en tu computadora --- ## Paso 1 — Instalar Laragon Laragon es un entorno de desarrollo local para Windows. Incluye PHP, MySQL, Nginx/Apache y más. 1. Ve a [https://laragon.org/download](https://laragon.org/download) 2. Descarga **Laragon Full** (incluye PHP, MySQL, Node.js, npm, git) 3. Ejecuta el instalador y sigue los pasos 4. Instálalo en `C:\laragon` (ruta recomendada, no cambiar) 5. Al finalizar, abre Laragon y haz clic en **Start All** > **Nota:** Laragon ya incluye PHP, por lo que no necesitas instalarlo por separado. --- ## Paso 2 — Verificar PHP 1. Abre la terminal de Laragon: - En la ventana de Laragon → clic en **Terminal** 2. Ejecuta: ```bash php -v ``` Deberías ver algo como: ``` PHP 8.3.x (cli) ``` Si no aparece, revisa que Laragon esté corriendo y que PHP esté habilitado en el menú de Laragon. --- ## Paso 3 — Instalar Composer Composer es el gestor de dependencias de PHP. 1. Ve a [https://getcomposer.org/download](https://getcomposer.org/download) 2. Descarga **Composer-Setup.exe** y ejecútalo 3. Durante la instalación, selecciona el PHP de Laragon: - Ruta típica: `C:\laragon\bin\php\php8.x\php.exe` 4. Completa la instalación 5. Verifica en la terminal de Laragon: ```bash composer -V ``` Deberías ver: ``` Composer version 2.x.x ``` --- ## Paso 4 — Verificar Node.js y npm Laragon Full ya incluye Node.js y npm. Verifica en la terminal: ```bash node -v npm -v ``` Si no están disponibles: 1. Ve a [https://nodejs.org](https://nodejs.org) 2. Descarga la versión **LTS** 3. Instala con las opciones por defecto --- ## Paso 5 — Instalar Git Git es necesario para clonar el repositorio y colaborar en el proyecto. 1. Ve a [https://git-scm.com/download/win](https://git-scm.com/download/win) 2. Descarga e instala con las opciones por defecto 3. Verifica: ```bash git -v ``` --- ## Paso 6 — Clonar el proyecto 1. Abre la terminal de Laragon 2. Navega a la carpeta de proyectos de Laragon: ```bash cd C:/laragon/www ``` 3. Clona el repositorio: ```bash git clone frontend ``` 4. Entra a la carpeta del proyecto: ```bash cd frontend ``` --- ## Paso 7 — Configurar el proyecto Laravel ### 7.1 Instalar dependencias PHP ```bash composer install ``` ### 7.2 Instalar dependencias JavaScript ```bash npm install ``` ### 7.3 Crear el archivo de entorno ```bash cp .env.example .env ``` Abre el archivo `.env` y configura: ```env APP_NAME=SuiteX APP_URL=https://frontend.test DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=nombre_de_tu_base_de_datos DB_USERNAME=root DB_PASSWORD= ``` > **Nota:** La contraseña por defecto de MySQL en Laragon es vacía o `root`. ### 7.4 Generar la clave de la aplicación ```bash php artisan key:generate ``` ### 7.5 Crear la base de datos 1. En la ventana de Laragon → clic en **Database** (abre HeidiSQL) 2. Conéctate con: - Host: `127.0.0.1` - Usuario: `root` - Contraseña: (vacía) 3. Crea una nueva base de datos con el mismo nombre que pusiste en `DB_DATABASE` ### 7.6 Correr las migraciones ```bash php artisan migrate ``` --- ## Paso 8 — Habilitar SSL local (HTTPS) Este proyecto requiere HTTPS para funcionar correctamente. 1. En la ventana de Laragon → clic derecho → **Laragon** → **Preferences** 2. Activa la opción **Auto create virtual host** 3. Para confiar en el certificado SSL: - Clic derecho en Laragon → **Security** → **Trust the SSL certificate** 4. Tu proyecto estará disponible en: `https://frontend.test` --- ## Paso 9 — Iniciar el servidor de desarrollo Necesitas dos terminales abiertas al mismo tiempo: **Terminal 1 — Laravel (backend):** ```bash php artisan serve ``` > No es necesario si usas el dominio `.test` de Laragon directamente. **Terminal 2 — Vite (frontend assets):** ```bash npm run dev ``` Mantén esta terminal abierta mientras trabajas. Vite compila los assets en tiempo real. --- ## Flujo de trabajo diario Cada vez que vayas a trabajar: 1. Abre **Laragon** y haz clic en **Start All** 2. Abre la terminal del proyecto 3. Ejecuta `npm run dev` 4. Abre el navegador en `https://frontend.test` --- ## Comandos útiles | Comando | Descripción | | :--- | :--- | | `php artisan migrate` | Corre las migraciones de base de datos | | `php artisan migrate:fresh --seed` | Recrea todas las tablas y carga datos de prueba | | `php artisan cache:clear` | Limpia la caché de la aplicación | | `php artisan config:clear` | Limpia la caché de configuración | | `php artisan route:list` | Lista todas las rutas registradas | | `npm run dev` | Inicia Vite en modo desarrollo | | `npm run build` | Compila los assets para producción | | `npm test` | Corre los tests de JavaScript | | `php artisan test` | Corre todos los tests de PHP | | `composer install` | Instala/actualiza dependencias PHP | | `npm install` | Instala/actualiza dependencias JavaScript | --- ## Solución de problemas comunes ### El dominio `.test` no carga - Verifica que Laragon esté corriendo (**Start All**) - Verifica que el archivo `hosts` tenga la entrada correcta - Reinicia Laragon ### Error "php not found" en la terminal - Usa siempre la terminal integrada de Laragon, no la de Windows - O agrega `C:\laragon\bin\php\php8.x` a las variables de entorno del sistema ### Error de conexión a la base de datos - Verifica que MySQL esté corriendo en Laragon - Confirma los valores de `DB_*` en el archivo `.env` - Asegúrate de que la base de datos exista en HeidiSQL ### Error de permisos en `storage/` o `bootstrap/cache/` ```bash php artisan storage:link ``` En Windows, ejecuta la terminal como administrador si persiste el error. ### Vite no compila los assets - Asegúrate de haber corrido `npm install` primero - Verifica que no haya errores de sintaxis en los archivos JS/JSX --- ## Recursos adicionales - [Documentación oficial de Laragon](https://laragon.org/docs) - [Documentación de Laravel](https://laravel.com/docs) - [Documentación de Composer](https://getcomposer.org/doc) - [Documentación de Vite](https://vitejs.dev/guide)