 As a mobile developer, have you ever found yourself wanting to release app updates more quickly? Potentially to respond to a critical bug fix, or even to flight a key new feature? I'm Jonathan Carter, and in this video, I'll show you how the CodePush service can help you engage more directly with your end users by instantly updating your Cordova and React Native apps. The CodePush service works by acting as a central repository which developers can publish updates to and that apps can query updates from. Once you've initially distributed your app through whichever stores are appropriate for your end users, you can begin releasing updates directly through CodePush. This provides you with a deterministic web-like agility experience as well as complete control over the actual update UI that is presented to your end users. Let me show you how this works. Once you've registered an account with the CodePush service, you can begin managing your apps as well as releasing updates using our node-based CLI. So using the command that I have displayed here, you can install the CLI locally, but in my case, I've already installed it. Once you've done this, if you run code-push from your terminal, you will see all of the sub-commands that allow you to manage your apps, do releases, authenticate with the service, as well as a handful of other capabilities. So in this demo, I'm going to show the getting started experience for a Cordova app. And if you want to see the details for hooking up CodePush to a React Native application, please refer to the website and documentation. So first and foremost, we need to let the service know that we want to create an app and have it allow us to release updates to it. So what we'll do is say CodePush app add, and we'll just call this simple demo connect demo. What this is going to do is notify the service of this app, and the service will automatically create what are called deployments, which allow us to have multiple versions of our app in flight at any given time. So you'll notice by default, it gave us a production and staging, which is particularly useful if you want to use CodePush to test out features or bug fixes before actually submitting them to end users. So to get started adding CodePush to the app, let's copy this deployment key which we'll use in a moment. So for Cordova, the way to CodePushify an app is to add the CodePush client to your application just like any other plugin. So if you say Cordova plugin add, the name of our plugin is called Cordova plugin code push. So you run that in this case, I already have it installed, but you will see that this is how you would add that. Once you have your plugin added to your application, there are just a few simple steps that you need to configure it so that when it makes the checks for update, it can actually succeed in getting the right changes. So first, in your config.xml, you need to tell the CodePush client which deployment key you want to use to actually check for updates. So in this case, I just paste it in the deployment key for the staging deployment that we just created in the CLI. Secondly, you need to make sure that the CodePush.azurewebsites.net URL is added to your root pages CSP. That way from a security perspective, your app is allowed to actually make checks for updates using the CodePush service. And then finally, you just need to add a line of code to your app that actually does the check for updates. So in this case, when you added the plugin, you have a new global object added to your app called CodePush, which has a method called sync. Now there are more advanced APIs to do a bit more customization of the actual experience of checking and downloading for an update. But in this case, sync is sufficient for showing a very basic and acceptable end user experience. So now that we've made this changes, let's go ahead and run this app, deploy it to the Visual Studio Android emulator. And what we'll do is we'll attach the Chrome DevTools to it so that we can see that there is no update available, make a change, release that through CodePush, and then actually see that change take effect. So let's give this a minute while the Gradle build is happening. And then it will deploy to the emulator with this is the exact app that we're seeing. So let's go over to Chrome and you'll see here's the Hello World app that we just deployed. So if we go to the console, you'll notice here it says the application is up to date. So this is the CodePush plugin checking the server using the deployment key that we configured. So what we want to now do is let's go back to the app and make a very trivial change, and then we'll actually release that through CodePush and see it get picked up. So here we'll just go to the h1 element of the root page and add the string connect to the header. So to actually deploy this change to the CodePush service, you first need to actually do a Cordova prepare, which will take all of your www files, do any platform specific merges, in this case Android, and make sure that you have the right set of content that you want to deploy to your users. So then you can do a CodePush release where you specify the name of the app, as well as the directory that you want to release. So in this case, it's going to be platforms, Android, assets, www, which is the Cordova Android folder that represents the prepared set of files for this application. And then finally, you need to specify what is the native version of the app that corresponds to this change. So if we go to our config.xml, you'll see that right now our app version is 0.0.1, and so I'm just simply telling the service that that is the version that is needed for this CodePush update to be effective. So if we go ahead and run that, you'll notice that the release was successful. If we bring back the app and go back to the Chrome console, what I'll do is simply reload the app to force it to rerun the CodePush sync logic. And so here you see CodePush plugin give us a log message saying an update is available, and we get this message displayed. An update is available. Would you like to install it? We can go ahead and ignore that and move on with using the app. Now the reason we were able to ignore it is because we did not specify that the update was mandatory when doing the release. Now let's do a reload again, and here we see that the update is presented to us yet again because we did not install it the previous time. So we'll do an install that will download the update, apply it, and then restart the app. So here you see the connect string that we added. Once again, if we go back to the console, you see that the plugin is now saying the application is up to date. We can do a reload just to verify that that is in fact the case. And so now that the update has been applied to the app, it is smart enough to see that there are no changes for this exact deployment. So this demo only just scratched the surface of what is actually possible with CodePush. To check out more information and docs on getting started, please refer to our website linked in the resources slide. Also, please feel free to reach out to me via email and or Twitter with any and all feedback that you may have. Thanks for watching.