{"id":1170,"date":"2016-07-05T16:37:55","date_gmt":"2016-07-05T16:37:55","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=1170"},"modified":"2017-04-03T19:51:12","modified_gmt":"2017-04-03T19:51:12","slug":"advanced-workflows-for-building-rock-solid-ionic-apps-part-1","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/advanced-workflows-for-building-rock-solid-ionic-apps-part-1","title":{"rendered":"Advanced Workflows for Building Rock-Solid Ionic Apps, Part 1"},"content":{"rendered":"<p><em><a href=\"https:\/\/github.com\/gruppjo\">Jonathan Grupp<\/a> is a software engineer at <a href=\"http:\/\/www.mwaysolutions.com\/en\/enterprise-mobility-management\/\">M-Way Solutions<\/a>, the owner and maintainer of Generator-M-Ionic, and a frequent contributor to Ionic. He has written a three-part series on advanced workflows for building rock-solid Ionic apps. This is Part 1.<\/em><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"1283\" height=\"721\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/blog-01.png\" alt=\"blog-01\" class=\"aligncenter size-full wp-image-1171 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/blog-01.png 1283w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/blog-01-300x169.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/blog-01-768x432.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/blog-01-1024x575.png 1024w\" data-sizes=\"auto, (max-width: 1283px) 100vw, 1283px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1283px; --smush-placeholder-aspect-ratio: 1283\/721;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1283\" height=\"721\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/blog-01.png\" alt=\"blog-01\" class=\"aligncenter size-full wp-image-1171\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/blog-01.png 1283w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/blog-01-300x169.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/blog-01-768x432.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/blog-01-1024x575.png 1024w\" sizes=\"auto, (max-width: 1283px) 100vw, 1283px\" \/><\/noscript><\/p>\n<p>At <a href=\"http:\/\/www.mwaysolutions.com\/\">M-Way Solutions<\/a>, we&#8217;ve been building large-scale, enterprise-level apps with Ionic for the past two years. To aid our development process, we created <a href=\"https:\/\/github.com\/mwaylabs\/generator-m-ionic\">Generator-M-Ionic<\/a>, an open-source collection of development tools alongside the <a href=\"http:\/\/ionicframework.com\/docs\/cli\/\">Ionic CLI<\/a>. This tool allows developers to quickly create prototypes that later scale with complex project requirements, like testing, quality assurance, and continuous integration.<br \/>\n<!--more--><\/p>\n<h3>Who We Are<\/h3>\n<p>We&#8217;ve been developing mobile apps for years&#8211;long before Ionic and Angular made it into our development stack. We consistently explored different combinations of MV* frameworks and mobile frameworks throughout the years, and we even developed our own mobile framework, but Angular &amp; Ionic <a href=\"http:\/\/blog.mwaysolutions.com\/2015\/09\/10\/generator-m-ionic-html5-mobile-app-development-evolved\/\">kept consistently impressing us<\/a>. Focusing on Angular and Ionic allowed us to tackle many of the other challenges posed by app development, our business, and enterprise customers.<\/p>\n<p>These challenges led to the genesis of <a href=\"https:\/\/github.com\/mwaylabs\/generator-m-ionic\">Generator-M-Ionic<\/a>, which is now a valuable part of our development process and addresses the following aspects of mobile app development:<\/p>\n<ul>\n<li><strong>Provides useful workflows<\/strong>\n<ul>\n<li>for development, testing, quality assurance, building, continuous integration<\/li>\n<li>for complex project requirements, like managing different sets and versions of APIs, app icons, and splash screens<\/li>\n<\/ul>\n<\/li>\n<li><strong>Embeds nicely into the ecosystem<\/strong>\n<ul>\n<li>integrates nicely into different solutions like <a href=\"https:\/\/ionic.io\/blog\">Ionic Platform<\/a> using the <a href=\"http:\/\/ionicframework.com\/docs\/cli\/\">Ionic CLI<\/a> and our own <a href=\"https:\/\/www.relution.io\/en\/\">Relution<\/a><\/li>\n<li>uses a technology stack many developers already know: <a href=\"https:\/\/git-scm.com\/\">Git<\/a>, <a href=\"http:\/\/yeoman.io\/\">Yeoman<\/a>, <a href=\"http:\/\/bower.io\/\">Bower<\/a>, <a href=\"http:\/\/gulpjs.com\/\">Gulp<\/a>, <a href=\"https:\/\/cordova.apache.org\/\">Cordova<\/a>, etc.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Standardizes project setup<\/strong>\n<ul>\n<li>tames and wires together an ever-changing and <strong>complex frontend technology stack<\/strong><\/li>\n<li>gives a default <strong>project &amp; file structure<\/strong><\/li>\n<li>comes with <strong>sensible default configurations<\/strong> for development tools like <a href=\"https:\/\/git-scm.com\/\">Git<\/a>, <a href=\"http:\/\/eslint.org\/\">ESLint<\/a>, and others<\/li>\n<li>is still easily modified to suit <strong>different project requirements<\/strong><\/li>\n<li>makes app development more <strong>approachable<\/strong> for newcomers<\/li>\n<li>simplifies <strong>project handovers<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Whether we&#8217;re throwing together a proof of concept for a customer or a prototype for a presentation, the project is able to seamlessly transition into a full-fledged powerful enterprise app, no matter which platforms or sets of devices we&#8217;re developing for.<\/p>\n<h3>About this Series<\/h3>\n<p>This post is part of a series on kick-starting your development with Ionic and Generator-M-Ionic. Here, we&#8217;ll explain how to set things up, generate your first app, structure files, and integrate with Git. Let&#8217;s have some fun!<\/p>\n<p>In Part 2, we&#8217;ll cover quality assurance and testing; adding Angular components, Sass, Cordova Plugins and bower packages; how to run your app in your browser and on a device using livereload; and how to integrate into different ecosystems like the <a href=\"http:\/\/ionic.io\/\">Ionic Platform<\/a>, using the <a href=\"http:\/\/ionicframework.com\/docs\/cli\/\">Ionic CLI<\/a>.<\/p>\n<p>Part 3 will teach you how to ease through backend issues with environments and a CORS proxy, how to use powerful build tools like resource sets and build vars, and how to handle continuous integration and delivering your app.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"1948\" height=\"870\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/tech_stack.png\" alt=\"tech_stack\" class=\"aligncenter size-full wp-image-1172 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/tech_stack.png 1948w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/tech_stack-300x134.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/tech_stack-768x343.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/tech_stack-1024x457.png 1024w\" data-sizes=\"auto, (max-width: 1948px) 100vw, 1948px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1948px; --smush-placeholder-aspect-ratio: 1948\/870;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1948\" height=\"870\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/tech_stack.png\" alt=\"tech_stack\" class=\"aligncenter size-full wp-image-1172\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/tech_stack.png 1948w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/tech_stack-300x134.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/tech_stack-768x343.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/tech_stack-1024x457.png 1024w\" sizes=\"auto, (max-width: 1948px) 100vw, 1948px\" \/><\/noscript><\/p>\n<h3>Getting Your System Ready<\/h3>\n<p>The first thing you need to install is <a href=\"https:\/\/nodejs.org\/en\/\">Node<\/a> and the <strong>Platform SDKs<\/strong> for the platforms you want to develop for. The latter is only needed if you want to run your app on a real device during development. If you&#8217;ve already built apps using the <a href=\"http:\/\/ionicframework.com\/docs\/cli\/\">Ionic CLI<\/a>, you probably already have those installed and don&#8217;t need to do it again. If not, you can follow our <a href=\"https:\/\/github.com\/mwaylabs\/generator-m-ionic\/blob\/master\/docs\/guides\/installation_prerequisites.md\">Installation and Prerequisites Guide<\/a>.<\/p>\n<p>After you&#8217;ve set up everything properly, launch your terminal and run:<\/p>\n<pre><code class=\"sh\">npm install --global generator-m-ionic bower yo gulp\n<\/code><\/pre>\n<p>This will install Generator-M-Ionic using the <a href=\"https:\/\/www.npmjs.com\/\">node package manager<\/a>, along with the popular web development tools <a href=\"http:\/\/bower.io\/\">Bower<\/a> (manage and install client packages like Angular), <a href=\"http:\/\/yeoman.io\/\">Yeoman<\/a> (runs the generator and scaffolds your app), and <a href=\"http:\/\/gulpjs.com\/\">Gulp<\/a> (runs all post-setup tasks). If you don&#8217;t know what these are, the <a href=\"https:\/\/github.com\/mwaylabs\/generator-m-ionic\/blob\/master\/docs\/intro\/whats_in_the_box.md\">What&#8217;s in the box Guide<\/a> can help shed some light on the technologies Generator-M-Ionic uses.<\/p>\n<h3>Create your project<\/h3>\n<p>Once all of this is done, you probably want to create a new folder to generate your project in and launch the generator:<\/p>\n<pre><code class=\"sh\"># create new directory and change into it\nmkdir adventure-island &amp;&amp; cd $_\n# launch generator\nyo m-ionic\n<\/code><\/pre>\n<p>You&#8217;ll be asked a series of questions regarding the project you&#8217;re creating, like this one:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"1392\" height=\"188\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/generator_question.png\" alt=\"generator_question\" class=\"aligncenter size-full wp-image-1173 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/generator_question.png 1392w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/generator_question-300x41.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/generator_question-768x104.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/generator_question-1024x138.png 1024w\" data-sizes=\"auto, (max-width: 1392px) 100vw, 1392px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1392px; --smush-placeholder-aspect-ratio: 1392\/188;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1392\" height=\"188\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/generator_question.png\" alt=\"generator_question\" class=\"aligncenter size-full wp-image-1173\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/generator_question.png 1392w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/generator_question-300x41.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/generator_question-768x104.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/generator_question-1024x138.png 1024w\" sizes=\"auto, (max-width: 1392px) 100vw, 1392px\" \/><\/noscript><\/p>\n<p>If you&#8217;re not sure what some of these mean, they are explained in the <a href=\"https:\/\/github.com\/mwaylabs\/generator-m-ionic\/tree\/master\/docs\/start\/questions.md\">Questions document<\/a>. For the rest of this series, I&#8217;m going with <code>tabs<\/code> as a starter template. When you&#8217;ve answered all the questions, all the node and bower dependencies will be installed for your project. This might take a while, but luckily, you&#8217;ll only have to do this once for each project.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"1418\" height=\"260\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/npm_install.png\" alt=\"npm_install\" class=\"aligncenter size-full wp-image-1175 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/npm_install.png 1418w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/npm_install-300x55.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/npm_install-768x141.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/npm_install-1024x188.png 1024w\" data-sizes=\"auto, (max-width: 1418px) 100vw, 1418px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1418px; --smush-placeholder-aspect-ratio: 1418\/260;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1418\" height=\"260\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/npm_install.png\" alt=\"npm_install\" class=\"aligncenter size-full wp-image-1175\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/npm_install.png 1418w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/npm_install-300x55.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/npm_install-768x141.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/npm_install-1024x188.png 1024w\" sizes=\"auto, (max-width: 1418px) 100vw, 1418px\" \/><\/noscript><\/p>\n<p>After everything&#8217;s done, run:<\/p>\n<pre><code class=\"sh\">gulp watch\n<\/code><\/pre>\n<p>Your default browser will open up automatically. If you don&#8217;t want that, adding the <code>--no-open<\/code> flag will prevent opening your browser or a new window. Now, activating your developer tools (<code>cmd+alt+i<\/code> in Chrome on OS X) will let you see your app as below.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"806\" height=\"1368\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/gulp_watch.png\" alt=\"gulp_watch\" class=\"aligncenter size-full wp-image-1176 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/gulp_watch.png 806w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/gulp_watch-177x300.png 177w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/gulp_watch-768x1304.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/gulp_watch-603x1024.png 603w\" data-sizes=\"auto, (max-width: 806px) 100vw, 806px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 806px; --smush-placeholder-aspect-ratio: 806\/1368;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"806\" height=\"1368\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/gulp_watch.png\" alt=\"gulp_watch\" class=\"aligncenter size-full wp-image-1176\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/gulp_watch.png 806w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/gulp_watch-177x300.png 177w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/gulp_watch-768x1304.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/gulp_watch-603x1024.png 603w\" sizes=\"auto, (max-width: 806px) 100vw, 806px\" \/><\/noscript><\/p>\n<p>Congratulations; you&#8217;ve built your first app! This might not look like much now, but the generator has done A LOT of work for you already. Let&#8217;s have a closer look:<\/p>\n<h3>File structure<\/h3>\n<p>Your project folder now contains a lot of files that were generated for you. In order to give you a first general orientation, the most important of these files are:<\/p>\n<h4>Cordova related files and folders<\/h4>\n<pre><code class=\"sh\">config.xml  # configuration of your Cordova project\nplatforms\/  # platforms you installed\nplugins\/    # plugins you installed\nwww\/        # will contain the build of your web app, before Cordova is added\n<\/code><\/pre>\n<h4>Gulp tasks and dependencies<\/h4>\n<pre><code class=\"sh\">bower.json    # dependencies like Angular &amp; Ionic installed to app\/bower_components\/\ngulpfile.js   # configuration of all the Gulp tasks\ngulp\/         # more Gulp tasks\npackage.json  # dependencies like Gulp plugins installed to node_modules\/\n<\/code><\/pre>\n<h4>Application files<\/h4>\n<pre><code class=\"sh\">app\/\n  \u2514\u2500\u2500 index.html # single most important file, everything is wired together here\n  \u2514\u2500\u2500 app.js     # include modules YOU create, for now only &#039;main&#039;\n  \u2514\u2500\u2500 main\/      # all other app files, angular files, styles, assets, ...\n    \u2514\u2500\u2500 main.js  # routing, angular module dependencies\n    \u2514\u2500\u2500 ...\n<\/code><\/pre>\n<h4>index.html<\/h4>\n<p>Everything that makes up your app comes together in this file: Cordova, Ionic, Angular, Angular modules, your own application logic, styles and assets. I&#8217;ll give some more details here, without going into the particulars too much:<\/p>\n<p>When you ran <code>gulp watch<\/code>, it did this to your <code>index.html<\/code>:<br \/>\n&#8211; inject all bower javascript and css files (Angular, Ionic, &#8230;)<br \/>\n&#8211; inject all of your app files (compiled css, angular files, &#8230;)<\/p>\n<p>And whenever you make changes to your application files or if you create new ones, <code>gulp watch<\/code> will update all necessary files and reload your browser. Additionally, -besides the necessary HTML and angular bootstrapping we just discussed, the <code>index.html<\/code> contains:<br \/>\n&#8211; the link to the <code>cordova.js<\/code> file that Cordova provides upon build<br \/>\n&#8211; basic ionic directives used by the routing in your <code>main.js<\/code><\/p>\n<h3>Git integration<\/h3>\n<p>Now that you have created your first app with Generator-M-Ionic and wired it all together with <code>gulp watch<\/code>, it might be a good time to secure your progress! Good thing your project comes with a fine-tuned <a href=\"https:\/\/git-scm.com\/\">Git<\/a> integration already! So simply type the following in your project folder:<\/p>\n<pre><code class=\"sh\">git init    # initialize git\ngit status  # show all files that git can track\n<\/code><\/pre>\n<p>You&#8217;ll notice that we have already talked about most of the files that Git finds. Worry not; we will discover the rest of them step by step throughout this series. However, you might also notice that Git ignores all the third party code of Bower, Node, and Cordova, namely the <code>app\/bower_components\/<\/code>, <code>node_modules\/<\/code>, <code>platforms\/<\/code> and <code>plugins\/<\/code> folders. This is done using the <code>.gitignore<\/code> and <code>.gitattributes<\/code> files, which got accordingly configured during project setup. Thus, Git ignores all files that aren&#8217;t source files or in any other way specific to your project, keeping your repository nice and small and your commits clutter-free. For the curious, there&#8217;s a <a href=\"https:\/\/github.com\/mwaylabs\/generator-m-ionic\/blob\/master\/docs\/guides\/git_integration.md\">Git integration Guide<\/a> in the documentation with more particulars.<\/p>\n<p>To create your first commit, all you have to do is:<\/p>\n<pre><code class=\"sh\">git add . # add all relevant files\n# create commit\ngit commit -m &quot;project setup with yo m-ionic and gulp watch&quot;\n<\/code><\/pre>\n<p><strong>Side note:<\/strong> I&#8217;m using double quotes on any terminal related strings, because they&#8217;re safe on all systems. On OS X or Linux, using single quotes is just fine.<\/p>\n<h3>Nice!<\/h3>\n<p>You&#8217;ve taken your first steps with <a href=\"https:\/\/github.com\/mwaylabs\/generator-m-ionic\">Generator-M-Ionic<\/a> and learned about file structure, <code>gulp watch<\/code>, and Git integration! Take your development to the next level in Part 2 of our series, which will cover quality assurance, adding a variety of ingredients to your app, and integrating into different ecosystems like Ionic Platform.<\/p>\n<h3>Get in touch<\/h3>\n<p>Feedback, ideas, comments regarding this blog post or any of the features discussed here are very welcome in either the comments section below, at our <a href=\"https:\/\/github.com\/mwaylabs\/generator-m-ionic\">Generator-M-Ionic&#8217;s Github repository<\/a>, or in the <a href=\"https:\/\/gitter.im\/mwaylabs\/generator-m-ionic\">Generator-M-Ionic Gitter Chat<\/a>.<\/p>\n<h3>Credits<\/h3>\n<p>Author: <a href=\"https:\/\/github.com\/gruppjo\">Jonathan Grupp<\/a><br \/>\nHeadline illustrations: <a href=\"http:\/\/www.art-noir.net\/\">Christian Kahl<\/a><br \/>\nSpecial thanks to Volker Hahn, Mathias Maier, and Tim Lancina<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Jonathan Grupp is a software engineer at M-Way Solutions, the owner and maintainer of Generator-M-Ionic, and a frequent contributor to Ionic. He has written a three-part series on advanced workflows for building rock-solid Ionic apps. This is Part 1. At M-Way Solutions, we&#8217;ve been building large-scale, enterprise-level apps with Ionic for the past two years. [&hellip;]<\/p>\n","protected":false},"author":39,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[6,3],"class_list":["post-1170","post","type-post","status-publish","format-standard","hentry","category-all","tag-cloud","tag-ionic"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Advanced Workflows for Building Rock-Solid Ionic Apps, Part 1 - Ionic Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/advanced-workflows-for-building-rock-solid-ionic-apps-part-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Advanced Workflows for Building Rock-Solid Ionic Apps, Part 1\" \/>\n<meta property=\"og:description\" content=\"Jonathan Grupp is a software engineer at M-Way Solutions, the owner and maintainer of Generator-M-Ionic, and a frequent contributor to Ionic. He has written a three-part series on advanced workflows for building rock-solid Ionic apps. This is Part 1. At M-Way Solutions, we&#8217;ve been building large-scale, enterprise-level apps with Ionic for the past two years. [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/advanced-workflows-for-building-rock-solid-ionic-apps-part-1\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2016-07-05T16:37:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-04-03T19:51:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/blog-01.png\" \/>\n<meta name=\"author\" content=\"Jonathan Grupp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jonathan Grupp\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/advanced-workflows-for-building-rock-solid-ionic-apps-part-1#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/advanced-workflows-for-building-rock-solid-ionic-apps-part-1\"},\"author\":{\"name\":\"Jonathan Grupp\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/8ac19c487b42e3cf084a53c32bbdca65\"},\"headline\":\"Advanced Workflows for Building Rock-Solid Ionic Apps, Part 1\",\"datePublished\":\"2016-07-05T16:37:55+00:00\",\"dateModified\":\"2017-04-03T19:51:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/advanced-workflows-for-building-rock-solid-ionic-apps-part-1\"},\"wordCount\":1308,\"commentCount\":9,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/advanced-workflows-for-building-rock-solid-ionic-apps-part-1#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/blog-01.png\",\"keywords\":[\"Cloud\",\"Ionic\"],\"articleSection\":[\"All\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/advanced-workflows-for-building-rock-solid-ionic-apps-part-1#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/advanced-workflows-for-building-rock-solid-ionic-apps-part-1\",\"url\":\"https:\/\/ionic.io\/blog\/advanced-workflows-for-building-rock-solid-ionic-apps-part-1\",\"name\":\"Advanced Workflows for Building Rock-Solid Ionic Apps, Part 1 - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/advanced-workflows-for-building-rock-solid-ionic-apps-part-1#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/advanced-workflows-for-building-rock-solid-ionic-apps-part-1#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/blog-01.png\",\"datePublished\":\"2016-07-05T16:37:55+00:00\",\"dateModified\":\"2017-04-03T19:51:12+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/advanced-workflows-for-building-rock-solid-ionic-apps-part-1#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/advanced-workflows-for-building-rock-solid-ionic-apps-part-1\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/advanced-workflows-for-building-rock-solid-ionic-apps-part-1#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/blog-01.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/blog-01.png\",\"width\":1283,\"height\":721},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/advanced-workflows-for-building-rock-solid-ionic-apps-part-1#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Advanced Workflows for Building Rock-Solid Ionic Apps, Part 1\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/8ac19c487b42e3cf084a53c32bbdca65\",\"name\":\"Jonathan Grupp\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/IMG_7259_small-150x150.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/IMG_7259_small-150x150.jpg\",\"caption\":\"Jonathan Grupp\"},\"url\":\"https:\/\/ionic.io\/blog\/author\/jon\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Advanced Workflows for Building Rock-Solid Ionic Apps, Part 1 - Ionic Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/advanced-workflows-for-building-rock-solid-ionic-apps-part-1","og_locale":"en_US","og_type":"article","og_title":"Advanced Workflows for Building Rock-Solid Ionic Apps, Part 1","og_description":"Jonathan Grupp is a software engineer at M-Way Solutions, the owner and maintainer of Generator-M-Ionic, and a frequent contributor to Ionic. He has written a three-part series on advanced workflows for building rock-solid Ionic apps. This is Part 1. At M-Way Solutions, we&#8217;ve been building large-scale, enterprise-level apps with Ionic for the past two years. [&hellip;]","og_url":"https:\/\/ionic.io\/blog\/advanced-workflows-for-building-rock-solid-ionic-apps-part-1","og_site_name":"Ionic Blog","article_published_time":"2016-07-05T16:37:55+00:00","article_modified_time":"2017-04-03T19:51:12+00:00","og_image":[{"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/blog-01.png"}],"author":"Jonathan Grupp","twitter_card":"summary_large_image","twitter_creator":"@ionicframework","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Jonathan Grupp","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/advanced-workflows-for-building-rock-solid-ionic-apps-part-1#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/advanced-workflows-for-building-rock-solid-ionic-apps-part-1"},"author":{"name":"Jonathan Grupp","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/8ac19c487b42e3cf084a53c32bbdca65"},"headline":"Advanced Workflows for Building Rock-Solid Ionic Apps, Part 1","datePublished":"2016-07-05T16:37:55+00:00","dateModified":"2017-04-03T19:51:12+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/advanced-workflows-for-building-rock-solid-ionic-apps-part-1"},"wordCount":1308,"commentCount":9,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/advanced-workflows-for-building-rock-solid-ionic-apps-part-1#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/blog-01.png","keywords":["Cloud","Ionic"],"articleSection":["All"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/advanced-workflows-for-building-rock-solid-ionic-apps-part-1#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/advanced-workflows-for-building-rock-solid-ionic-apps-part-1","url":"https:\/\/ionic.io\/blog\/advanced-workflows-for-building-rock-solid-ionic-apps-part-1","name":"Advanced Workflows for Building Rock-Solid Ionic Apps, Part 1 - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/advanced-workflows-for-building-rock-solid-ionic-apps-part-1#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/advanced-workflows-for-building-rock-solid-ionic-apps-part-1#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/blog-01.png","datePublished":"2016-07-05T16:37:55+00:00","dateModified":"2017-04-03T19:51:12+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/advanced-workflows-for-building-rock-solid-ionic-apps-part-1#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/advanced-workflows-for-building-rock-solid-ionic-apps-part-1"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/advanced-workflows-for-building-rock-solid-ionic-apps-part-1#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/blog-01.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/blog-01.png","width":1283,"height":721},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/advanced-workflows-for-building-rock-solid-ionic-apps-part-1#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Advanced Workflows for Building Rock-Solid Ionic Apps, Part 1"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/8ac19c487b42e3cf084a53c32bbdca65","name":"Jonathan Grupp","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/IMG_7259_small-150x150.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/IMG_7259_small-150x150.jpg","caption":"Jonathan Grupp"},"url":"https:\/\/ionic.io\/blog\/author\/jon"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/1170","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/39"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=1170"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/1170\/revisions"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=1170"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=1170"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=1170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}