Arborescence du projet

Posted on Août 03, 2026 by

Un projet créé via l’interface de commande Cordova CLI possède par défaut cette arborescence :

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

package.json

Fichier manifeste qui liste les dépendances des paquets JavaScript utilisés par le projet : Cordova, les plateformes ajoutées et tous les modules installés. Les variables de configuration des plugins sont également enregistrées dans ce fichier.

Votre projet dispose peut-être déjà d’un fichier package.json généré par un framework frontend avec ses propres dépendances. Cordova ajoute uniquement ses propres paramètres sans modifier les dépendances existantes ni perturber les autres outils.

{
  "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.+"
      }
    }
  }
}
Langage du code : JSON / JSON avec commentaires (json)
  1. "name": "com.foxdevelop.hello" Nom du paquet npm. Sur un projet Cordova, cette valeur correspond généralement à l’identifiant widget dans config.xml.

Attention : ce n’est pas le nom de paquet natif Android/iOS. Celui-ci reste défini par l’attribut id du fichier config.xml.

  1. "displayName": "HelloWorld" Nom affiché convivial, correspondant au nom de l’application visible sur l’appareil, à synchroniser avec la balise <name> de config.xml.
  2. "version": "1.0.0" Numéro de version du projet suivant la norme de versionnage sémantique majeur.mineur.correctif. Il est recommandé de l’aligner sur la version indiquée dans config.xml.
  3. "description": "A sample Apache Cordova application that responds to the deviceready event." Description du projet, métadonnée affichée sur npm, sans impact sur la compilation ni l’exécution de l’application.
  4. "main": "index.js" Fichier d’entrée conforme aux spécifications npm. Cordova utilise quasiment jamais ce champ ; il est généré automatiquement par le modèle et peut être ignoré. La véritable page de l’application Cordova est www/index.html (gérée par config.xml).
  5. "scripts": { "test": "echo \"Error: no test specified\" && exit 1" } Scripts personnalisés npm. Le modèle ne propose par défaut que la commande test, sans raccourci pour la compilation ou l’empaquetage. Vous pouvez étendre cette section par la suite, par exemple :
"scripts": {
  "build-android": "cordova build android"
}
Langage du code : JavaScript (javascript)
  1. "keywords": ["ecosystem:cordova"] Mots-clés de recherche npm. La balise ecosystem:cordova identifie le projet comme projet de l’écosystème Cordova ; elle sert uniquement à la recherche sur npm et n’a aucun effet à l’exécution.
  2. "author": "Apache Cordova Team" Informations sur l’auteur, simple métadonnée.
  3. "license": "Apache-2.0" Licence open source Apache 2.0, licence par défaut officielle de Cordova.

config.xml

Ce fichier contient l’ensemble des préférences et paramètres de l’application Cordova, permettant de personnaliser son comportement à l’exécution.

Documentation de référence : manuel officiel 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>
Langage du code : HTML, XML (xml)

id="com.foxdevelop.hello"Identifiant unique de l’application (Bundle ID)

  • Android : identifiant de l’application applicationId
  • iOS : Bundle Identifier

Ne pas modifier cet identifiant après publication sur les boutiques ! Tout changement correspond à une nouvelle application. Convention : nom de domaine inversé domaine-société.nom-projet

version="1.0.0" Numéro de version de l’application (versionnage sémantique major.minor.patch), repris lors de la compilation de l’application finale.

<name>HelloWorld</name>

Nom affiché de l’application, visible sous l’icône sur l’écran d’accueil du téléphone.

<description>

Description de l’application, lue par certains outils de compilation et plateformes de distribution.

<author>

Informations du développeur : adresse mail, site web et nom de l’auteur. Ce sont uniquement des métadonnées sans incidence sur l’exécution.

<content src="index.html" />

Paramètre le plus important

Page web chargée au lancement de l’application Cordova.

Lors du démarrage, le conteneur charge directement le fichier www/index.html.

Vous pouvez modifier l’attribut src par src="pages/home.html" pour changer la page de démarrage.

<allow-intent>

<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
Langage du code : HTML, XML (xml)

Rôle : autoriser l’application à ouvrir des pages web dans le navigateur externe

allow-intent ≠ autorisation des requêtes cross-origin au sein de l’application !

Ces deux paramètres sont souvent confondus :

  1. allow-intent : quand l’utilisateur clique sur un lien avec target="_blank", il autorise l’ouverture de certaines adresses dans le navigateur système. Ici, toutes les adresses http/https sont autorisées.
  2. access origin : contrôle si le webview interne de l’application peut appeler des API externes (requêtes cross-origin). Ce paramètre est absent dans cet exemple de configuration !

⚠️ Erreur fréquente :

Si vos requêtes AJAX dans la page rencontrent une erreur de cross-origin, la seule présence de allow-intent ne résout rien. Il faut ajouter cette règle :

xml

<!-- Autoriser l’accès à toutes les API https depuis le webview -->
<access origin="*" />Langage du code : HTML, XML (xml)

www/

Répertoire regroupant les ressources web du projet : fichiers HTML, CSS, JavaScript et tous les assets statiques.

La plupart du code métier et des ressources du développeur Cordova se trouvent ici. Après exécution de la commande cordova prepare, l’ensemble des fichiers de ce dossier sont copiés dans les répertoires www de chaque plateforme cible.

Les sources du dossier www sont synchronisées vers les sous-dossiers des plateformes, exemples de chemins :

platforms/ios/www ou platforms/android/assets/www.

L’interface de commande remplace régulièrement les fichiers des dossiers plateformes à partir du dossier source www. Modifiez uniquement les fichiers à la racine de www, ne changez jamais directement les fichiers dans le dossier platforms.

Si vous utilisez un outil de build frontend, configurez-le pour envoyer les fichiers compilés dans le dossier www. Si vous développez directement les sources dans www, ajoutez ce dossier au contrôle de version.

node_modules/

Contient tous les paquets JavaScript téléchargés depuis le dépôt npm : Cordova, ses outils annexes et les dépendances déclarées dans package.json.

Lorsque vous ajoutez une plateforme ou un plugin avec cordova platform add ou cordova plugin add, les ressources correspondantes sont récupérées sur npmjs et enregistrées dans node_modules/.

Cordova copie ensuite les sources des plateformes et plugins depuis ce dossier aux emplacements adéquats pour permettre l’exécution de l’application.

Ce dossier contient également les scripts nécessaires à l’exécution des commandes cordova prepare et cordova build pour compiler chaque plateforme.

⚠️ Important : node_modules contient les sources brutes des dépendances ; ne modifiez manuellement aucun fichier à l’intérieur. Par ailleurs, ne commitez pas ce dossier dans votre gestionnaire de version.

Pour plus de détails, consultez la documentation sur les conventions de répertoire npmjs.

platforms/

Stocke les sources natives et les scripts de build de chaque plateforme ajoutée au projet.

⚠️ Attention : lors de la compilation via CLI, ne modifiez aucun fichier dans /platforms/ sauf si vous maîtrisez parfaitement le fonctionnement interne ou si la documentation officielle l’indique explicitement.

Ces fichiers sont régulièrement écrasés lors de la préparation du projet ou de la réinstallation des plugins.

plugins/

Dossier de transit temporaire pour les plugins : les modules installés sont d’abord copiés ici avant d’être déployés dans chaque dossier de plateforme.

Il est déconseillé d’ajouter ce dossier au contrôle de version.

Si vous développez des plugins internes, personnalisés ou modifiés, ne les stockez pas dans le dossier plugins.

Règles de gestion de version

Il est recommandé de ne pas inclure platforms/ et plugins/ dans le contrôle de version : ce sont des artefacts de compilation.

La liste des plateformes et plugins installés est automatiquement conservée dans package.json. La commande cordova prepare télécharge alors automatiquement les éléments nécessaires.

Répertoires optionnels

merges/

Le dossier merges n’est pas créé par défaut lors de la génération d’un projet Cordova via CLI. L’équipe officielle déconseille son utilisation, mais il reste pris en charge pour assurer la compatibilité.

Les sous-dossiers de merges contiennent des ressources web spécifiques à chaque plateforme (HTML, CSS, JS). Elles sont déployées dans le projet natif correspondant à l’étape prepare.

Les fichiers présents dans merges/ remplacent les fichiers du même nom dans le dossier www (uniquement pour la plateforme correspondante).

Exemple d’arborescence :

plaintext

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

Après compilation des projets Android et iOS :

  • Application Android : contient app.js (provenant de www) + android.js
  • Application iOS : seul app.js est présent ; il s’agit du fichier merges/ios/app.js qui remplace la version générique située dans www

Arborescence du projet

Posted in Tutoriel Cordova

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *