Hello friends,
This is Ashish Vishwakarma. Today we are going to discuss ionic project structure with their folder and file descriptions.
Before start the ionic project structure, You can read the previous tutorial ‘How to open Ionic project in simulator part-2’. if you want to learn from starting you can follow from ionic tutorials part 1 How to create a new project in Ionic 6, Part-1
Let’s start the Ionic project structure
ionic project structure
When we create a project then multiple folders and files added to the project. So here we will discuss all the files and folders one by one. Let’s start with the starting ionic project structure.
1. Node_modules: node_modules contains library downloaded from npm.
2. Platforms: platform folder create when we build projects for android or for IOS. The command to build a project using Cordova is ionic Cordova build android. Here android is a platform.
3. Plugins: plugins folder contain the plugins for the project.
4. Resources: command to generate resource in ionic is ‘ionic Cordova resources android’ for android and ‘ionic Cordova resources ios’ for ios. Generate perfectly sized icons and splash screens from PNG source images for your Cordova platforms
5. SRC: (/src/) Inside of the src directory, we find our code. This is where most of the work for an Ionic app will take place. When we run ‘ionic serve’, our code inside of src/is compiled 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.
(i) src/app/app.module.ts is the entry point for our app.
@NgModule({
declarations: [MyApp, HelloIonicPage, ItemDetailsPage, ListPage],
imports: [BrowserModule, IonicModule.forRoot(MyApp)],
bootstrap: [IonicApp],
entryComponents: [MyApp, HelloIonicPage, ItemDetailsPage, ListPage],
providers: [StatusBar, SplashScreen, {provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}
Every app has a root module that essentially controls the rest of the application. This is very similar to ng-app from Ionic 1 and AngularJS. This is also where we bootstrap our app using ionic Bootstrap.
In this module, we’re setting the root component to MyApp, in src/app/app.component.ts. This is the first component that gets loaded in our app, and typically it’s an empty shell for other components to be loaded into. In app.component.ts, we’re setting our template to src/app/app.html, so let’s look in there.
(ii) ./src/app/app.html
Here’s the main template for the app in src/app/app.html:
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Pages</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item *ngFor="let p of pages" (click)="openPage(p)">{{p.title}}</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>(iii) ./src/assets: assets contains all the static file like images, icons and other custom static files.
(iv) ./src/environments: Using the built-in environment files is a convenient way to utilize different values for the same configurations in your application between development and production environments
(v) ./src/theme: When using the Ionic CLI to start an Angular project, the src/theme/variables.scss file is created where you can override the default Ionic Variables.
(vi) ./src/global.scss: css variables can be set globally in global.scss file.
(vii) ./src/index.html: src/index.html is the main entry point for the app, though its purpose is to set up scripts, CSS includes, and bootstrap, or start running our app.
For your app to function, Ionic looks for the tag in your HTML. In this example we have:
(viii) ./src/main.ts: main.ts file is the entry point of our web-app. It compiles the web-app and bootstraps the AppModule to run in the browser. It starts with importing the basic module which we need in-app.
(ix) ./src/polyfills.ts: Polyfills in angular are few lines of code that make your application compatible for different browsers. The code we write is mostly in ES6(New Features: Overview and Comparison) and is not compatible with IE or Firefox and needs some environment setups before being able to be viewed or used in these browsers.
6. Angular.json: A file named angular.json at the root level of an Angular workspace provides workspace-wide and project-specific configuration defaults for build and development tools provided by the Angular CLI. Path values given in the configuration are relative to the root workspace folder.
7. Config.xml: The config.xml file is the place where we can change the configuration of the app. When we create the app, the default config file will also be created.
8. Package.json: All npm packages contain a file, usually in the project root, called package. JSON – this file holds various metadata relevant to the project. This file is used to give information to npm that allows it to identify the project as well as handle the project’s dependencies.
That’s all for the ionic project structure.
Thanks for today’s topic (ionic project structure).
Ashish Vishwakarma
(Programmer, Technical writer)
ionic project structure