Ionic Boilerplate - A new Ionic 1 starter boilerplate that simplifies your dev life

Hi guys,

If you are looking for an Ionic template project to help you quickly start your development, please help check out this Github project - Ionic Boilerplate.

Ionic Boilerplate comes with the following features:

  • The Modularized AngularJS code structure enables you to freely define your app functionality and add modules if needed. The registration of Angular Elements (controller, service, etc.) are all done automatically. Check this post for more details.
  • The full stack of app code processing, including icon font generation, styles autoprefixer and minifyCss ops, scripts uglify and lint ops, html injection, etc.
  • A folder-based Gulp tasks management system facilitates the Gulp task building and management.
  • Gulp Flow - the Gulp based streamline application development process to help boost the whole development practice, covering the following points:
    • Simplify Terminal interface (CLI) to avoid the use of bothgulp and ionic.
    • Enable the project code structure to accommodate different development and building environments, such as dev, staging, testing, prod, etc.
    • Aim for more automatic product building system, especially for auto-versioning.
    • Make the development process CI(Continuous Integration)-friendly and CD(Continuous Deployment)-friendly.

It is designed to be easy to use and customize.

  • It is ready to use out-of-box.
    • git clone to get the code.
    • npm install and bower install to set up the local dependencies.
    • gulp, then you will see the browser opens the app and you are ready to go to do live dev.
  • The project code structure is clearly organized.
    • Dedicated app folder for all raw code, such as images, fonts, styles, scripts, etc.
    • For now, the embedded demo app is just the Ionic “tab” starter app, which is to demo how Modularized AngularJS code structure works.
  • The Gulp Flow enables a great way to assistant your app development as well as app build and release.
    • It extends the existing Gulp CLI to provide a set of handy CLI to build your app, run simulator, run device, etc. Type gulp -h to learn more.
    • It provides a central Gulp Flow config file (/gulpfile/config.js) that supports highly customization to fit your own development procedure.
  • With Gulp Flow, building and releasing app is as easy as like:
export BUILD_TARGET=release
export BUILD_ENV=production
gulp --$BUILD_TARGET --env=$BUILD_ENV # Do a **release** build to `www` folder
gulp bump --env=$BUILD_ENV -v=prerelease --preid=beta # Do versioning. 
gulp appinfo --env=$BUILD_ENV # Update **app info** after versioning. 
gulp add-ios --env=$BUILD_ENV # Add an iOS platform
gulp resources --env=$BUILD_ENV # Prepare the app icon and splash images. 
ionic build ios --device --release # Build the `ipa` file and `app.dsym` folder. 
  • It also ships with Travis CI and HockeyApp support.

Please check the Github README to explore more.

Suggestions and Contribution

I’m looking for you guys to help take a hand-on. Please let me know if you have any comment and suggestion.

And also, always welcome contribution to this Github project.

1 Like