Ionic 2 Project Structure

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 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.


Ionic 2 Project Structure

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.



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


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


Contains your platform targets like iOs or Android.


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.


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


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.


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


(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.


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.


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!

This website uses cookies

These cookies are used to collect information about how you interact with our website and allow us to remember you. We use this information in order to improve and customize your browsing experience, and for analytics and metrics about our visitors both on this website and other media. To find out more about the cookies we use, see our Privacy Policy.

Please consent to the use of cookies before continuing to browse our site.

Like What You See?

Got any questions?