# File and Folder Structure

## Cordova version

With different Cordova versions, the file and folder structure of a Monaca project are configured differently.

### For Cordova 6.2 and 6.5

| File/Folder Name               | Description                                         |
| ------------------------------ | --------------------------------------------------- |
| [plugins/](#plugins-folder)    | Storage folder for additional plugins               |
| `res/`                         | Resources folder for Android, iOS and Winrt         |
| [www/](#www-folder)            | Storage folder for the main body of the application |
| [config.xml](#config-xml-file) | Application configuration file                      |

### For Cordova 7.1

| File/Folder Name               | Description                                         |
| ------------------------------ | --------------------------------------------------- |
| [plugins/](#plugins-folder)    | Storage folder for additional plugins               |
| `res/`                         | Resources folder for Android, iOS and Winrt         |
| [www/](#www-folder)            | Storage folder for the main body of the application |
| [config.xml](#config-xml-file) | Application configuration file                      |
| `package.json`                 | Cordova plugins management file                     |

## www folder

Files of the application’s main body are stored here. Files and folders can be arranged freely within the `www` folder, but the following parts have a special significance:

| File/Folder Name           | Description                                                                                     |
| -------------------------- | ----------------------------------------------------------------------------------------------- |
| `index.html`               | The first page to be displayed when the application starts up. The startup file can be changed. |
| [components/](#www-folder) | The folder created by Monaca for all JS/CSS components used in the project.                     |

## Components folder

The folder `www/components/` is for all JS/CSS components used in the project. However, the following two files exist in the folder by default regardless of what kinds of components you have added to your project:

| File Name    | Description                                                   |
| ------------ | ------------------------------------------------------------- |
| `loader.js`  | A JavaScript file used by Monaca to load JavaScript libraries |
| `loader.css` | A style sheet file used by Monaca to load CSS libraries       |

{% hint style="info" %}
The `loader.js` and `loader.css` files must be read from an HTML file.
{% endhint %}

Each component will create its own folder in the (one level below) `www/components/` folder.`loader.js` file also loads `cordova.js` file.

## Plugins folder

If you import a Cordova plugin using a ZIP file, it will be stored inside this folder. However, if you import the plugin using package URL/Plugin ID, the plugin file will be downloaded during build.

## config.xml file

The `config.xml` is a file that controls various settings of Cordova. Please refer to the following documentations regarding how to edit the `config.xml` file for Android and iOS:

* [config.xml for Android](https://en.docs.monaca.io/reference/config/android/config_xml)
* [config.xml for iOS](https://en.docs.monaca.io/reference/config/ios/config_xml)

{% hint style="info" %}
For Cordova 6.2 or higher, `config.xml` file is also used to configure either Android or iOS application settings. Please refer to [Cordova Custom Config Plugin](https://en.docs.monaca.io/reference/third_party_phonegap/custom_config). 
{% endhint %}

See Also:

* [Third-party Cordova Plugins](https://en.docs.monaca.io/reference/third_party_phonegap)
* [Core Cordova Plugins](https://en.docs.monaca.io/reference/core-cordova-plugins)