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 ...