Ionic Code Structure

Ionic Project structure

Let's go through the files and folders of the app.

Our project will have ios and an android folder at the root of the project. These are entirely separate native projects that should be considered part of your Ionic app, this means you need to check them into source control and edit them in their own IDEs. I suggest you to read more about Capacitor in this post.

In the root of the project we have the following important files and folders:

• /node_modules

  • The npm packages installed in the project with the npm install command.

• /resources

  • • when building the app for different platforms (like iOS or android), this folder will be automatically generated with the app resources like the logo and the splash screen image. You should put your own resources here.

• /src

  • This is the most important folder and where the majority of the app will be developed. Here we have all the files that make our ionic app and is the location where we will spend most of our time.

• /www

  • This folder is generated automatically and you shouldn't change anything from here. It's where all the compiled files will go.

• angular.json

  • Main configuration file for the Angular CLI.

• package.json

  • As every modern web application, we need a package system and package manager to handle all the third-party libraries and modules our app uses. Inside this file you will find all the dependencies and some other handy stuff like the npm scripts that will help us a lot to orchestrate the development (bundling/compiling) workflow.

• tsconfig.json

  • Main configuration file, it needs to be in the root path as it’s where the typescript compiler will look for it.

​We have already talked about the configuration for the workflow enough, now let's dive in the details of the /src folder.

/src

Inside of the /src directory we find our raw, uncompiled code. This is where most of the work for your Ionic app will take place.

When we start the scripts that handle the bundling/compilation workflow, our code inside of /src gets bundled and transpiled into the correct Javascript version that the browser understands (currently, ES5). That means we can work at a higher level using TypeScript, but compile down to the older form of Javascript the browser needs.

Under this folder you will find the following important folders and files:

• /app

  • Has all the components, modules, pages, services and styles you will use to build your app.

• /assets

  • In this folder you will find sample images, sample-data json’s, and any other asset you may require in your app.

• /environments

  • Under this folder are configuration files used by the Angular CLI to manage the different environment variables.

  • For example we could have a local database for our development environment and a product database for production environment.

  • When we run ng serve it will use by default the dev environment.

• /theme

  • It includes all the theming, variables and sass mixins to be used in our ionic app.

• index.html

  • This is the main entry point for the app, though its purpose is to set up scripts, CSS includes, or start running our app. We won’t spend much of our time in this file.

• tsconfig.app.json

  • This file extends tsconfig.json main file and adds some specific configuration for the app. It’s then used in angular.json

• tsconfig.server.json

  • This file extends tsconfig.json main file and adds some specific configuration for the server. It’s then used in angular.json

• manifest.json

  • This file is the app manifest to be used for the progressive web app. We will explain more about this in PWA section.

/app

The App folder is the largest folder because it contains all the code of our ionic app. It has all the components, modules, pages, services and styles you will use to build your app.

This is the core of the project. Let’s have a look at the structure of this folder so you get an idea where to find things and where to add your own modules to adapt this project to your particular needs.

We designed this ionic project with a modular approach.

We strive to showcase an advanced app module architecture so you get a better idea on how to structure and scale your project. Again, modules are great to achieve scalability.

Inside the /app folder there are also some important files:

• app.component.html

  • This serves as the skeleton of the app. Typically has a <ion-router-outlet> to render the routes and their content. It can also be wrapped with content that you want to be in every page (for example a footer). In this app we added the side menu in this file.

• app.component.ts

  • It’s the Angular component that provides functionality to the html file I just mentioned about. In this template we have all the code for the side menu.

• app.module.ts

  • This is the main module of the ionic project.

• app-routing.module.ts

  • Here we define the main routes. Child routes of other lazy modules are defined inside those modules. These routes are registered to the Angular RouterModule in the AppModule.

/assets

In this folder you will find images, sample-data json’s, and any other asset you may require in your app.

/theme

Here you will find all the variables, mixins, shared styles, etc, that will make your app customizable and extendable.

Here is where you will change the main colors of the app to match your styles.

Maybe you don’t know Sass? Briefly, it is a superset of css that will ease and speed your development cycles incredibly.