Skip to main content

Configuring your app for CodePush

Abstract

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.

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 the React Native CodePush :

    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.

    Read more in the GitHub repository of the SDK: iOS.

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

    Read more 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=""
In this section: