Production ready apps with ionic framework

Production ready apps with Ionic Framework

Table of Contents

Agustin Haller

25 y/o nomad. Hacking around the world one Starbucks at a time.

In this post i will explain how to prepare your project for production. We are going to:

For all the previous task we are going to use a mixture between gulp tasks and cordova hooks . Gulp tasks will be “running” all the time after you run ionic serve. Cordova hooks will run each time you build or run your project with ionic build ios [android] or ionic run android [ios]

Lint your javascript

  1. For this procedure we are going to use these npm packages. Run these commands to install them.
    • npm install jshint --save-dev
    • npm install async --save-dev
  2. Copy the following cordova hooks
    • In before_prepare folder copy these files
    • Give execution permissions to all of them, run
      chmod +x file_name
  3. We are ready to test javascript linting, run this command and you will see that jshint is working
    • ionic build ios [android]

HTML templates transformation

Part of the obfuscation is transforming all the html templates in angular js templates (compressed inside a javascript file)

  1. For this we are going to use gulp-angular-templatecache . Run this command to install the npm package
    • npm install gulp-angular-templatecache --save-dev
  2. Add the following lines to gulpfile.js
    •    templateCache  require'gulp-angular-templatecache'
      

      Like learning from posts like this? Subscribe for more!

    •    paths  
          templatecache 'wwwtemplateshtml'
        
      

      Like learning from posts like this? Subscribe for more!

    •   gulp'templatecache' function done 
          gulp'wwwtemplateshtml'
            templateCachestandalone
            gulp'./www/js'
            'end' done
        
      

      Like learning from posts like this? Subscribe for more!

    •   gulp'default' 'sass' 'templatecache'
      

      Like learning from posts like this? Subscribe for more!

    •   gulp'watch' function 
          gulpwatchpathssass 'sass'
          gulpwatchpathstemplatecache 'templatecache'
        
      

      Like learning from posts like this? Subscribe for more!

  3. Also we need to add this to ionic.project
    •   "gulpStartupTasks": [
          "sass",
          "templatecache",
          "watch"
        ]
      
  4. Add templates module in your app.js
    •   angularmodule'starter' 'ionic' 'starter.controllers' 'templates'
      

      Like learning from posts like this? Subscribe for more!

  5. Add reference to templates.js file in your index.html
    •   <script src="js/templates.js"></script>
      
  6. Run
    • ionic serve
    • This will add a templates.js file inside www/js with all the html templates as angular js templates
    • Note: remember to update the angular templateUrl (for example in app.js and your directives ). By these I mean matching each templateUrl to the name in templates.js file
      • Before in app.js it was
        •   state'intro' 
              url 
              templateUrl "templates/intro.html"
              controller 'IntroCtrl'
            
          

          Like learning from posts like this? Subscribe for more!

      • After html templates transformation we should have this in templates.js
      • So now in app.js we need to change it to
        •   state'intro' 
              url 
              templateUrl "intro.html"
              controller 'IntroCtrl'
            
          

          Like learning from posts like this? Subscribe for more!

Enable ng-strict-di

Before minifying we need to enable angular strict dependency injection (for more information about why you need this, read here. This will save us from breaking angular dependency injection when minifying.

  1. For that we are going to use gulp-ng-annotate . Run this command to install the npm package
    • npm install gulp-ng-annotate --save-dev
  2. Add the following lines to gulpfile.js
    •    ngAnnotate  require'gulp-ng-annotate'
      

      Like learning from posts like this? Subscribe for more!

    •    paths  
          ng_annotate './www/js/*.js'
        
      

      Like learning from posts like this? Subscribe for more!

    •   gulp'ng_annotate' function done 
          gulp'./www/js/*.js'
            ngAnnotatesingle_quotes 
            gulp'./www/dist/dist_js/app'
            'end' done
        
      

      Like learning from posts like this? Subscribe for more!

    •   gulp'default' 'sass' 'templatecache' 'ng_annotate'
      

      Like learning from posts like this? Subscribe for more!

    •   gulp'watch' function 
          gulpwatchpathssass 'sass'
          gulpwatchpathstemplatecache 'templatecache'
          gulpwatchpathsng_annotate 'ng_annotate'
        
      

      Like learning from posts like this? Subscribe for more!

  3. Also we need to add this to ionic.project
    •   "gulpStartupTasks": [
          "sass",
          "templatecache",
          "ng_annotate",
          "watch"
        ]
      
  4. Change the path of our angular js files in the index.html as follows
    •   <script src="dist/dist_js/app/app.js"></script>
      
  5. Add ng-strict-di directive in ng-app tag (inside index.html )
    •   <body ng-app="your-app" ng-strict-di>
      
  6. Run
    • ionic serve
    • This will create a dist folder inside www folder with all our js files with strict dependency injection fixed

Concatenate js and css files

  1. For the concatenation of files we are going to use gulp-useref . Run this command to install the npm package
    • npm install gulp-useref --save-dev
  2. Add the following lines to gulpfile.js
    •    useref  require'gulp-useref'
      

      Like learning from posts like this? Subscribe for more!

    •    paths  
          useref './www/*.html'
        
      

      Like learning from posts like this? Subscribe for more!

    •   gulp'useref' function done 
           assets  userefassets
          gulp'./www/*.html'
            assets
            assetsrestore
            useref
            gulp'./www/dist'
            'end' done
        
      

      Like learning from posts like this? Subscribe for more!

    •   gulp'default' 'sass' 'templatecache' 'ng_annotate' 'useref'
      

      Like learning from posts like this? Subscribe for more!

    •   gulp'watch' function 
          gulpwatchpathssass 'sass'
          gulpwatchpathstemplatecache 'templatecache'
          gulpwatchpathsng_annotate 'ng_annotate'
          gulpwatchpathsuseref 'useref'
        
      

      Like learning from posts like this? Subscribe for more!

  3. Also we need to add this to ionic.project
    •   "gulpStartupTasks": [
          "sass",
          "templatecache",
          "ng_annotate",
          "useref",
          "watch"
        ]
      
  4. Add the following to index.html to bundle css and js as you want
    •   <!-- build:css dist_css/styles.css -->
        <link href="css/ionic.app.css" rel="stylesheet">
        <!-- endbuild -->
      
    •   <!-- build:js dist_js/app.js -->
        <script src="dist/dist_js/app/app.js"></script>
        <script src="dist/dist_js/app/controllers.js"></script>
        <!-- endbuild -->
      
    • Note: if you require an external script/file don’t include it inside a bundle. For example:
      •   script src"http://maps.google.com/maps/api/js"script
        

        Like learning from posts like this? Subscribe for more!

  5. Run
    • ionic serve
    • This will create the bundled files inside you www/dist folder also a new index.html with the new path to the bundled files.

Uglify, minify and obfuscate

  1. For this procedure we are going to use these npm packages. Run these commands to install them.
    • npm install cordova-uglify --save-dev
    • npm instal mv --save-dev
  2. Copy the following cordova hooks
    • In after_prepare folder copy these files
    • Give execution permissions to all of them, run
      • chmod +x file_name
  3. We are ready to get the obfuscated/minified/compressed apk, run this command and you will see your production ready app
    • ionic build ios [android]

Community Rating

14 Rating


Make this post better!

Fork this post!

Forked 3 times so far

Like this article?

Save it to your bookmarks

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.