🌟 We are Open Source! Check out our repository on GitHub

Ionic Project Structure

A scalable and maintainable folder structure for Ionic applications

File Structure

  • src
    • index.html
    • main.ts
    • app
      • app.component.ts
      • app.component.html
      • app.module.ts
      • app-routing.module.ts
    • pages
      • home
        • home.page.ts
        • home.page.html
        • home.page.scss
  • ionic.config.json
  • package.json
  • README.md

Directory Structure Explanation

src/

The main source directory containing all Ionic application code and assets.

src/index.html

The main HTML file that serves as the entry point for the Ionic application.

src/main.ts

The main TypeScript file that bootstraps the Angular/Ionic application.

src/app/

Contains the root app component and main application configuration.

app/app.component.ts

The root component class that serves as the main application container.

app/app.module.ts

The root module that configures and bootstraps the Ionic application.

src/pages/

Contains page components that represent different screens in the mobile app.

ionic.config.json

Ionic CLI configuration file defining project settings and build options.