Verzeichnisstruktur

Posted on Aug. 03, 2026 by

Ein mit der Cordova CLI erstelltes Projekt besitzt standardmäßig folgende Verzeichnisstruktur:

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

package.json

Dies ist die Manifestdatei, in der alle JavaScript-Abhängigkeiten des Projekts deklariert werden: Cordova, hinzugefügte Plattformen sowie alle installierten Plugins. Auch Konfigurationsvariablen der Plugins werden hier abgelegt.

Möglicherweise existiert in Ihrem Projekt bereits eine package.json mit Abhängigkeiten, die beispielsweise durch ein Frontend-Framework erzeugt wurde. Cordova fügt nur seine benötigten Einstellungen hinzu und beeinträchtigt keine vorhandenen Abhängigkeiten oder anderen Werkzeuge.

{
  "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.+"
      }
    }
  }
}
Code-Sprache: JSON / JSON mit Kommentaren (json)
  1. "name": "com.foxdevelop.hello" Der Name des npm-Pakets. Bei Cordova-Projekten stimmt dieser Wert üblicherweise mit der widget-ID aus config.xml überein.

Hinweis: Dies ist nicht der native Paketname von Android/iOS. Der native Paketname wird weiterhin über das Attribut id in config.xml festgelegt.

  1. "displayName": "HelloWorld" Der benutzerfreundliche Anzeigename der App, er entspricht dem Wert von <name> in der config.xml.
  2. "version": "1.0.0" Projektversion nach Semantic-Versioning-Standard Hauptversion.Nebenversion.Patch. Es empfiehlt sich, diesen Wert mit der Version in config.xml abzugleichen.
  3. "description": "A sample Apache Cordova application that responds to the deviceready event." Projektbeschreibung als Metainformation, die auf npm angezeigt wird. Sie hat keinen Einfluss auf das Erstellen und Ausführen der App.
  4. "main": "index.js" Einstiegspunkt gemäß npm-Spezifikation. Cordova nutzt dieses Feld praktisch nicht. Es wird automatisch durch die Vorlage generiert und kann ignoriert werden. Der eigentliche Einstieg der Cordova-App ist www/index.html (gesteuert durch config.xml).
  5. "scripts": { "test": "echo \"Error: no test specified\" && exit 1" } Benutzerdefinierte npm-Skripte. Die Vorlage enthält standardmäßig nur den Testbefehl, keine vordefinierten Befehle zum Erstellen oder Packen. Sie können diesen Bereich später erweitern, zum Beispiel:
"scripts": {
  "build-android": "cordova build android"
}
Code-Sprache: JavaScript (javascript)
  1. "keywords": ["ecosystem:cordova"] Suchschlagwörter für npm. Die Markierung ecosystem:cordova kennzeichnet das Projekt als Teil des Cordova-Ökosystems, dient nur der Suche auf npm und hat keine Laufzeitwirkung.
  2. "author": "Apache Cordova Team" Autoreninformationen, reine Metadaten.
  3. "license": "Apache-2.0" Open-Source-Lizenz Apache 2.0, die Standardlizenz von Cordova.

config.xml

Diese Datei enthält alle Einstellungen und Konfigurationen der Cordova-Anwendung, über die das Laufzeitverhalten des Projekts angepasst wird.

Referenzdokument: Offizielles Handbuch zur 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>
Code-Sprache: HTML, XML (xml)

id="com.foxdevelop.hello"Eindeutige App-ID (Bundle ID)

  • Android: App-Paketname applicationId
  • iOS: Bundle Identifier

Diese ID darf nach Veröffentlichung in App-Stores nicht beliebig geändert werden! Eine Änderung wird als neue Anwendung erkannt. Konvention: Umgekehrte Domain Firmendomain.Projektname

version="1.0.0" Anwendungsversion (Semantic Versioning major.minor.patch), die beim Erstellen der App verwendet wird.

<name>HelloWorld</name>

Der angezeigte App-Name, der unter dem Symbol auf dem Startbildschirm des Geräts erscheint.

<description>

Beschreibung der Anwendung, die bei der Erstellung auf einigen Plattformen und in App-Stores ausgelesen wird.

<author>

Entwicklerdaten: E-Mail, Webseite und Autorenname. Dies sind nur Metadaten ohne Auswirkungen auf den Programmablauf.

<content src="index.html" />

Wichtigste Konfiguration

Die Startseite, die beim Öffnen der Cordova-App geladen wird.

Nach dem Start lädt der Container direkt die Datei www/index.html.

Sie können den Wert zu src="pages/home.html" ändern, um die Startseite auszutauschen.

<allow-intent>

<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
Code-Sprache: HTML, XML (xml)

Zweck: Erlaubt der App, externe Webseiten im Systembrowser zu öffnen

allow-intent ≠ Erlaubnis für Cross-Origin-Zugriffe innerhalb der App!

Beide Einstellungen werden häufig verwechselt:

  1. allow-intent: Wenn der Nutzer einen Link mit target="_blank" anklickt, regelt diese Einstellung, welche URLs im Systembrowser geöffnet werden dürfen. Mit dieser Konfiguration sind alle http/https-Adressen erlaubt.
  2. access origin: Steuert, ob der interne Webview der App externe Schnittstellen aufrufen darf (Cross-Origin). Diese Einstellung fehlt in diesem Beispiel!

⚠️ Häufige Fehlerquelle:

Wenn AJAX-Anfragen in Ihrer Webseite Cross-Origin-Fehler verursachen, hilft allein allow-intent nicht. Sie müssen folgenden Eintrag ergänzen:

xml

<!-- Erlaube Zugriff auf alle https-Schnittstellen im Webview -->
<access origin="*" />Code-Sprache: HTML, XML (xml)

www/

Dieses Verzeichnis enthält alle Web-Ressourcen des Projekts: HTML, CSS, JavaScript und weitere statische Dateien.

Als Cordova-Entwickler legen Sie den Großteil des Geschäfts-Codes und der Ressourcen hier ab. Nach Ausführung von cordova prepare werden alle Dateien dieses Ordners in die passenden www-Verzeichnisse der einzelnen Plattformen kopiert.

Die Quelldateien im Ordner www werden synchron in die Unterordner der Plattformen kopiert. Beispielpfade:

platforms/ios/www oder platforms/android/assets/www.

Die CLI überschreibt kontinuierlich Dateien in den Plattformordnern mit Inhalten aus dem Quellordner www. Bearbeiten Sie nur Dateien im Stammverzeichnis www, ändern Sie niemals Dateien direkt im platforms-Ordner.

Nutzen Sie ein Frontend-Build-Tool, konfigurieren Sie es so, dass die fertigen Dateien im Ordner www abgelegt werden. Entwickeln Sie direkt im www-Ordner, sollten Sie diesen in die Versionsverwaltung aufnehmen.

node_modules/

Speichert alle JavaScript-Abhängigkeiten, die aus dem npm-Repository heruntergeladen wurden: Cordova, zugehörige Werkzeuge und alle Abhängigkeiten aus package.json.

Beim Hinzufügen von Plattformen oder Plugins mit cordova platform add oder cordova plugin add werden die benötigten Ressourcen von npmjs heruntergeladen und in node_modules/ abgelegt.

Anschließend kopiert Cordova die Quelltexte von Plattformen und Plugins aus diesem Ordner an die richtigen Stellen, damit die Anwendung ausgeführt werden kann.

Dieser Ordner enthält zudem alle Skripte, die für cordova prepare und cordova build zum Erstellen der einzelnen Plattformen benötigt werden.

⚠️ Wichtig: node_modules enthält die unbearbeiteten Quelltexte der Abhängigkeiten. Verändern Sie keine Dateien manuell. Außerdem sollten Sie diesen Ordner nicht in die Versionsverwaltung einchecken.

Weitere Informationen finden Sie in der Dokumentation zu den Verzeichniskonventionen von npmjs.

platforms/

Enthält nativen Quellcode und Build-Skripte für jede Plattform, die Sie zum Projekt hinzugefügt haben.

⚠️ Warnung: Bei Erstellung über die CLI sollten Sie keine Dateien in /platforms/ ändern – es sei denn, Sie verstehen die interne Funktionsweise vollständig oder die offizielle Dokumentation weist explizit dazu an.

Dateien in diesem Ordner werden bei der Projektvorbereitung oder Neuinstallation von Plugins regelmäßig überschrieben.

plugins/

Temporärer Zwischenordner für Plugins: Installierte Plugins werden zunächst hierher kopiert, bevor sie in die einzelnen Plattformordner verteilt werden.

Dieser Ordner sollte nicht in die Versionsverwaltung aufgenommen werden.

Wenn Sie eigene, angepasste oder veränderte Plugins entwickeln, legen Sie diese nicht im plugins-Ordner ab.

Regeln zur Versionsverwaltung

Es wird empfohlen, platforms/ und plugins/ nicht in die Versionsverwaltung aufzunehmen. Bei beiden handelt es sich um Build-Artefakte.

Informationen zu installierten Plattformen und Plugins werden automatisch in package.json gespeichert. Bei Ausführung von cordova prepare lädt das Programm automatisch die benötigten Plattformen und Plugins herunter.

Optionale Verzeichnisse

merges/

Der merges-Ordner wird bei Projektgenerierung über die CLI nicht automatisch erstellt. Das offizielle Team rät von der Nutzung ab, unterstützt ihn aber aus Kompatibilitätsgründen weiterhin.

Unterordner in merges enthalten plattformspezifische Web-Ressourcen (HTML, CSS, JS). Diese werden in der Prepare-Phase in das jeweilige native Projekt kopiert.

Dateien innerhalb von merges/ überschreiben gleichnamige Dateien im www-Ordner (nur für die jeweilige Plattform).

Beispiel einer Verzeichnisstruktur:

plaintext

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

Nach dem Kompilieren der Android- und iOS-Projekte:

  • Android-App: Enthält app.js (aus www) + android.js
  • iOS-App: Es existiert nur app.js, stammt aus merges/ios/app.js und überschreibt die allgemeine Datei aus www

Verzeichnisstruktur

Posted in Cordova-Tutorial

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert