{"_id":"56d1f33900a2a70b00b365a3","category":{"_id":"56d1f33900a2a70b00b36594","pages":["56d1f33900a2a70b00b3659b","56d1f33900a2a70b00b3659c","56d1f33900a2a70b00b3659d","56d1f33900a2a70b00b3659e","56d1f33900a2a70b00b3659f","56d1f33900a2a70b00b365a0","56d1f33900a2a70b00b365a1","56d1f33900a2a70b00b365a2","56d1f33900a2a70b00b365a3","56d1f33900a2a70b00b365a4","56d1f33900a2a70b00b365a5","56d1f33900a2a70b00b365a6","56d1f33900a2a70b00b365a7","56d1f33900a2a70b00b365a8","56d1f33900a2a70b00b365a9"],"__v":1,"project":"5526c95cf69851170038b48f","version":"56d1f33700a2a70b00b3658e","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-04-10T15:43:37.809Z","from_sync":false,"order":4,"slug":"ionic-deploy","title":"Ionic Deploy"},"project":"5526c95cf69851170038b48f","parentDoc":null,"user":"5526ca4cf69851170038b496","version":{"_id":"56d1f33700a2a70b00b3658e","project":"5526c95cf69851170038b48f","__v":2,"createdAt":"2016-02-27T19:04:23.946Z","releaseDate":"2016-02-27T19:04:23.946Z","categories":["56d1f33900a2a70b00b3658f","56d1f33900a2a70b00b36590","56d1f33900a2a70b00b36591","56d1f33900a2a70b00b36592","56d1f33900a2a70b00b36593","56d1f33900a2a70b00b36594","56d1f33900a2a70b00b36595","56d1f33900a2a70b00b36596","56d1f33900a2a70b00b36597","56d1f33900a2a70b00b36598","56d1f33900a2a70b00b36599","56d1f33900a2a70b00b3659a","571f9497ada30c34003b7cee"],"is_deprecated":false,"is_hidden":false,"is_beta":true,"is_stable":true,"codename":"beta","version_clean":"2.0.0-beta","version":"2.0.0-beta"},"__v":2,"updates":["560cc1d88753612100214268","561f0f8a9dc7ce0d00c38ba3","564434d3b360ea0d00914723","5659e8b1f80fb10d0057a937","5674b19ff856b10d0039ba59","568e566c70ca1f0d00358028","56a18687f9a6d20d00010bbf","56bc8c28b745dc0d00c1ee61"],"next":{"pages":[],"description":""},"createdAt":"2015-09-24T15:03:36.394Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":4,"body":"[block:callout]\n{\n  \"type\": \"danger\",\n  \"title\": \"Warning:\",\n  \"body\": \"If you're building your app with iOS9, deploys will fail to function correctly until you add an exclusion rule for AWS S3 servers. This is due to the introduction of the [App Transport Security](https://developer.apple.com/library/prerelease/ios/technotes/App-Transport-Security-Technote/). You can find instructions on how to add the appropriate exclusion rules [here](https://mobile.awsblog.com/post/Tx2QM69ZE6BGTYX/Preparing-Your-Apps-for-iOS-9)\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Requirements\",\n  \"body\": \"You need the Ionic CLI version 1.6.5 or higher to follow this guide effectively.\"\n}\n[/block]\n## First things first, let's get some code...\n\nAs with many of the guides for the Ionic.io services, we're assuming you're familiar with the Ionic Framework. In this tutorial, we're going to start with the Ionic tabs starter project, but you can use one of your own apps if you wish. This guide is written from the standpoint that you have never integrated an Ionic.io service into your app.\n\nIf you haven't done so already, [signup](https://apps.ionic.io/signup) for an Ionic.io account, and then you can grab the starter with the following:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$ ionic start deploy-tutorial tabs\\n$ cd deploy-tutorial\\n$ ionic io init\\n$ ionic serve --lab\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\nYou should see the the following in your browser if you're using the tabs starter app:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/Xqcf9Pg9SRiHVE4mLjbk_Screen%20Shot%202015-05-07%20at%201.31.05%20PM.png\",\n        \"Screen Shot 2015-05-07 at 1.31.05 PM.png\",\n        \"1169\",\n        \"1040\",\n        \"#905f5b\",\n        \"\"\n      ],\n      \"caption\": \"\"\n    }\n  ]\n}\n[/block]\n## Okay, now, let's add the platform web client!\n\nFirst, let's install the web client, so the deploy service can interface with your app. Run the following to install the platform web client:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$ ionic add ionic-platform-web-client\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\n## Great, now that we have the web client, we need the deploy plugin...\n\nThe Ionic Deploy plugin is a Cordova native plugin that is used to download and update your app code. Adding the plugin is as simple as running the following command:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$ ionic plugin add ionic-plugin-deploy\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\n## Okay, now we've got all the requirements in place! Let's implement some Ionic Deploy code...\n\nAt its core, Ionic deploy only really needs to do two things:\n\n1. Check for updates\n2. Download and apply updates.  \n\nLet's add two scope functions which can accomplish these tasks in our `DashCtrl`:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \".controller('DashCtrl', function($scope) {\\n  \\n  var deploy = new Ionic.Deploy();\\n  \\n  // Update app code with new release from Ionic Deploy\\n  $scope.doUpdate = function() {\\n    deploy.update().then(function(res) {\\n      console.log('Ionic Deploy: Update Success! ', res);\\n    }, function(err) {\\n      console.log('Ionic Deploy: Update error! ', err);\\n    }, function(prog) {\\n      console.log('Ionic Deploy: Progress... ', prog);\\n    });\\n  };\\n\\n  // Check Ionic Deploy for new code\\n  $scope.checkForUpdates = function() {\\n    console.log('Ionic Deploy: Checking for updates');\\n    deploy.check().then(function(hasUpdate) {\\n      console.log('Ionic Deploy: Update available: ' + hasUpdate);\\n      $scope.hasUpdate = hasUpdate;\\n    }, function(err) {\\n      console.error('Ionic Deploy: Unable to check for updates', err);\\n    });\\n  }\\n})\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n...and then add some buttons in our template to trigger these functions, we're making the update button only visible when there's a new version available: \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<button class=\\\"button button-primary button-block \\\" ng-click=\\\"checkForUpdates()\\\">\\n\\tCheck for updates\\n</button>\\n<button class=\\\"button button-stable button-block button-pulse\\\" ng-if=\\\"hasUpdate\\\" ng-click=\\\"doUpdate()\\\">\\n\\tdownload update\\n</button>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"danger\",\n  \"title\": \"Testing Ionic Deploy\",\n  \"body\": \"Keep in mind a few things when testing Ionic Deploy\\n* It won't work on a browser, use a physical device or a simulator\\n* Be careful not to deploy versions of your app that that use incompatible ionic-service-core or ionic-service-deploy components as it relates to a devices's binary versions. See the [Binary Versioning](doc:deploy-binary-versioning) section for more info.\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"That's it!\",\n  \"body\": \"You're all ready to go with Ionic Deploy!  To test it, check our the docs on [Deploying Updates](doc:deploy-deploying-updates).\"\n}\n[/block]","excerpt":"Implement Ionic Deploy from scratch in you app!","slug":"deploy-from-scratch","type":"basic","title":"Deploy From Scratch"}

Deploy From Scratch

Implement Ionic Deploy from scratch in you app!

[block:callout] { "type": "danger", "title": "Warning:", "body": "If you're building your app with iOS9, deploys will fail to function correctly until you add an exclusion rule for AWS S3 servers. This is due to the introduction of the [App Transport Security](https://developer.apple.com/library/prerelease/ios/technotes/App-Transport-Security-Technote/). You can find instructions on how to add the appropriate exclusion rules [here](https://mobile.awsblog.com/post/Tx2QM69ZE6BGTYX/Preparing-Your-Apps-for-iOS-9)" } [/block] [block:callout] { "type": "warning", "title": "Requirements", "body": "You need the Ionic CLI version 1.6.5 or higher to follow this guide effectively." } [/block] ## First things first, let's get some code... As with many of the guides for the Ionic.io services, we're assuming you're familiar with the Ionic Framework. In this tutorial, we're going to start with the Ionic tabs starter project, but you can use one of your own apps if you wish. This guide is written from the standpoint that you have never integrated an Ionic.io service into your app. If you haven't done so already, [signup](https://apps.ionic.io/signup) for an Ionic.io account, and then you can grab the starter with the following: [block:code] { "codes": [ { "code": "$ ionic start deploy-tutorial tabs\n$ cd deploy-tutorial\n$ ionic io init\n$ ionic serve --lab", "language": "shell" } ] } [/block] You should see the the following in your browser if you're using the tabs starter app: [block:image] { "images": [ { "image": [ "https://files.readme.io/Xqcf9Pg9SRiHVE4mLjbk_Screen%20Shot%202015-05-07%20at%201.31.05%20PM.png", "Screen Shot 2015-05-07 at 1.31.05 PM.png", "1169", "1040", "#905f5b", "" ], "caption": "" } ] } [/block] ## Okay, now, let's add the platform web client! First, let's install the web client, so the deploy service can interface with your app. Run the following to install the platform web client: [block:code] { "codes": [ { "code": "$ ionic add ionic-platform-web-client", "language": "shell" } ] } [/block] ## Great, now that we have the web client, we need the deploy plugin... The Ionic Deploy plugin is a Cordova native plugin that is used to download and update your app code. Adding the plugin is as simple as running the following command: [block:code] { "codes": [ { "code": "$ ionic plugin add ionic-plugin-deploy", "language": "shell" } ] } [/block] ## Okay, now we've got all the requirements in place! Let's implement some Ionic Deploy code... At its core, Ionic deploy only really needs to do two things: 1. Check for updates 2. Download and apply updates. Let's add two scope functions which can accomplish these tasks in our `DashCtrl`: [block:code] { "codes": [ { "code": ".controller('DashCtrl', function($scope) {\n \n var deploy = new Ionic.Deploy();\n \n // Update app code with new release from Ionic Deploy\n $scope.doUpdate = function() {\n deploy.update().then(function(res) {\n console.log('Ionic Deploy: Update Success! ', res);\n }, function(err) {\n console.log('Ionic Deploy: Update error! ', err);\n }, function(prog) {\n console.log('Ionic Deploy: Progress... ', prog);\n });\n };\n\n // Check Ionic Deploy for new code\n $scope.checkForUpdates = function() {\n console.log('Ionic Deploy: Checking for updates');\n deploy.check().then(function(hasUpdate) {\n console.log('Ionic Deploy: Update available: ' + hasUpdate);\n $scope.hasUpdate = hasUpdate;\n }, function(err) {\n console.error('Ionic Deploy: Unable to check for updates', err);\n });\n }\n})", "language": "javascript" } ] } [/block] ...and then add some buttons in our template to trigger these functions, we're making the update button only visible when there's a new version available: [block:code] { "codes": [ { "code": "<button class=\"button button-primary button-block \" ng-click=\"checkForUpdates()\">\n\tCheck for updates\n</button>\n<button class=\"button button-stable button-block button-pulse\" ng-if=\"hasUpdate\" ng-click=\"doUpdate()\">\n\tdownload update\n</button>", "language": "html" } ] } [/block] [block:callout] { "type": "danger", "title": "Testing Ionic Deploy", "body": "Keep in mind a few things when testing Ionic Deploy\n* It won't work on a browser, use a physical device or a simulator\n* Be careful not to deploy versions of your app that that use incompatible ionic-service-core or ionic-service-deploy components as it relates to a devices's binary versions. See the [Binary Versioning](doc:deploy-binary-versioning) section for more info." } [/block] [block:callout] { "type": "info", "title": "That's it!", "body": "You're all ready to go with Ionic Deploy! To test it, check our the docs on [Deploying Updates](doc:deploy-deploying-updates)." } [/block]