Search⌘ K
AI Features
Home
Courses
Mastering Mobile Application Development with Ionic

Project Structure of an Ionic App

Explore the organization and purpose of the default files and folders in an Ionic app project. Understand how key directories like src, www, and configuration files fit together to support development, building, and deployment of Ionic applications. This lesson helps you confidently manage your app's structure for effective coding and maintenance.

We'll cover the following...

Default file structure

If we navigate to the root directory of an Ionic app, we should see a default structure that resembles the following:

For those new to Ionic development, the above structure might seem a little intimidating at first. Throughout this lesson, though, we’ll break each part of the app down so we fully understand their purpose.

In all honesty, we will spend most of our development time within the src subdirectory with some possible configuration changes to the capacitor.config.json and package.json files (we’ll cover what these might entail during later chapters).

The root directory

Our default project root directory consists of the following files and directories:

  • The .browserslistrc file is used by the Ionic build system to adjust the output CSS and JS to support the browsers that are specified within this file.

  • The .editorconfig file helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs.

  • The .eslintrc.json file is used to lint, or check, ECMAScript or JavaScript files for any formatting issues and code errors.

  • The .git/ directory isA local git-based repository that is used for version control of project assets.

  • The .gitignore file comes into play when using a git-based repository (such as GitHub ...