Skip to main content

Bitrise CodePush

Bitrise offers a hosted CodePush Server, integrated with Bitrise authentication. You can use it with your React Native and Expo apps in Release Management.

Public beta

Bitrise CodePush is currently in public beta.

The public beta includes 100000 push updates per month. If you need more, let us know!

About CodePush

CodePush enables React Native developers to deploy mobile app updates directly to their users' devices. The service consists of two parts:

Bitrise CodePush Server is based on the Microsoft CodePush Server and it is part of Release Management. You need a Release Management app to be able to push update packages to the Bitrise CodePush Server via your CodePush deployment.

API only

The CodePush Server functionality is currently available through the Release Management API. A GUI is in development.

Enabling CodePush

Bitrise CodePush is currently in public beta. You can request Bitrise to enable the feature for a workspace. When the feature is enabled, you can use CodePush for all apps of that workspace.

  1. Log in to Release Management.

  2. On the main page, find the CodePush card.

  3. Click Request access.

  4. In the dialog, click Send request.

  5. When the feature is enabled, you will receive an email confirming your access.

Creating a CodePush deployment

Public beta

Bitrise CodePush is currently in public beta. Contact us so we can enable the feature for you.

The public beta includes 100000 push updates per month. If you need more, contact us!

  1. Make sure you have a personal access token or a workspace API token.

    A token is required for authorization with the Release Management API.

  2. For each React Native project, make sure you have two apps in Release Management: one for iOS, one for Android.

  3. Get the app ID for each app. You can see it in the URL of the app page: https://app.bitrise.io/release-management/workspaces/<worskspace-id>/connected-apps/<connected-app-id>.

    ID from the API

    You can use the API to add apps. The response of the /connected-apps endpoint contains an id field: this is the app ID you need.

  4. Create a CodePush deployment for each app by calling the /connected-apps/{connected_app_id}/code-push/deployments endpoint. The request requires:

    • The connected app ID.

    • A token for authorization.

    • A name you will use for the deployment.

    In this example, we're using the name prod:

     curl -X 'POST' \
  'https://api.bitrise.io/release-management/v1/connected-apps/<connected-app-id>/code-push/deployments' \
  -H 'accept: application/json' \
  -H 'authorization: <access-token>' \
  -H 'Content-Type: application/json' \
  -d '{
    "name": "prod"
  }'

    Existing deploymentKey

    If you already have a deploymentKey (for example, if you are migrating your setup from Microsoft App Center), you can use the key parameter in the API request:

    {
    "name": "prod",
    "key": "<existing-deploymentKey>"
}

  5. Copy the base64-encoded key returned in the response. This is the CodePush deployment key: you need this to configure your app for CodePush.

Configuring your app for CodePush

Install the CodePush SDK and add the deployment keys and the CodePush Server URL to the app configuration. The process is different for React Native and Expo apps.

Configuring CodePush for React Native apps

CodePush for React Native requires installing the SDK and then setting up CodePush for both the iOS and the Android modules.

Version requirement

CodePushNext SDK supports React Native 0.76 and higher.

  1. Install React Native CodePushNext:

    npm install @code-push-next/react-native-code-push

  2. Set up CodePush for iOS. You can find the most important instructions here: iOS setup.

    The detailed instructions are available in the GitHub repository of the SDK: iOS.

  3. Set up CodePush for Android. You can find the most important instructions here: Android setup.

    The detailed instructions are available in the GitHub repository of the SDK: Android.

iOS setup

  1. Make sure the bundle identifier matches the bundle identifier you used when creating the app on Bitrise. You can use react-native-rename to rename your app with a custom bundle identifier: react-native-rename.

  2. In ios/Podfile, look for the line platform :ios, min_ios_version_supported. Change it to platform :ios, 15.5.

  3. Update ios/<projectname>/AppDelegate.swift:

    1. Add an import statement for CodePush headers:

      import CodePush

    2. Find the following line of code:

      Bundle.main.url(forResource: "main", withExtension: "jsbundle")

    3. Replace it with this line:

      CodePush.bundleURL()

    4. Your bundleURL method should look like this:

      override func bundleURL() -> URL? {
#if DEBUG
   RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
#else
   CodePush.bundleURL()
#endif
}

  4. Add the CodePush deployment key and the CodePush Server URL to ios/<projectname>/Info.plist:

    You get the deployment key when creating the CodePush deployment on Bitrise.

    Workspace slug

    The server URL requires the Bitrise workspace slug: Identifying Workspaces and projects with their slugs.

    #The CodePush deployment key

<key>CodePushDeploymentKey</key>
<string></string>

#The CodePush server URL with the Bitrise workspace slug

<key>CodePushServerURL</key>
<string>https://<workspace-slug>.codepush.bitrise.io</string>

Android setup

  1. Add a line at the end of android/app/build.gradle as an additional build task definition:

    ...
apply from: "../../node_modules/@code-push-next/react-native-code-push/android/codepush.gradle"
...

  2. Update android/app/build.gradle android.defaultConfig to setup versionCode and versionName:

    versionCode System.getenv("APP_VERSION_CODE") != null ? System.getenv("APP_VERSION_CODE").toInteger() : 1
versionName System.getenv("APP_VERSION_NAME") != null ? System.getenv("APP_VERSION_NAME") : "1.0"

  3. Update android/app/src/main/java/…/MainApplication.kt to use CodePush:

    PackageList

    PackageList must be instantiated only once in the application's lifetime.

    ...
// 1. Import the plugin class.
import com.microsoft.codepush.react.CodePush

class MainApplication : Application(), ReactApplication {
   override val reactNativeHost: ReactNativeHost =
       object : DefaultReactNativeHost(this) {
           override fun getPackages(): List<ReactPackage> = PackageList(this).packages.apply {
             // Packages that cannot be autolinked yet can be added manually here, for example:
             // add(MyReactNativePackage())
            }

           // 2. Override the getJSBundleFile method in order to let
           // the CodePush runtime determine where to get the JS
           // bundle location from on each app start
           override fun getJSBundleFile(): String {
             return CodePush.getJSBundleFile() 
           }
    };
}

  4. In android/app/src/main/res/value/strings.xml, add the CodePush deployment key and the CodePush Server URL.

    You get the deployment key when creating the CodePush deployment on Bitrise.

    Workspace slug

    The server URL requires the Bitrise workspace slug: Identifying Workspaces and projects with their slugs.

    <string name="CodePushDeploymentKey" translatable="false"><CODE_PUSH_DEPLOYMENT_KEY></string>
<string name="CodePushServerUrl" translatable="false">https://<workspace-slug>.codepush.bitrise.io</string>

Configuring CodePush for Expo apps

  1. Convert app.json to app.config.js so that you can use environment variables.

    For more information, check out the Expo docs on dynamic configuration.

  2. Set your apps ios.bundleIdentifier and android.package in app.config.js. These should match the values used while creating the apps on Bitrise.

  3. Install the React Native CodePushNext SDK, dotenv, and expo-build-properties packages:

    npm install @code-push-next/react-native-code-push dotenv expo-build-properties

  4. Setup Expo CodePush Plugin:

    • Include the plugin in app.config.js.

      Workspace slug

      The server URL requires the Bitrise workspace slug: Identifying Workspaces and projects with their slugs.

       plugins: [
        [
        "@code-push-next/react-native-code-push/expo", // CodePush plugin
          {
            ios: {
                // Use the environment variable for the iOS CodePush Deployment Key
                CodePushDeploymentKey: IOS_CODE_PUSH_DEPLOYMENT_KEY,
                CodePushServerURL: "https://<workspace-slug>.codepush.bitrise.io" 
            },
            android: {
                // Use the environment variable for the Android CodePush Deployment Key
                CodePushDeploymentKey: ANDROID_CODE_PUSH_DEPLOYMENT_KEY,
                CodePushServerURL: "https://<workspace-slug>.codepush.bitrise.io" 
            }
          }
        ],
        [
          "expo-build-properties",
          {
            ios: {
              deploymentTarget: "15.5"
            }

          }
        ]
        // Add other plugins here if you have more
      ]

  5. Add the deployment key values to an .env file. You get the deployment keys when creating the CodePush deployment on Bitrise.

    Tip

    Add the .env file to your .gitignore to keep your keys secret!

    # .env file

# CodePush Deployment Keys
IOS_CODE_PUSH_DEPLOYMENT_KEY=""
ANDROID_CODE_PUSH_DEPLOYMENT_KEY=""

Creating and releasing CodePush updates

Create an update bundle and upload it to the Bitrise CodePush Server to push updates to your users' devices.

Creating an update bundle

React Native

Expo

  1. Make the updates to your code.

  2. Create an update bundle for both iOS and Android:

    • iOS:

      npx react-native bundle \
  --platform ios \
  --dev false \
  --entry-file index.js \
  --bundle-output ./build/main.jsbundle \
  --assets-dest ./build

    • Android:

      npx react-native bundle \
  --platform android \
  --dev false \
  --entry-file index.js \
  --bundle-output ./build/index.android.bundle \
  --assets-dest ./build

  3. Zip the build folder:

    zip -r update.zip ./build

  1. Make the updates to your code.

  2. Create an update bundle for both iOS and Android:

    • iOS:

      npx expo export:embed \
  --entry-file index.js \
  --platform ios \
  --dev false \
  --reset-cache \
  --bundle-output ./build/main.jsbundle \
  --assets-dest ./build \
  --minify false

    • Android:

      npx expo export:embed \
  --entry-file index.js \
  --platform android \
  --dev false \
  --reset-cache \
  --bundle-output ./build/index.android.bundle \
  --assets-dest ./build \
  --minify false

  3. Zip the build folder:

    zip -r update.zip ./build

Uploading the package to the Bitrise CodePush Server

  1. Clone the release-management-recipes repository from Bitrise.

    The repository contains a helper script that we will use to upload the update package.

    git clone https://github.com/bitrise-io/release-management-recipes

  2. Go in to the release-management-recipes folder:

    cd release-management-recipes

  3. Run the script to upload.

    The script requires input data:

    The final command should look something like this:

    PACKAGE_PATH=../update.zip \
AUTHORIZATION_TOKEN=<api-token> \
CONNECTED_APP_ID=<connected-app-id> \
DEPLOYMENT_ID=<deployment-id> \
APP_VERSION=<app-version>  /bin/bash ./api/upload_code_push_package.sh
In this section: