{"_id":"56d1f33900a2a70b00b3659f","__v":0,"user":"5526ca4cf69851170038b496","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","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"},"parentDoc":null,"updates":["562a9bcb191a280d00876323"],"next":{"pages":[],"description":""},"createdAt":"2015-09-24T14:53:22.042Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":2,"body":"In this guide, you'll learn how to set up and integrate Ionic Deploy. If this is your first time working with Ionic.io services, please read our [introduction](doc:io-introduction) before diving in. \n\n[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\": \"danger\",\n  \"body\": \"1. You have a pre-existing app that is already [hooked up to Ionic.io](doc:io-existing-app), or you have created a new app using our [setup](doc:io-install) guide.\\n2. You have completed the steps outlined in our [adding services](doc:io-adding-services) documentation.\\n3. Your Ionic CLI version is 1.6.5 or greater.\",\n  \"title\": \"Requirements\"\n}\n[/block]\nIf you do not meet the requirements listed above, you'll need to work on that before you can continue integrating deploy.\n[block:api-header]\n{\n  \"type\": \"basic\"\n}\n[/block]\n## Add the deploy plugin\n\nIonic deploy uses a custom Cordova plugin to download and apply app updates. To install the plugin, navigate to your project directory and run:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$ ionic plugin add ionic-plugin-deploy\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Cordova compatibility\",\n  \"body\": \"If you haven't upgraded to use Cordova 5.x, you'll need to replace the `ionic-plugin-deploy` with `https://github.com/driftyco/ionic-plugins-deploy` in the command above. You can find out which version you're on by typing `cordova -v` in your terminal.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\"\n}\n[/block]\n## Add the platform web client\n\nNow that we have the necessary plugin, we need to add the platform web client to interface with the plugin and the Ionic.io platform. To install the module, we'll run the following:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$ ionic add ionic-platform-web-client\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\"\n}\n[/block]\n## Your first integration\n\nNow that we have all the necessary components to use Deploy in your app, let's add some some basic code to get you started. Open up your *www/js/controllers.js* file and add the following functions into your `DashCtrl` controller:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \".controller('DashCtrl', function($scope) {\\n\\t\\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})\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nAt it's core, Ionic Deploy only needs to do two things:\n\n1. Check for updates\n2. Download & apply updates\n\nThe two functions we just setup, `$scope.checkForUpdates` and `$scope.doUpdate`, accomplish those tasks respectively.\n\nNow we just need a way to trigger them in our app. We'll just add two simple buttons that we can hit in our *www/templates/tab-dash.html*:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<button class=\\\"button button-primary button-block \\\" ng-click=\\\"checkForUpdates()\\\">\\n  Check for updates\\n</button>\\n\\n<button class=\\\"button button-stable button-block button-pulse\\\" ng-if=\\\"hasUpdate\\\" ng-click=\\\"doUpdate()\\\">\\n  Download update\\n</button>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\"\n}\n[/block]\n## Run the app\n\nYour app is now ready to use deploy! Load your app in an emulator or on your device:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$ ionic run PLATFORM\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\nReplace *PLATFORM* with *ios* or *android* depending on your platform. You can **NOT** test Ionic Deploy using the browser or Ionic View app.\n\nYou should see one of the buttons we added that says *Check for updates*. Go ahead and tap this and notice that nothing appears to happen. That's because we haven't uploaded & deployed a new version of your app.\n\nBut, let's make some noticeable changes to your app first so that when we actually run an update you can see your changes take effect!\n[block:callout]\n{\n  \"type\": \"danger\",\n  \"title\": \"Important\",\n  \"body\": \"Don't close your the app on your device or emulator yet! Keep it running while we make these next changes.\"\n}\n[/block]\nOpen up your *www/index.html* and find the following line: \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<ion-nav-bar class=\\\"bar-stable\\\">\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nNow change it to use *bar-royal* like below. This will make the nav bar purple.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<ion-nav-bar class=\\\"bar-royal\\\">\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nNow let's upload & deploy your changes:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$ ionic upload --note \\\"purple bar\\\" --deploy=production\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\nOnce the command completes, you can go back to your app and check for updates again. This time you should see the *Download update* button appear. Hit that button and then wait for the app to reload. \n[block:callout]\n{\n  \"type\": \"success\",\n  \"title\": \"Success!\",\n  \"body\": \"If you see the purple nav bar, you have just successfully deployed an update to your device or emulator. Congratulations!\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\"\n}\n[/block]\n## Next Steps\n\nYou have completed the initial setup and integration of Ionic Deploy, so you can now move on to learning more about whatever topic interests you the most.\n\nLearn how to deploy different updates to different devices using [deploy channels](doc:deploy-channels), or find out more about the different ways you can [deploy or rollback](doc:deploy-deploying-updates) updates. \n\nIf you want to dive deeper into the Ionic Deploy usage, you can check out our [deploy usage](doc:deploy-usage) guide or read up on how to prevent updates that are equivalent to app store [binary versions](doc:deploy-binary-versioning).","excerpt":"Learn how to set up Ionic Deploy in your app","slug":"deploy-install","type":"basic","title":"Setup Deploy"}

Setup Deploy

Learn how to set up Ionic Deploy in your app

In this guide, you'll learn how to set up and integrate Ionic Deploy. If this is your first time working with Ionic.io services, please read our [introduction](doc:io-introduction) before diving in. [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": "danger", "body": "1. You have a pre-existing app that is already [hooked up to Ionic.io](doc:io-existing-app), or you have created a new app using our [setup](doc:io-install) guide.\n2. You have completed the steps outlined in our [adding services](doc:io-adding-services) documentation.\n3. Your Ionic CLI version is 1.6.5 or greater.", "title": "Requirements" } [/block] If you do not meet the requirements listed above, you'll need to work on that before you can continue integrating deploy. [block:api-header] { "type": "basic" } [/block] ## Add the deploy plugin Ionic deploy uses a custom Cordova plugin to download and apply app updates. To install the plugin, navigate to your project directory and run: [block:code] { "codes": [ { "code": "$ ionic plugin add ionic-plugin-deploy", "language": "shell" } ] } [/block] [block:callout] { "type": "info", "title": "Cordova compatibility", "body": "If you haven't upgraded to use Cordova 5.x, you'll need to replace the `ionic-plugin-deploy` with `https://github.com/driftyco/ionic-plugins-deploy` in the command above. You can find out which version you're on by typing `cordova -v` in your terminal." } [/block] [block:api-header] { "type": "basic" } [/block] ## Add the platform web client Now that we have the necessary plugin, we need to add the platform web client to interface with the plugin and the Ionic.io platform. To install the module, we'll run the following: [block:code] { "codes": [ { "code": "$ ionic add ionic-platform-web-client", "language": "shell" } ] } [/block] [block:api-header] { "type": "basic" } [/block] ## Your first integration Now that we have all the necessary components to use Deploy in your app, let's add some some basic code to get you started. Open up your *www/js/controllers.js* file and add the following functions into your `DashCtrl` controller: [block:code] { "codes": [ { "code": ".controller('DashCtrl', function($scope) {\n\t\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" } ] } [/block] At it's core, Ionic Deploy only needs to do two things: 1. Check for updates 2. Download & apply updates The two functions we just setup, `$scope.checkForUpdates` and `$scope.doUpdate`, accomplish those tasks respectively. Now we just need a way to trigger them in our app. We'll just add two simple buttons that we can hit in our *www/templates/tab-dash.html*: [block:code] { "codes": [ { "code": "<button class=\"button button-primary button-block \" ng-click=\"checkForUpdates()\">\n Check for updates\n</button>\n\n<button class=\"button button-stable button-block button-pulse\" ng-if=\"hasUpdate\" ng-click=\"doUpdate()\">\n Download update\n</button>", "language": "html" } ] } [/block] [block:api-header] { "type": "basic" } [/block] ## Run the app Your app is now ready to use deploy! Load your app in an emulator or on your device: [block:code] { "codes": [ { "code": "$ ionic run PLATFORM", "language": "shell" } ] } [/block] Replace *PLATFORM* with *ios* or *android* depending on your platform. You can **NOT** test Ionic Deploy using the browser or Ionic View app. You should see one of the buttons we added that says *Check for updates*. Go ahead and tap this and notice that nothing appears to happen. That's because we haven't uploaded & deployed a new version of your app. But, let's make some noticeable changes to your app first so that when we actually run an update you can see your changes take effect! [block:callout] { "type": "danger", "title": "Important", "body": "Don't close your the app on your device or emulator yet! Keep it running while we make these next changes." } [/block] Open up your *www/index.html* and find the following line: [block:code] { "codes": [ { "code": "<ion-nav-bar class=\"bar-stable\">", "language": "html" } ] } [/block] Now change it to use *bar-royal* like below. This will make the nav bar purple. [block:code] { "codes": [ { "code": "<ion-nav-bar class=\"bar-royal\">", "language": "html" } ] } [/block] Now let's upload & deploy your changes: [block:code] { "codes": [ { "code": "$ ionic upload --note \"purple bar\" --deploy=production", "language": "shell" } ] } [/block] Once the command completes, you can go back to your app and check for updates again. This time you should see the *Download update* button appear. Hit that button and then wait for the app to reload. [block:callout] { "type": "success", "title": "Success!", "body": "If you see the purple nav bar, you have just successfully deployed an update to your device or emulator. Congratulations!" } [/block] [block:api-header] { "type": "basic" } [/block] ## Next Steps You have completed the initial setup and integration of Ionic Deploy, so you can now move on to learning more about whatever topic interests you the most. Learn how to deploy different updates to different devices using [deploy channels](doc:deploy-channels), or find out more about the different ways you can [deploy or rollback](doc:deploy-deploying-updates) updates. If you want to dive deeper into the Ionic Deploy usage, you can check out our [deploy usage](doc:deploy-usage) guide or read up on how to prevent updates that are equivalent to app store [binary versions](doc:deploy-binary-versioning).