Estructura de directorios

Posted on Ago 03, 2026 by

Los proyectos creados mediante la CLI de Cordova cuentan con la siguiente estructura de directorios por defecto:

myapp/
├── config.xml
├── node_modules/
├── package.json
├── platforms/
├── plugins/
└── www

package.json

Archivo de manifiesto que declara las dependencias de paquetes JavaScript usadas en el proyecto, incluyendo Cordova, las plataformas añadidas y todos los complementos instalados. Las variables de configuración de complementos también se guardan en este archivo.

Es posible que tu proyecto ya cuente con un package.json propio con dependencias (por ejemplo, generado por un framework frontend). Cordova solo añadirá su propia configuración al archivo, sin alterar otras herramientas ni las dependencias existentes.

{
  "name": "com.foxdevelop.hello",
  "displayName": "HelloWorld",
  "version": "1.0.0",
  "description": "A sample Apache Cordova application that responds to the deviceready event.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "ecosystem:cordova"
  ],
  "author": "Apache Cordova Team",
  "license": "Apache-2.0",
  "devDependencies": {
    "cordova-android": "^15.1.0",
    "cordova-plugin-camera": "^8.0.0"
  },
  "cordova": {
    "platforms": [
      "android"
    ],
    "plugins": {
      "cordova-plugin-camera": {
        "ANDROIDX_CORE_VERSION": "1.6.+"
      }
    }
  }
}
Lenguaje del código: JSON / JSON con comentarios (json)
  1. "name": "com.foxdevelop.hello" Nombre del paquete npm. En proyectos Cordova, normalmente coincide con el identificador widget de config.xml.

Aviso: no es el nombre de paquete nativo para Android/iOS. El identificador nativo sigue gestionado por el atributo id en config.xml.

  1. "displayName": "HelloWorld" Nombre visible amigable, corresponde al nombre de la aplicación y coincide con el valor de <name> dentro de config.xml.
  2. "version": "1.0.0" Número de versión del proyecto, sigue el esquema de versionado semántico versión mayor.versión menor.revisión. Se recomienda mantenerlo igual a la versión definida en config.xml.
  3. "description": "A sample Apache Cordova application that responds to the deviceready event." Descripción del proyecto, metainformación que se muestra en npm y no afecta al empaquetado ni ejecución de la aplicación.
  4. "main": "index.js" Archivo de entrada según la especificación npm. Cordova prácticamente no usa este campo, se genera automáticamente por la plantilla y se puede ignorar. El verdadero punto de entrada web de una app Cordova es www/index.html (controlado mediante config.xml).
  5. "scripts": { "test": "echo \"Error: no test specified\" && exit 1" } Scripts personalizados de npm. La plantilla solo incluye el comando test por defecto, sin comandos rápidos de compilación o empaquetado. Puedes ampliarlo posteriormente, por ejemplo:
"scripts": {
  "build-android": "cordova build android"
}
Lenguaje del código: JavaScript (javascript)
  1. "keywords": ["ecosystem:cordova"] Etiquetas de búsqueda de npm. El valor ecosystem:cordova marca el proyecto como perteneciente al ecosistema Cordova, solo sirve para búsquedas en npm y no tiene efecto en tiempo de ejecución.
  2. "author": "Apache Cordova Team" Información del autor, únicamente metadatos.
  3. "license": "Apache-2.0" Licencia de código abierto Apache 2.0, la licencia predeterminada oficial de Cordova.

config.xml

Almacena todas las preferencias y opciones de configuración de la aplicación Cordova, para personalizar el comportamiento de ejecución del proyecto.

Documentación de referencia: Manual oficial de config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.foxdevelop.hello" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>HelloWorld</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="dev@cordova.apache.org" href="https://cordova.apache.org">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
</widget>
Lenguaje del código: HTML, XML (xml)

id="com.foxdevelop.hello"Identificador único de aplicación (Bundle ID)

  • Android: Identificador de paquete applicationId
  • iOS: Bundle Identifier

¡No lo modifiques arbitrariamente antes de publicar en tiendas! Al cambiarlo se considera una aplicación completamente nueva. Norma recomendada: dominio invertido dominioempresa.nombreproyecto

version="1.0.0" Número de versión de la aplicación (versionado semántico major.minor.patch), corresponde a la versión de la app tras empaquetarla.

<name>HelloWorld</name>

Nombre visible de la aplicación, el texto que aparece bajo el icono en el escritorio del móvil.

<description>

Texto descriptivo de la aplicación, leído por algunas plataformas al empaquetar y para la información de tiendas.

<author>

Datos del desarrollador: correo electrónico, sitio web y nombre del autor. Solo metadatos, no afectan el funcionamiento.

<content src="index.html" />

Configuración más importante

Página de inicio que carga la aplicación Cordova al arrancar.

Cuando se abre la aplicación, el contenedor carga directamente www/index.html.

Puedes modificarlo a src="pages/home.html" para cambiar la página de entrada.

<allow-intent>

<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
Lenguaje del código: HTML, XML (xml)

Función: Permitir que la aplicación abra páginas web mediante el navegador externo

allow-intent ≠ Permitir acceso cross-origin dentro de la página.

Es fácil confundir ambos conceptos:

  1. allow-intent: Al pulsar en un enlace con target="_blank", se abre el navegador del sistema. Controla qué direcciones web pueden activar esta apertura. La configuración actual permite abrir cualquier enlace http/https en el navegador externo.
  2. access origin: Controla si el webview interno de la app puede realizar peticiones a interfaces externas (cross-origin). ¡Esta configuración no aparece en el ejemplo!

⚠️ Problema frecuente:

Si recibes errores de cross-origin en peticiones AJAX de tu página, no basta con usar allow-intent. Debes añadir lo siguiente:

xml

<!-- Permite al webview acceder a todas las APIs https -->
<access origin="*" />Lenguaje del código: HTML, XML (xml)

www/

Directorio donde se guardan los recursos web del proyecto: archivos HTML, CSS, JavaScript y todo tipo de recursos estáticos.

Como desarrollador de aplicaciones Cordova, la mayor parte del código y recursos de negocio se ubican aquí. Al ejecutar el comando cordova prepare, los archivos de este directorio se copian a las carpetas www correspondientes de cada plataforma.

El directorio fuente www se sincroniza y copia a las subcarpetas de cada plataforma. Ejemplos de rutas:

platforms/ios/www o platforms/android/assets/www.

La CLI sobrescribe constantemente los archivos de las carpetas de plataforma a partir del directorio www raíz. Solo debes editar archivos dentro de la carpeta www principal, nunca modifiques directamente los archivos contenidos en platforms.

Si usas herramientas de compilación frontend, configura la salida de los archivos generados hacia la carpeta www. Si desarrollas directamente dentro de www, se recomienda incluir este directorio en el control de versiones.

node_modules/

Contiene todos los paquetes JavaScript descargados desde el repositorio npm, incluyendo Cordova, sus herramientas asociadas y las dependencias declaradas en package.json.

Cuando ejecutas cordova platform add o cordova plugin add para añadir plataformas o complementos, los recursos correspondientes se descargan desde npmjs y se guardan en node_modules/.

Después, Cordova copia el código fuente de plataformas y complementos desde este directorio a sus ubicaciones correspondientes para garantizar el funcionamiento correcto del programa.

Este directorio también alberga los scripts necesarios para ejecutar cordova prepare y cordova build y compilar cada plataforma.

⚠️ Importante: node_modules es el directorio de código fuente de dependencias originales. No modifiques manualmente ningún archivo dentro de él. Además, no envíes este directorio al sistema de control de versiones.

Consulta la documentación de estándares de directorios de npmjs para ampliar información.

platforms/

Almacena el código fuente y los scripts de compilación de cada plataforma que hayas añadido al proyecto.

⚠️ Aviso: Al compilar aplicaciones mediante la CLI, no modifiques ningún archivo dentro de /platforms/ a menos que entiendas completamente su funcionamiento o la documentación oficial lo indique explícitamente.

Los archivos de este directorio se sobrescriben frecuentemente al preparar la compilación o reinstalar complementos.

plugins/

Directorio temporal de tránsito para complementos: los complementos instalados se copian primero aquí, y posteriormente se despliegan en los directorios de cada plataforma.

No se recomienda incluir este directorio en el control de versiones.

Si desarrollas complementos propios, personalizados internos o modificados, no los guardes dentro del directorio plugins.

Normas de control de versiones

Se recomienda no añadir platforms/ ni plugins/ al control de versiones, ya que se consideran archivos generados durante la compilación.

La información de plataformas y complementos instalados se guarda automáticamente en package.json. Al ejecutar cordova prepare, la herramienta descarga automáticamente las plataformas y complementos necesarios.

Directorios opcionales

merges/

Al crear un proyecto Cordova mediante la CLI, el directorio merges no se genera por defecto. Oficialmente no se aconseja usarlo, aunque se mantiene por compatibilidad.

Las subcarpetas de este directorio sirven para guardar recursos web exclusivos de cada plataforma (HTML, CSS, JS). Durante la fase prepare, estos recursos se despliegan al proyecto nativo correspondiente.

Los archivos ubicados en merges/ sobrescriben los archivos con el mismo nombre del directorio www (solo para la plataforma correspondiente).

Ejemplo de estructura de directorios:

plaintext

myapp/
├── merges
│   ├── android/
│   │   └── android.js
│   └── ios/
│       └── app.js
└── www/
    └── app.js

Tras compilar los proyectos Android e iOS:

  • Aplicación Android: contiene app.js (procedente de www) + android.js
  • Aplicación iOS: solo cuenta con app.js, tomado desde merges/ios/app.js, que reemplaza la versión general ubicada en www

Estructura de directorios

Posted in Tutorial de Cordova

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *