Ionic 2 Project Structure

This is the first part in a series of introductory posts on Ionic 2.

If you’re not familiar with Ionic 2, it’s the latest incarnation of Ionic – “the world’s most popular cross-platform mobile development technology.” This latest version has been updated with a whole host of new features. The biggest and most obvious change is support for Angular 2.

The ionic.io site has this to say: “With Ionic 2, we’ve gone back to square one and completely rethought how a mobile toolkit should work. We’ve dramatically improved performance, reduced the complexity of the code you need to write, and made it possible to build completely bespoke apps that compete with the best apps in the world.”

Where Do We Start?

I always like to get a big picture view of an app before diving in. For me, that usually includes an understanding of what the critical files are and where everything is. How do I configure this thing? How do I bootstrap it? Where do I put my all of my shit application files? So, with that in mind, let’s take a look at how this project is structured.

Overview

For the sake of brevity, I’m going to pick the most interesting parts and not mention some of the more boring/obvious ones. I’m looking at you node_modules.

Folders

./app

Starting with folders, we can see that the bulk of our app lives here: pages, services, etc.

./hooks

These scripts run as part of the Cordova build process. If you need to customize that in any way, then do it here.

./platforms

Contains your platform targets like iOs or Android.

./www

This is where your index.html file lives. However, don’t be fooled into thinking this is where your app should live. Put all of your application scripts in the ./app folder.

./www/index.html

This is obviously where you should update your meta tags and add in any required scripts (cordova, polyfills, vendor build, app build, etc.).

./ionic.config.json

These are your project-specific settings. Primarily it’s just the app name and id along with any proxies you may need for your app.

./package.json

If you are familiar with npm, you will recognize this immediately. If not, then this file describes your app’s production and development dependencies.

./webpack.config.js

(optional) If you are using webpack for builds then you certainly will need this for adjusting your webpack build settings. If you are not using webpack then, please move on… nothing to see here.

./gulpfile.js

Here you find hooks for modifying the Ionic gulp tasks. Use these to modify the Ionic build. There are a number of custom hooks you can take advantage of. You most likely will not need to modify this file.

./app/app.js or app.ts

Finally some code! This is where we bootstrap our application and where you will find your app’s @App decorator. There are a handful of global settings you’ll want to pass in. Most importantly, you’ll want to pass your app’s root template, config and list of providers.

Summary

I hope you found this quick Ionic post helpful. As always, don’t let your quest for knowledge end here. Head on over to the Ionic 2 Documentation and read up on this great framework. If you have any comments or wisdom to share with me in return, leave them below or look me up on Twitter!