The Ionic project structure

So far, we have scaffolded a blank Ionic app and launched it in a browser. Now, we will walk through the scaffolded project structure.

If we open the chapter2 example1 folder in our text editor, we should see the following folder structure at the root of the project:

. 
├── config.xml 
├── hooks 
├── ionic.config.json 
├── node_modules 
├── package.json 
├── platforms 
├── plugins 
├── resources 
├── src 
├── tsconfig.json 
├── tslint.json 
├── www

Here is a quick explanation of each of the items:

• src: This is the folder where all the development happens. The app source code will be placed here. If you are coming from Ionic 1 to Ionic 2, this is the first change you would notice. For me, this is a very good upgrade to the folder structure, as it keeps the development code separate from the deployment code.
• hooks: This folder consists of scripts that get executed when a particular Cordova task is performed. A Cordova task can be any of the following: after_platform_add (after a new platform is added), after_plugin_add (after a new plugin is added), before_emulate (before emulation begins), after_run (before the app is run), and so on. Each task is placed inside a folder named after the Cordova task.
• resources: This folder consists of the various versions of the application icon and splash screen based on the mobile operating system.
• www: This folder consists of the build Ionic code, written inside the src folder. All the code present inside this folder is intended to land inside the WebView.
• config.xml: This file consists of all the meta information needed by Cordova while converting our Ionic app to a platform-specific installer. If you open config.xml, you will see a bunch of XML tags that describe our project. We will take a look at this file in detail again.
• ionic.config.js: This file consists of the configuration that is needed for the build task.
• package.json: This file consists of the project-level node dependencies.
• tsconfig.json: This file consists of the TypeScript configuration.
• tslint.json: This file consists of TS lint rules. To know more about these rules, refer to: https://palantir.github.io/tslint/rules/.