Ionic 2
Posted By Sebastian

Ionic 2 Project Structure


In this video you we’ll dive deeper into the project structure of an Ionic 2 starter project and examine the most important parts step-by-step.

Let’s examine the initial project structure of an empty Ionic 2 project. The project structure which can be seen in the following screenshot is created by using the blank project starter template:

Ionic 2 Project Structure

App Folder

The app folder is the place where the implementation of our Ionic 2 application is mainly happening. Within the app folder you can find two import subfolders:

  • app/pages: This folder is containing all pages of your application. Within pages you’ll again find subfolders. Each page is implemented as an Angular 2 component (you’ll learn more about Angular 2 components later on). As each component implementation can consist of multiple files, the files belonging to one component are kept in one subfolder of app/pages. For instance, in the initial project structure you can find a folder app/pages/home which contains three files: home.js, home.html and home.scss. All these files belong to the home page of the app. home.js contains the implementation of the corresponding class HomePage. The template code for the HomePage component is stored in home.html and SCSS styling is for that template is available in home.scss.
  • app/themes: This folder will contain all SCSS files which contain styling on application level. If you take a look into that folder you’ll find a core SCSS file as well as platform specific SCSS files. Another SCSS file is containing SCSS variables.

Inside the app folder you’ll find another file: app.js. This file is containing the code of the root component of our application. As each Angular 2 application is built up of a tree of components the root component is the top component and the starting point of the application. In the next chapters you’ll learn more about Angular 2 components and the component tree.

WWW Folder

This is the web root folder containing the compiled code of your Ionic 2 application for the various platforms. Inside of the www folder you’ll find the subfolder build were compiled code is stored.

In general there is no need to touch the code inside of build because this code is compiled everytime the code in the app folder changes. There is only one exception to that rule and that is the index.html file. This file is stored in www directly and is the starting point of our application. As you can see in the following listing index.html is used to include important scripts which we make use of in our Ionic 2 application:


<!DOCTYPE html>
<html dir=”ltr” lang=”en”>

<head>
<title>Ionic</title>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”>
<meta name=”format-detection” content=”telephone=no”>
<meta name=”msapplication-tap-highlight” content=”no”>

<link ios-href=”build/css/app.ios.css” rel=”stylesheet”>
<link md-href=”build/css/app.md.css” rel=”stylesheet”>
<link wp-href=”build/css/app.wp.css” rel=”stylesheet”>
</head>

<body>
<ion-app></ion-app>

<!— cordova.js required for cordova apps –>
<script src=”cordova.js”></script>
<!— Polyfill needed for platforms without Promise and Collection support –>
<script src=”build/js/es6-shim.min.js”></script>
<!— Zone.js and Reflect-metadata –>
<script src=”build/js/Reflect.js”></script>
<script src=”build/js/zone.js”></script>
<!— the bundle which is built from the app’s source code –>
<script src=”build/js/app.bundle.js”></script>
</body>

</html>

The Cordova framework is made available by including the cordova.js script. Including Cordova is a prerequisite for creating builds of our app for iOS and Android. Another script which is included is es6-shim.min.js. The polyfill library is needed for browsers which do not support all ECMAScript 2015 features yet. Furthermore the libraries Zone.js and Reflect-metadata (Reflect.js) are added. Zone.js is implementing Zones which are used in Angular 2 to efficiently know when to update the view. Reflect-metadata is used to enable Dependency Injection through decorators.

The last library which is included in the body section of index.html is app.bundle.js. This JavaScript bundle file contains our Ionic 2 application. The build process automatically creates this application bundle from the content we provided in the app folder. All application code is bundled into one file, which makes it easier to include all components of our Ionic app in index.html. So when you’re accessing the application through the browser you’re actually viewing the bundled version (www/build/js/app.bundle.js) and not the code you created inside of app/ folder.


The Ionic 2 Build Process

It’s important to understand the concept of the Ionic 2 build process and the reason why this process is required. The build process takes the code from the app/ folder and creates builds for all platforms which have been added to your project in www/build/. As Ionic 2 is based on Angular 2 and uses ECMAScript 2015 and TypeScript features the build process includes transpiling. Transpiling means that your ECMAScript 2015 and TypeScript from the app/ folder is compiled to valid ECMAScript 5 code. This is required as most of today’s browsers are only capable to handle ECMAScript 5.


Beside <script> elements, index.html contains one additional element which is also very important for our Ionic 2 application: <ion-app></ion-app>. This is a placeholder for the content of the Ionic application. At runtime this element will be replaced with the HTML code which is returned by the root component.

Configuration Files

The root folder of the Ionic 2 project contains a bunch of configuration files. The two files config.xml and package.json are the most important ones.

  • config.xml: This configuration file is used by Cordova and includes settings which are relevant for building your application for the iOS and Android platform.
  • package.json: This file contains all dependencies (NPM packages) of our application. You can add new packages or update the version of packages already included. By executing the command npm install in the project directory the dependencies listed in package.json are downloaded and added to the project automatically.

Resources Folder

The resources folder contains images which are used for the splash screen and icons of your app when building for iOS and Android.

Hooks Folder

Hooks are custom scripts which are executed as part of the build process. Of course, hooks are an advanced feature and for most cases not needed. But if you want to add custom logic to the build process you could create hooks and place the corresponding scripts in this directory.

Node_modules Folder

This is the storage location where you can find all installed NPM dependencies. For example, if you add another dependency to package.json and afterwards execute the npm install command the package is automatically downloaded and installed into a new subfolder within node_modules. As the Ionic 2 framework is also installed via NPM package, this folder does also contain a subfolder named ionic-angular where you can find the Ionic 2 framework files.


Using and writing about best practices and latest technologies in web design & development is my passion.

    View Comments

    *