Fast Meets Faster: Speed Up Your CodePush Workflow with the React Native Tools Extension for Visual Studio Code
Recently, we released CodePush functionality in the React Native (RN) Tools extension for VS Code. CodePush is a feature in Visual Studio App Center that allows React Native and Cordova developers to push updates instantly over-the-air to end users. This is the ideal solution for hot-fixing your app when waiting isn’t an option, as well as for a CI/CD workflow. If you need a primer on CodePush and its abilities, start here: Deliver Lightning Fast Updates to your Users with CodePush: A Beginner’s Guide.
App Center enables its users to continuously build, test, release, and monitor iOS, Android, Windows, and macOS apps. The addition of CodePush in the React Native Tools extension for VS Code allows you to instantly get releases in the hands of users. We made it faster and easier to distribute CodePush releases with just a few clicks in VS Code.
In this post, I’ll explain how to start using CodePush functionality in the React Native Tools extension for VS Code and how it improves your workflow. Although this post is targeted at React Native, please note that CodePush functionality is available in the Cordova Tools extension for VS Code as well!
Before outlining the new and enhanced flow of releasing, I’d like to start by outlining the primarily CLI based flow of pushing a CodePush release using VS Code. In order to push a release, you must:
- Save any changes to your code that you would like to release.
- Open the VS Code terminal window (or an external terminal).
- Run the App Center CLI to release an update.
- Repeat.
With this new functionality, you’ll take half the steps to complete your push. All you need to do is save your changes in VS code and release—that’s it!
How it Works
Distributing a CodePush release has never been simpler. A written explanation doesn’t do the process justice, so we’re going to walk through using the extension to truly highlight and display how easy it is to use.
Let’s start by downloading the React Native Tools extension. The extension can be found in the VS Code Extension Marketplace. It looks like this:
After a successful installation of the extension, we’re ready to get started. Upon opening a CodePush enabled Application in VS Code, you should see a “Login to App Center” button on the bottom left of your VS Code window.
Clicking the button initiates the login process, allowing you to log in through an authentication token or through the interactive login via the App Center portal. After logging in, you should get a message signaling that you have successfully logged in.
Now we’re ready to start using CodePush!
Start by clicking the button located on the bottom left of your screen, which should say your App Center username now that you’re logged in.
You’ll then be presented with a few options. To start releasing updates, you need to set your current app so App Center knows what application to target. This is an essential step in the process.
When setting your current app, you’ll be prompted with a list of your CodePush enabled App Center apps. Selecting the targeting app will result in a message confirming your app selection and your current deployment.
Lastly, there’s the step of releasing. This step is as simple as the previous steps. After making your desired changes and saving them in VS Code, simply press the button again and select “Release”.
After selecting “Release”, you’ll be prompted with a confirmation. Your release is now in the hands of your users!
If you would like to see a list of all possible actions, simply open the command palette and type “React Native CodePush”.
That’s it!
The App Center team has worked to make sure you can create and release in as few steps as possible, and we believe this is a huge step in simplifying the release process. In most cases, releasing is possible with the click of a few buttons.
To get started, all you need is a free App Center account, a CodePush integrated app, and the React Native Tools extension.
Light
Dark