The structure of a PhoneGap application

After creating a new project, as explained in the previous chapter, you'll see the following structure inside the project's root folder:

• www: This directory contains the source files of the application and so we will be playing a lot in this directory. It contains the css, js, and img subdirectories, where you can place the respective files. Apart from assets such as CSS, JavaScript, and images, we will also have application-related HTML files.
• merges: In this folder, you can add any platform-specific customization so you don't have to modify the source files every time you work with a project. For example, we can use this feature to use a different font style on Android devices only. The platforms that you want to override will have a specific folder similar to the www folder having its own CSS, JS, HTML, and image contents:

  merges/
  |-- ios/
  | '-- app.js
  |-- android/
  | '-- app.js
  www/
  '-- app.js

  In the preceding directory structure, the global application has the app.js file and in the merges directory, each platform has a separate app.js file. During the build process, the global app.js file will be replaced with the platform-specific app.js file.

• platforms: This directory will have platform-dependent build files. For each platform that we add to the project, we can see a subdirectory.
• plugins: This is the directory where you'll find the plugins used in the project. Whenever we install new plugins, they will be added over here.
• hooks: This directory can contain scripts that can be used to customize the Cordova/PhoneGap commands. This is really for advanced users where integrating with build systems and version control systems is required.
• config.xml: This configuration file will have all the values specific to the application, such as application name, package name, version number, and other such configurations.