Estructura del Proyecto Frontend #

Este documento describe la organización de los archivos y carpetas principales en la raíz de tu proyecto frontend, facilitando la navegación y comprensión de su arquitectura.

Carpetas #

node_modules #

Este directorio, gestionado por npm o Yarn, alberga todas las dependencias de terceros (librerías y paquetes) que tu proyecto necesita para funcionar. No debe ser versionado en el control de código (por eso se incluye en .gitignore).

src #

La carpeta src (o source) es el corazón de tu aplicación, conteniendo todo el código fuente del frontend: componentes, lógica, estilos, y configuraciones específicas de tu framework (ej., React, Vue).

Archivos de Configuración y Metadatos #

.dockerignore #

Similar a .gitignore, este archivo especifica los archivos y carpetas que Docker debe ignorar al construir una imagen. Esto ayuda a mantener las imágenes limpias y eficientes, excluyendo dependencias de desarrollo o archivos temporales.

.env #

Contiene las variables de entorno de tu aplicación. Es fundamental para almacenar configuraciones sensibles o específicas del entorno (como credenciales de bases de datos, claves API) de forma segura y separada del código fuente. ¡Nunca debe ser versionado!

.gitignore #

Lista de archivos y directorios que Git debe ignorar y no incluir en el control de versiones. Es crucial para evitar que archivos temporales, dependencias (node_modules) o configuraciones locales (.env) se suban al repositorio.

Dockerfile #

Contiene las instrucciones para construir una imagen Docker de tu aplicación frontend. Permite empaquetar la aplicación y sus dependencias en un contenedor, asegurando un despliegue consistente y reproducible.

eslint.config.js #

Este archivo de configuración define las reglas y configuraciones de ESLint, una herramienta de linting que analiza estáticamente tu código para encontrar problemas, errores potenciales y asegurar un estilo de codificación consistente.

index.html #

El punto de entrada principal de tu aplicación web. Es el archivo HTML base que carga tu aplicación frontend (generalmente a través de JavaScript inyectado por tu bundler).

package-lock.json #

Generado automáticamente por npm, este archivo registra las versiones exactas de todas las dependencias (incluyendo las sub-dependencias) utilizadas en el proyecto. Asegura que la instalación de dependencias sea consistente en todos los entornos.

package.json #

El manifiesto de tu proyecto Node.js. Contiene metadatos del proyecto (nombre, versión, descripción), scripts para ejecutar tareas (inicio, pruebas, build), y la lista de dependencias (dependencies y devDependencies).

tsconfig.app.json #

Un archivo de configuración de TypeScript específico para la aplicación frontend. Puede extender a tsconfig.json y definir opciones de compilación particulares para el código de tu aplicación.

tsconfig.json #

El archivo de configuración base del compilador de TypeScript. Define cómo TypeScript debe compilar tus archivos .ts a JavaScript, incluyendo opciones generales de lenguaje, módulos y strictness. tsconfig.app.json y tsconfig.node.json suelen extender a este.

tsconfig.node.json #

Un archivo de configuración de TypeScript específico para archivos que se ejecutan en un entorno Node.js (ej., scripts de build, archivos de configuración de Vite). Asegura que el código se compile correctamente para este entorno.

vite.config.ts #

El archivo de configuración de Vite. Define cómo Vite debe bundlar y desarrollar tu aplicación, incluyendo plugins, proxies, optimizaciones, y otras opciones de construcción y servidor de desarrollo.

readme.md #

Un archivo de documentación esencial que proporciona una visión general del proyecto. Típicamente incluye: una descripción, instrucciones de instalación, cómo ejecutar la aplicación, cómo contribuir y la información de contacto.