CodePush

React Native for Windows + CodePush

2016-04-13T00:00:00-07:00

We’re very excited about today’s announcement at F8 2016 that Universal Windows Platform support is coming to React Native! The CodePush team has been fortunate enough to work with thousands of developers in the React Native community, and the ability to target your app(s) at any Windows 10 device is an awesome opportunity that we look forward to seeing folks begin to take advantage of.

Along with this announcement, we have also published a very early version of Windows support for the React Native CodePush module, which will allow releasing updates to your React Native apps running on a Windows 10 PC, phone, Xbox One and even HoloLens (!), using the same developement workflow as iOS and Android: code-push release-react MyApp windows. We want to make it as simple as possible to practice continuous delivery with React Native, and this support will extend that capability to millions of new devices.

NOTE: While the production F8 app uses CodePush, it doesn’t display an update prompt. We just added that for the sake of illustrating the concept more easily.

Current Support

The Windows implementation of CodePush currently has ~80% parity with the existing iOS and Android platforms, including all of the most commonly used features (e.g. updating assets, pivoting the install mode based on whether an update is mandatory or not). We were able to re-use 100% of our existing JavaScript code, and because React Native for Windows was architected to be conceptually similar to React Native for Android, it was a pretty straight forward port for our native code. We expect to implement the few remaining features in the next couple weeks, and will then maintain 100% parity across all three platforms moving forward.

We haven’t published the Windows support to NPM yet, but if you want to check it out, you can view the source and/or install the bits from our Windows branch, which includes an updated readme with setup instructions. Additionally, if you want to check out a sample app that uses React Native for Windows and CodePush, the beautiful and open-sourced F8 App is a great example to play around with. The production version of the app already uses CodePush for iOS and Android, and we implemented a fork of it which includes CodePush support on Windows. Clone the fork, run the setup instructions, and try it out! The above screenshots were taken using it, so feel free to have fun with running the app on the various device emulators.

Moving Forward

As the Windows support for React Native continues to evolve and mature, we’ll be improving the CodePush support as well, and will look forward to seeing the community response and contributions. In the meantime, please continue to send us feedback, ping us in the #code-push chanel on Reactiflux, and stay tuned for future feature investments!

Web-like release agility for React Native Apps

2016-02-22T00:00:00-08:00

It’s been a few months since we opened up our beta program and we couldn’t be happier about all the support and excitement we’ve seen from the community! Thanks to your feedback we have made tons of fixes and added features to enable new scenarios that aim to make your React Native development cycle that much better.

In lieu of the ReactJS Conf 2016, we want to emphasize how much we care about this community and making your DevOps experience as seamless as possible. For those of you who were not able to attend our session, we covered the integration between three products that enable you to provide Continuous Integration (CI) and Continuous Deployment (CD) for your React Native apps: VSTS, HockeyApp and CodePush.

Visual Studio Team Services (formerly Visual Studio Online) and Team Foundation Services 2015, provide a cross-platform build system that allows you to easily configure builds for any platform you might want to target. By ading HockeyApp, you enable a robust beta distribution and reporting framework that allows you to deploy beta apps and collect feedback from internal or external testers. Finally, with CodePush you are able to build upon the beta capabilities provided by HockeyApp and deploy beta as well production updates, reaching the full cycle of your app’s distribution.

All of these services work great as single units, however for a great React Native CI and CD story, one that takes you seamlessly from build, to beta and finally to production, we hope you check out all three, as we continue to improve the integration between them.

Follow these links to get started with these great services:

Streamline the CI setup for your React Native app using VSTS
Get started using HockeyApp for React Native
Get started using CodePush for React Native
Automate deployments to app stores from your automated CI builds using the HockeyApp and CodePush extensions

Thanks again for your interest and feedback thus far. We have many more improvements coming very soon, and look forward to put them on your hands! As always, please don’t hesitate to ping us if you have questions or any issues.

Thanks!

CodePush enters "open beta"

2015-11-18T00:00:00-08:00

It’s been roughly a month since we first released the CodePush “closed beta”, and we’ve received an unbelievable amount of support from the community in evaluating the service, filing bugs, giving feedback and helping improve overall quality. However, the amount of interest in the service far outweighed our expectations, and unfortunately, our ability to keep up with approving (and reaching out to) the incoming requests quickly became slower than we would have liked. Sorry to everyone that had to wait a while to get access!

In order to improve our ability to engage with the community, and provide devs with a fully self-service experience for using CodePush, we are opening the beta program today so that anyone can get started immediately, without needing to explicitly request access from us! We’ve enabled this by simply adding a new register command to the CLI, which provides the exact same experience as the existing login command, but in addition to authenticating you, it creates a CodePush account that is linked to your GitHub or Microsoft account. Make sure you have the latest version of the CLI from NPM (npm i -g code-push-cli@latest) and then check out the docs for more details on getting started.

As of now, everyone that previously requested beta access has been approved, and we hope to hear from many more of you soon! Thanks again for your interest and feedback thus far. We have many more improvements coming very soon, and look forward to being able to get it into the hands of more developers! As always, please don’t hesitate to ping us.

Continuous Delivery with CodePush and VSTS

2015-11-18T00:00:00-08:00

While the CodePush CLI provides a simple experience for managing your account, it could become pretty tedious doing manual deployments every time you need to release an update, particularly if you want to keep your dev/staging/etc. deployments always current. To better enable scripting a custom continuous delivery solution from your CI environment (e.g. Travis), we enhanced the CLI in the 1.1 release with the ability to create access keys and authenticate with them “headlessly”, but we wanted to make it even simpler to automated this process E2E.

To take advantage of the new marketplace for Visual Studio Team Services (formally “Visual Studio Online”), we created a CodePush extension which makes adding a deployment step to your CI build pipeline pretty easy, and composes really well with the Cordova Build extension and existing core support for JavaScript apps (e.g. Running Gulp scripts, installing NPM dependencies). If you’re already using VSTS/VSO, then install the extension now and give it a shot! Otherwise, we encourage you to check it out if you’re in the market for a simple and great CI/ALM solution.

Deploy Task

The CodePush task itself is pretty simple, and if you’re already familiar with the CLI, it provides all of the same input options as the release command. Addtitionally, in order to make it simple to authenticate with the service from CI, it provides an Access Key input that accepts a key value which you can generate using the existing code-push access-key add command (NOTE: Give your key a recognizeable name). The task will automatically handle logging-in, performing the release, and then logging-out so that your session information isn’t left around on the machine.

That’s it! Nothing too magical, but hopefully it makes the barrier of entry even simpler to perform these kind of automated deployments. For more info about the task inputs and/or how to get started with it, refer to the GitHub repo.

Cordova

While most of the task’s options are platform agnostic, in order to specify a valid value for the Package Path field, you need to be able to easily build your app’s release assets from a CI environment. For Cordova, that means running either cordova build <platformName> or cordova prepare <platformName> (either is sufficient for a CodePush, but we recommend the later since it’s simpler), or the equivalent using a superset CLI (e.g. Ionic, PhoneGap, Tarifa, TACO).

While you could script this yourself, the Cordova Build extension makes this easy to do, since it provides tasks for running either a build (using the Cordova Build task) or a prepare (using the Cordova Command task or Ionic Command, with the Command input set to prepare <platformName>).

Using these tasks, along with the CodePush deploy task, you can easily configure a build + deploy workflow. Additionally, if your app needs to acquire NPM/Bower dependencies and/or run any Gulp scripts, there are built-in tasks in VSTS for that (no extension needed!). For more info on the Cordova Build extension, including how to get started with it, refer to the GitHub repo.

NOTE: There are plans to introduce additional tasks for other Cordova-based CLIs such as PhoneGap and TACO, so stay tuned for updates on that front.

React Native

Generating your release assets for a React Native app consists of calling the react-native bundle CLI command, which produces the JS bundle you can subsequently pass to the Package Path field of the CodePush task. The React Native CLI requires Node 4+, which isn’t installed by default on the VSTS hosted build machines, so your build script needs to “prime” the environment first, before being able to create the bundle (*).

Currently, there isn’t a React Native extension for VSTS that handles the Node/React Native CLI acquisition for you (yet!), however, there are core VSTS tasks for running shell scripts, which enables you to achieve just about anything when needed. To that end, we created some setup scripts (use the Windows or OS X ones depending on your environment), that you can add to your repo for now, and run as part of your build setup.

With these scripts in hand, your CI pipeline can be composed of the following three tasks/steps:

Shell script or Batch Script (depending on if you’re using a Windows or OSX build machine)–that points at either the setup-react-native.sh or setup-react-native.bat file respectively–which handles installing the right Node version as well as the React Native CLI globally
Command Line task, which can be used to run the react-native bundle command, passing the neccessary parameters for your app (e.g. platform, entry file name)
CodePush deploy task, which points at the JS bundle created in #2

Beyond automating your CodePush deployments, if you want to setup an automated build for generating your ipa and/or apk files, you can use the Xcode Build and Gradle tasks that are already built into VSTS.

Additionally, while VSTS provides Windows-based build machines, MacinCloud released first-class support today for running your VSTS builds on OSX machines, so that is definitely worth checking out once you need to run your automated iOS builds.

(NOTE: Besides using the cloud-hosted build machines, VSTS also lets you setup and run your own build machine using their cross-platform build agent, which lets you install any additional dependecies your builds may require)

Send us feedback

We’re pretty excited about this experience, and there’s lot of cool stuff happening for “mobile DevOps”, but we definitely want to continue making it simpler (including first-class support for React Native), so stay tuned!

In the meantime, if you have any feedback/comments/etc. please don’t hesitate to ping us. We need your help with ensuring we fully accomodate the CI/CD workflow for CodePush for any unique scenarios you may have. Thanks!

CodePush 1.1 (beta) released

2015-11-04T00:00:00-08:00

As part of our commitment to respond quickly to all of the great developer feedback we’ve been getting, we’ve released an update to the CodePush service, management CLI and client SDKs for both Cordova and React Native. You can update any of these components immediately via NPM, and then refer to the docs, which have been updated to account for the changes.

The 1.1 update includes a handful of bug fixes (thanks for everyone who helped report issues!) that we hope will improve reliability. Additionally, we also addressed the following feature requests that should help enable some important/common scenarios.

CodePush.sync()

Our client SDKs already included APIs which allowed your apps to check for the presence of an update and then subsequently download and apply it, customizing the user experience however you wished. While we think this “advanced API” is critical in allowing unexpected and custom scenarios to be more easily achievable, we also wanted to provide an API that allowed some common experiences to be possible with very little code. After talking to many users, we were able to infer a common user experience that we encapsulated in a new API method called codePush.sync.

CodePush.sync().then((status) => {
    if (status == codePush.SyncStatus.UPDATE_APPLIED) {
        // Do any neccessary work here before the app
        // is restarted in order to apply the update
    }
});

The sync method performs the update check, and handles displaying a notification to end-users when available. If a release is optional, the displayed dialog will allow ignoring it; otherwise, if the release is marked as mandatory, the end-user is required to install it before moving forward (this is useful for internal and testing scenarios). Additionally, you can choose to display your release description in the update notification and customize any string used in the dialog (e.g. buttons, header text).

We hope this helps lower the barrier for getting started with CodePush, and we are interested in helping simplify other scenarios beyond what sync currently provides (e.g. enable “silent mode” background updates). Check out the docs on this new method for more info (React Native, Cordova).

Release promotion

A very common release practice is to submit an update to a dev or staging environment, test it, and then “promote” that update to your production environment. While this was possible previously by using the code-push release command in our CLI, it wasn’t optimized for making this experience as simple as possible.

To better accomodate this common scenario, we introduced a new command to the management CLI called promote that simply allows you to copy the contents and metadata (e.g. description, app store version, mandatory) from one deployment to another.

code-push promote <appName> <sourceDeploymentName> <targetDeploymentName>

With this addition, you can now easily do migrations between deployments (dev->staging, staging->production, etc.), which we hope should make your development process even smoother when using CodePush. Refer to the management CLI’s documentation for more information.

CI integration/“headless releases”

Enabling “continuous delivery” workflows are really important to us, and our current authentication support in the CLI didn’t lend itself very well to running “headlessly” in a CI environment. To better support this, we have made three improvements to the CLI:

There is a new code-push access-key add command that allows you to generate new access tokens that can be used to login from a CI server. When you run code-push access-key ls, the list will display the description of the key so that you can revoke it as soon as you no longer need it.
The existing code-push login command now accepts a --accessKey flag that allows you to authenticate using a created access key, as opposed to launching a browser to authenticate with either GitHub or your Microsoft account.
The existing code-push logout command now accepts a --local flag that allows you to specify that you want to logout of the current user session (e.g. remove the session file from the machine), but that you don’t want to delete the key from the server. This way you can reuse a key for all your builds in a CI environment, but you don’t need to worry about leaving any authentication credentials lying around on the build machine.

With the ability to create and authenticate with new keys, you can now easily script release automation in your CI environment. Moving forward, we plan to provide even better integration experiences with certain CI solutions, but in the meantime, we hope that this helps unblocks folks who would like to implement a CodePush-based continuous delivery workflow. Refer to the management CLI’s documentation for more information.

Thank you!

It has been an absolute pleasure to engage with the Cordova and React Native communities thus far, and we want to continue saying thank you for all the bug reports, feedback, usage and overall awesomeness! We have many more improvements coming soon, and we would love to hear any any all suggestions, shout outs, hate mail, etc. that you have, so feel free to ping us.