Project Structure of an Ionic App

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 or Bitbucket) for version control. The .gitignore file states what should be excluded from commits and pushed to the repository.

• The android/ directory is added for the Ionic project via Capacitor only after the first ionic build process has been run.

• The angular.json file is used to define the configuration schema for the whole project, including values such as where project source files are located, custom prefixes for components, and automated task commands.

• The capacitor.config.json file is used to define the configuration for the Capacitor tooling.

• The e2e/ directory is used to store End-to-End tests (also ...