Este repositorio contiene todo lo necesario para levantar los servidores del backend y frontend en tu entorno local para realizar pruebas tempranas de QA. Con esta guía, podrás configurar el entorno de desarrollo y empezar a realizar pruebas de manera autónoma.
- Requisitos
- Configuración del Backend
- Configuración del Frontend
- Comandos Útiles
- Solución de Problemas
- Inicia tu primer proyecto Vite
- Enlaces de Interés
Antes de comenzar, asegúrate de tener instaladas las siguientes herramientas:
- Java JDK - Versión 21 o superior.
- Maven - Para manejar las dependencias del backend.
- Node.js - Versión 18.x o superior.
- npm o yarn - Para manejar las dependencias del frontend.
- MySQL - Para la base de datos.
- Git - Para clonar el repositorio.
- Vite - Para levantar el servidor de desarrollo del frontend.
- IntelliJ IDEA Community Edition - IDE recomendado para trabajar con Spring Boot.
- Visual Studio Code - IDE recomendado para trabajar con React.
Para trabajar con Spring Boot, IntelliJ IDEA Community Edition es altamente recomendado. Este IDE ofrece varias ventajas que facilitan el desarrollo, especialmente para quienes no tienen experiencia avanzada en configuración de entornos:
- Integración Completa con Java: IntelliJ IDEA Community Edition viene con soporte integrado para Java, lo que simplifica el desarrollo y evita la necesidad de configurar manualmente el entorno Java.
- Configuración Automática de Maven: El IDE gestiona automáticamente las dependencias y el path de Maven, facilitando la construcción y ejecución del proyecto sin complicaciones adicionales.
- Facilidad de Uso: La configuración automática y las recomendaciones del IDE son especialmente útiles para aquellos que pueden no estar familiarizados con todas las configuraciones y comandos necesarios para levantar un proyecto Spring Boot.
-
Clona el repositorio y navega a la carpeta del backend:
git clone https://github.com/DVTecno/QA-Local-Testing-Env.git cd backend
-
Compila el proyecto y descarga las dependencias:
mvn clean install
-
Configura las variables de entorno:
-
Crea un archivo
application.properties
ensrc/main/resources/
con el siguiente contenido:spring.datasource.url=jdbc:mysql://localhost:3306/tu_base_de_datos spring.datasource.username=tu_usuario spring.datasource.password=tu_contraseña
-
-
Levanta el servidor:
mvn spring-boot:run
El backend estará corriendo en
http://localhost:8080
.
-
Navega a la carpeta del frontend:
cd frontend
-
Instala las dependencias:
npm install
-
Levanta el servidor de desarrollo:
npm run dev
El frontend estará corriendo en
http://localhost:5200
.
- Iniciar el Backend:
mvn spring-boot:run
(en la carpetabackend
) - Iniciar el Frontend:
npm run dev
(en la carpetafrontend
) - Construir el Frontend para Producción:
npm run build
Para asegurarte de que todo se ha configurado correctamente:
- Backend: Visita
http://localhost:8080
en tu navegador. Deberías ver la página de bienvenida o un mensaje indicando que el servidor está corriendo. - Frontend: Visita
http://localhost:5200
en tu navegador. Deberías ver la interfaz de la aplicación cargada correctamente. - Base de Datos: Usa MySQL Workbench para conectarte a la base de datos en
localhost:3306
y verificar que la base de datostu_base_de_datos
existe y es accesible.
-
Problema 1: No se puede conectar a la base de datos.
- Causa posible: MySQL no está corriendo o las credenciales son incorrectas.
- Solución:
- Verifica que MySQL esté en ejecución. En Linux, usa el comando
sudo systemctl status mysql
. En Windows, usasc query mysql
. - Asegúrate de que las credenciales en
application.properties
sean correctas. Intenta conectarte a la base de datos manualmente usando MySQL Workbench para verificar la conectividad.
- Verifica que MySQL esté en ejecución. En Linux, usa el comando
-
Problema 2: El frontend no carga.
- Causa posible: El backend no está corriendo o hay un problema con el puerto.
- Solución:
- Asegúrate de que el backend esté corriendo en
http://localhost:8080
. - Verifica que el servidor de desarrollo del frontend esté en
http://localhost:5200
. - Revisa la configuración del archivo
.env
en el frontend y asegúrate de queVITE_API_URL
esté configurado correctamente.
- Asegúrate de que el backend esté corriendo en
Vite requiere Node.js versión 18+ o 20+. Sin embargo, algunas plantillas requieren una versión superior de Node.js para funcionar, por favor actualiza si tu gestor de paquetes te advierte sobre ello.
Para crear un nuevo proyecto de React usando Vite, sigue estos pasos:
-
Abre tu terminal y ejecuta el siguiente comando:
npm create vite@latest
-
Sigue las instrucciones que aparecen en la terminal para configurar el proyecto.
Durante la configuración, se te solicitarán las siguientes opciones. Debes seleccionar las siguientes:
Selecciona un framework:
En la terminal, elige React de la lista de opciones:
? Select a framework:
Vanilla
Vue
React <-
Preact
Lit
Svelte
Luego, elige entre JavaScript o TypeScript:
? Select a variant:
JavaScript <-
TypeScript
-
Una vez configurado, navega a la carpeta del proyecto y levanta el servidor de desarrollo:
cd nombre-del-proyecto npm install npm run dev
El proyecto estará corriendo en http://localhost:5200
.
1. ¿Qué hago si mi puerto 8080 ya está en uso?
Puedes cambiar el puerto del backend editando el archivo
application.properties
:
server.port=8081
Ahora que tienes todo configurado, puedes empezar a realizar tus pruebas en el entorno local. Si encuentras algún problema, revisa la sección de solución de problemas o consulta los enlaces de interés para obtener más ayuda.
-
Instalador MySQL Community y MySQL Workbench:
MySQL Community
MySQL Workbench -
Instalador Node.js:
Node.js -
Instalador Vite:
Vite -
Instalar IntelliJ IDEA Community Edition:
IntelliJ IDEA -
Instalar Visual Studio Code:
Visual Studio Code