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.

The CodePush SDK is an open-source SDK. Bitrise actively participates in its maintenance to make sure it serves our customers' needs.

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.

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: see topic.

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

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

   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 apps 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 apps 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 apps 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=""