Ionic 3 Project structure

In this post, we will see about ionic 3 project folder structure. It contains number of files and folders. Please go through this post to understand about how to create ionic app, setting up development environment and testing the app using browser, emulator or real time devices.

Following is the folder structure of an ionic project.

ionic folder structure

  • srcThis directory will contain actual code of the application. This is the main folder we are going to work with while application development.
  • node_modules All node related libraries resides inside this directory. Ionic used npm as it’s module package management.
  • resources This folder will contain resource files like splash screen, app icon for IOS, android.
  • platforms : Contains platform specific build elements. This will be added once any platform is added to the project.
  • plugins This folder contains cordova plugin related files.
  • www This folder contains the transpiled and minified css and js inside build directory. This will be generated once we build the app.(Ex: by executing serve command)  It also contains index.html file, which bootstraps transpiled files from src directory.
  • config.xml Configuration file used by cordova to define different app specific elements.
  • package.json This folder contains list of npm packages installed for current project.

The src directory will contain all the application related code. Following are the few important folders/files of this directory.

  • index.html This file is the entry point of the app. This file contains all the required js and css files imported.
  • app This folder is the application’s root directory, which contains application level files like:
    • app.component.ts This file contains necessary class imports, from ionic, angular library and classes which are exported within our app. It also contains Decorators, which are used to specify page templates, and Directives. The main part is the class declaration, which defines the actual functionality of our app. This file is used to initialize the app.
    • app.module.tsThis file contains the initial modules, providers and entry components. Any new Page/ pipe creation should be Declared here. Addition of new Providers also should be mentioned here.
    • app.scss Here we can add styles, that we want to apply globally. Also we can use this file to import other sass files.
    • app.template.html : This is the Page template of the app.
    • main.ts : This file is used to bootstrap our app.
  • assets This folder contains required assets to our app like images, icon, json data, etc. All the files here are copied to www/assets directory, once we build our app.
  • theme This folder contains variables.scss file, which can be used to style our app. We can modify this file to set app level css.
  • pages Each page of ionic app will have a separate folder with required files. This makes it easier to organize all the files related to a page in one place. This folder contains page template(.html file), a Typescript file(.ts file) and a page related styling(.scss file).

In this post, we saw basic Ionic app’s folder structure. Check out other Ionic related posts here.

Version details: