Ionic project structure

ionic project structure

Let’s look at the newly created Ionic project to understand its structure. There are some generated folders and we need to understand their destination.

Open an existing Ionic project or generate a new one using ionic start command. The project structure should look like this:

ionic project structure

Ionic project files structure

It contains such folders:

  • hooks – may contain scripts for customizing Cordova commands
  • platforms – this folder is used to keep platform-related data
  • plugins – contains Cordova plugins and their data
  • scss – contains the scss file to customize Ionic UI
  • www – stores all application code (JS, HTML, CSS), libraries and images.

and such files:

  • bower.json – used for managing UI-dependencies (like jQuery and Bootstrap);
  • config.xml – cordova global configuration file
  • gulpfile.js – used for loading node.js projects (dependencies) or modules;
  • ionic.project – contains parameters for Ionic app;
  • package.json – specifies npm packages
  • .bowerrc – configuration of Bower
  • .editconfig – contains settings used by code editor (charset, code style, etc.)
  • .gitignore – file that shows to git VCS which files don’t need to be indexed.

I’ll explain each of them in details in the next section.

Leave a Reply

Be the First to Comment!