Skip to content
  • Services
  • About
  • Partners
  • Work
  • Insights
  • Careers
  • Contact
  • Services
  • About
  • Partners
  • Work
  • Insights
  • Careers
  • Contact
May 24, 2016

Ionic 2 Project Structure

Angular, Ionic

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

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.

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!

Posted in Angular, Ionic
Share this

Timothy Eagan

Timothy Eagan was a Senior Engineer at Modus Create, and is an accomplished software developer with over 20 years of experience in creating customized business solutions. He can be found in Providence, RI. Tim is also an OIF veteran, former paperboy and part-time comedian.
Follow

Related Posts

  • Building Better Ionic Apps with Ionic Pro
    Building Better Ionic Apps with Ionic Pro, Part 3

    In our previous post, we demonstrated how to easily run an Ionic app on devices…

  • Building Better Ionic Apps with Ionic Pro
    Building Better Ionic Apps with Ionic Pro, Part 2

    In Part 1 of this series, we created a rapid prototype using Ionic Creator. In…

Subscribe to the Modus Newsletter

Receive the latest blog articles and insights every month from the Modus team.

Let's Chat

If forms aren’t your thing, you can always call us (+1-855-721-7223).

Modus-Logo-Primary-White.svg
  • Services
  • About
    • Newsroom
  • Partners
  • Work
  • Insights
    • Blog
    • Modus Labs
  • Careers
Virginia (US)

12100 Sunset Hills Road
Suite 150
Reston, Virginia, 20190
Tel: +1-855-721-7223

California (US)
12130 Millennium Dr

Los Angeles, CA 90094

Missouri (US)
609 E High St

Jefferson City, MO 65101

Romania

Str. Mihai Veliciu, no. 17
Cluj-Napoca, Romania
Tel: +40-0786-887-444

Costa Rica

2nd Floor, Plaza Koros, Av 3
San José, Santa Ana, Costa Rica

© 2021 Modus. All Rights Reserved.

Privacy Policy | Accessibility Statement | Sitemap

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.

Accept
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled

Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.

Non-necessary

Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.

Scroll To Top