15 KiB
iOS Setup
Once you've acquired the CodePush plugin, you need to integrate it into the Xcode project of your React Native app and configure it correctly. To do this, take the following steps:
Plugin Installation and Configuration for React Native 0.60 version and above (iOS)
-
Run
cd ios && pod install && cd ..
to install all the necessary CocoaPods dependencies. -
Open up the
AppDelegate.m
file, and add an import statement for the CodePush headers:#import <CodePush/CodePush.h>
-
Find the following line of code, which sets the source URL for bridge for production releases:
return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
-
Replace it with this line:
return [CodePush bundleURL];
This change configures your app to always load the most recent version of your app's JS bundle. On the first launch, this will correspond to the file that was compiled with the app. However, after an update has been pushed via CodePush, this will return the location of the most recently installed update.
NOTE: The
bundleURL
method assumes your app's JS bundle is namedmain.jsbundle
. If you have configured your app to use a different file name, simply call thebundleURLForResource:
method (which assumes you're using the.jsbundle
extension) orbundleURLForResource:withExtension:
method instead, in order to overwrite that default behaviorTypically, you're only going to want to use CodePush to resolve your JS bundle location within release builds, and therefore, we recommend using the
DEBUG
pre-processor macro to dynamically switch between using the packager server and CodePush, depending on whether you are debugging or not. This will make it much simpler to ensure you get the right behavior you want in production, while still being able to use the Chrome Dev Tools, live reload, etc. at debug-time.Your
sourceURLForBridge
method should look like this:- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge { #if DEBUG return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"]; #else return [CodePush bundleURL]; #endif }
-
Add the Deployment key to
Info.plist
:To let the CodePush runtime know which deployment it should query for updates against, open your app's
Info.plist
file and add a new entry namedCodePushDeploymentKey
, whose value is the key of the deployment you want to configure this app against (like the key for theStaging
deployment for theFooBar
app). You can retrieve this value by runningappcenter codepush deployment list -a <ownerName>/<appName> -k
in the AppCenter CLI (the-k
flag is necessary since keys aren't displayed by default) and copying the value of theKey
column which corresponds to the deployment you want to use (see below). Note that using the deployment's name (like Staging) will not work. That "friendly name" is intended only for authenticated management usage from the CLI, and not for public consumption within your app.In order to effectively make use of the
Staging
andProduction
deployments that were created along with your CodePush app, refer to the multi-deployment testing docs below before actually moving your app's usage of CodePush into production.Note: If you need to dynamically use a different deployment, you can also override your deployment key in JS code using Code-Push options
Plugin Installation for React Native lower than 0.60 (iOS)
In order to accommodate as many developer preferences as possible, the CodePush plugin supports iOS installation via three mechanisms:
-
RNPM - React Native Package Manager (RNPM) is an awesome tool that provides the simplest installation experience possible for React Native plugins. If you're already using it, or you want to use it, then we recommend this approach.
-
CocoaPods - If you're building a native iOS app that is embedding React Native into it, or you simply prefer using CocoaPods, then we recommend using the Podspec file that we ship as part of our plugin.
-
"Manual" - If you don't want to depend on any additional tools or are fine with a few extra installation steps (it's a one-time thing), then go with this approach.
Plugin Installation (iOS - RNPM)
-
As of v0.27 of React Native,
rnpm link
has already been merged into the React Native CLI. Simply run:react-native link react-native-code-push
If your app uses a version of React Native that is lower than v0.27, run the following:
rnpm link react-native-code-push
Note: If you don't already have RNPM installed, you can do so by simply running
npm i -g rnpm
and then executing the above command. If you already have RNPM installed, make sure you have v1.9.0+ in order to benefit from this one step install. -
You will be prompted for the deployment key you'd like to use. If you don't already have it, you can retrieve this value by running
appcenter codepush deployment list -a <ownerName>/<appName> -k
, or you can choose to ignore it (by simply hitting<ENTER>
) and add it in later. To get started, we would recommend just using yourStaging
deployment key, so that you can test out the CodePush end-to-end.
And that's it! Isn't RNPM awesome? :)
Plugin Installation (iOS - CocoaPods)
-
Add the ReactNative and CodePush plugin dependencies to your
Podfile
, pointing at the path where NPM installed it# React Native requirements pod 'React', :path => '../node_modules/react-native', :subspecs => [ 'Core', 'CxxBridge', # Include this for RN >= 0.47 'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43 'RCTText', 'RCTNetwork', 'RCTWebSocket', # Needed for debugging 'RCTAnimation', # Needed for FlatList and animations running on native UI thread # Add any other subspecs you want to use in your project ] # Explicitly include Yoga if you are using RN >= 0.42.0 pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga' pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec' pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec' pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec' # CodePush plugin dependency pod 'CodePush', :path => '../node_modules/react-native-code-push'
NOTE: The above path needs to be relative to your app's
Podfile
, so adjust it as necessary.NOTE:
JWT
library should be >= version 3.0.x -
Run
pod install
NOTE: The CodePush .podspec
depends on the React
pod, and so in order to ensure that it can correctly use the version of React Native that your app is built with, please make sure to define the React
dependency in your app's Podfile
as explained here.
Plugin Installation (iOS - Manual)
-
Open your app's Xcode project
-
Find the
CodePush.xcodeproj
file within thenode_modules/react-native-code-push/ios
directory (ornode_modules/react-native-code-push
for <=1.7.3-beta
installations) and drag it into theLibraries
node in Xcode -
Select the project node in Xcode and select the "Build Phases" tab of your project configuration.
-
Drag
libCodePush.a
fromLibraries/CodePush.xcodeproj/Products
into the "Link Binary With Libraries" section of your project's "Build Phases" configuration. -
Click the plus sign underneath the "Link Binary With Libraries" list and select the
libz.tbd
library underneath theiOS 9.1
node.Note: Alternatively, if you prefer, you can add the
-lz
flag to theOther Linker Flags
field in theLinking
section of theBuild Settings
.
Plugin Configuration for React Native lower than 0.60 (iOS)
NOTE: If you used RNPM or react-native link
to automatically link the plugin, these steps have already been done for you so you may skip this section.
Once your Xcode project has been setup to build/link the CodePush plugin, you need to configure your app to consult CodePush for the location of your JS bundle, since it is responsible for synchronizing it with updates that are released to the CodePush server. To do this, perform the following steps:
-
Open up the
AppDelegate.m
file, and add an import statement for the CodePush headers:#import <CodePush/CodePush.h>
For React Native 0.59 - 0.59.10:
-
Find the following line of code, which sets the source URL for bridge for production releases:
return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
-
Replace it with this line:
return [CodePush bundleURL];
For React Native 0.58 and below:
-
Find the following line of code, which loads your JS Bundle from the app binary for production releases:
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
-
Replace it with this line:
jsCodeLocation = [CodePush bundleURL];
This change configures your app to always load the most recent version of your app's JS bundle. On the first launch, this will correspond to the file that was compiled with the app. However, after an update has been pushed via CodePush, this will return the location of the most recently installed update.
NOTE: The bundleURL
method assumes your app's JS bundle is named main.jsbundle
. If you have configured your app to use a different file name, simply call the bundleURLForResource:
method (which assumes you're using the .jsbundle
extension) or bundleURLForResource:withExtension:
method instead, in order to overwrite that default behavior
Typically, you're only going to want to use CodePush to resolve your JS bundle location within release builds, and therefore, we recommend using the DEBUG
pre-processor macro to dynamically switch between using the packager server and CodePush, depending on whether you are debugging or not. This will make it much simpler to ensure you get the right behavior you want in production, while still being able to use the Chrome Dev Tools, live reload, etc. at debug-time.
For React Native 0.59 - 0.59.10:
- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
return [CodePush bundleURL];
#endif
}
For React Native 0.49 - 0.58:
NSURL *jsCodeLocation;
#ifdef DEBUG
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
jsCodeLocation = [CodePush bundleURL];
#endif
For React Native 0.48 and below:
NSURL *jsCodeLocation;
#ifdef DEBUG
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
#else
jsCodeLocation = [CodePush bundleURL];
#endif
To let the CodePush runtime know which deployment it should query for updates against, open your app's Info.plist
file and add a new entry named CodePushDeploymentKey
, whose value is the key of the deployment you want to configure this app against (like the key for the Staging
deployment for the FooBar
app). You can retrieve this value by running appcenter codepush deployment list -a <ownerName>/<appName> -k
in the AppCenter CLI (the -k
flag is necessary since keys aren't displayed by default) and copying the value of the Key
column which corresponds to the deployment you want to use (see below). Note that using the deployment's name (like Staging) will not work. That "friendly name" is intended only for authenticated management usage from the CLI, and not for public consumption within your app.
In order to effectively make use of the Staging
and Production
deployments that were created along with your CodePush app, refer to the multi-deployment testing docs below before actually moving your app's usage of CodePush into production.
HTTP exception domains configuration (iOS)
CodePush plugin makes HTTPS requests to the following domains:
- codepush.appcenter.ms
- codepush.blob.core.windows.net
- codepushupdates.azureedge.net
If you want to change the default HTTP security configuration for any of these domains, you have to define the NSAppTransportSecurity
(ATS) configuration inside your Info.plist file:
<plist version="1.0">
<dict>
<!-- ...other configs... -->
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>codepush.appcenter.ms</key>
<dict><!-- read the ATS Apple Docs for available options --></dict>
</dict>
</dict>
<!-- ...other configs... -->
</dict>
</plist>
Before doing anything, please read the docs first.
Code Signing setup
Starting with CLI version 2.1.0 you can self sign bundles during release and verify its signature before installation of update. For more info about Code Signing please refer to relevant code-push documentation section.
In order to configure Public Key for bundle verification you need to add record in Info.plist
with name CodePushPublicKey
and string value of public key content. Example:
<plist version="1.0">
<dict>
<!-- ...other configs... -->
<key>CodePushPublicKey</key>
<string>-----BEGIN PUBLIC KEY-----
MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBANkWYydPuyOumR/sn2agNBVDnzyRpM16NAUpYPGxNgjSEp0etkDNgzzdzyvyl+OsAGBYF3jCxYOXozum+uV5hQECAwEAAQ==
-----END PUBLIC KEY-----</string>
<!-- ...other configs... -->
</dict>
</plist>