Skip to content

Commit 0dfad8d

Browse files
alexandergoncharov-zzalexandergoncharov-zz
authored
Add [email protected] and above support (microsoft#1735)
* Add react-native.config.js file * Updated docs
1 parent a5989a4 commit 0dfad8d

File tree

4 files changed

+182
-28
lines changed

4 files changed

+182
-28
lines changed

‎docs/multi-deployment-testing-android.md

Lines changed: 62 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,71 @@
44
>
55
> Complete demo configured with "multi-deployment testing" feature is [here](https://github.com/Microsoft/react-native-code-push/files/1314118/rncp1004.zip).
66
7-
The [Android Gradle plugin](http://google.github.io/android-gradle-dsl/current/index.html) allows you to define custom config settings for each "build type" (like debug, release), which in turn are generated as properties on the `BuildConfig` class that you can reference from your Java code. This mechanism allows you to easily configure your debug builds to use your CodePush staging deployment key and your release builds to use your CodePush production deployment key.
7+
The [Android Gradle plugin](https://google.github.io/android-gradle-dsl/current/index.html) allows you to define custom config settings for each "build type" (like debug, release). This mechanism allows you to easily configure your debug builds to use your CodePush staging deployment key and your release builds to use your CodePush production deployment key.
8+
9+
*NOTE: As a reminder, you can retrieve these keys by running `code-push deployment ls <APP_NAME> -k` from your terminal.*
810

911
To set this up, perform the following steps:
1012

11-
1. Open your app's `build.gradle` file (for example `android/app/build.gradle` in standard React Native projects)
13+
**For React Native >= v0.60**
14+
15+
1. Open the project's app level `build.gradle` file (for example `android/app/build.gradle` in standard React Native projects)
16+
17+
2. Find the `android { buildTypes {} }` section and define `resValue` entries for both your `debug` and `release` build types, which reference your `Staging` and `Production` deployment keys respectively.
18+
19+
```groovy
20+
android {
21+
...
22+
buildTypes {
23+
debug {
24+
...
25+
// Note: CodePush updates should not be tested in Debug mode as they are overriden by the RN packager. However, because CodePush checks for updates in all modes, we must supply a key.
26+
resValue "string", "reactNativeCodePush_androidDeploymentKey", '""'
27+
...
28+
}
29+
30+
releaseStaging {
31+
...
32+
resValue "string", "reactNativeCodePush_androidDeploymentKey", '"<INSERT_STAGING_KEY>"'
33+
34+
// Note: It is a good idea to provide matchingFallbacks for the new buildType you create to prevent build issues
35+
// Add the following line if not already there
36+
matchingFallbacks = ['release']
37+
...
38+
}
39+
40+
release {
41+
...
42+
resValue "string", "reactNativeCodePush_androidDeploymentKey", '"<INSERT_PRODUCTION_KEY>"'
43+
...
44+
}
45+
}
46+
...
47+
}
48+
```
49+
50+
*NOTE: Remember to remove the key from `strings.xml` if you are configuring the deployment key in the build process*
51+
52+
*NOTE: The naming convention for `releaseStaging` is significant due to [this line](https://github.com/facebook/react-native/blob/e083f9a139b3f8c5552528f8f8018529ef3193b9/react.gradle#L79).*
53+
54+
**For React Native v0.29 - v0.59**
55+
56+
1. Open up your `MainApplication.java` file and make the following changes:
57+
58+
```java
59+
@Override
60+
protected List<ReactPackage> getPackages() {
61+
return Arrays.<ReactPackage>asList(
62+
...
63+
new CodePush(BuildConfig.CODEPUSH_KEY, MainApplication.this, BuildConfig.DEBUG), // Add/change this line.
64+
...
65+
);
66+
}
67+
```
1268
13-
2. Find the `android { buildTypes {} }` section and define `buildConfigField` entries for both your `debug` and `release` build types, which reference your `Staging` and `Production` deployment keys respectively. If you prefer, you can define the key literals in your `gradle.properties` file, and then reference them here. Either way will work, and it's just a matter of personal preference.
69+
2. Open your app's `build.gradle` file (for example `android/app/build.gradle` in standard React Native projects)
70+
71+
3. Find the `android { buildTypes {} }` section and define `buildConfigField` entries for both your `debug` and `release` build types, which reference your `Staging` and `Production` deployment keys respectively. If you prefer, you can define the key literals in your `gradle.properties` file, and then reference them here. Either way will work, and it's just a matter of personal preference.
1472
1573
```groovy
1674
android {
@@ -42,27 +100,10 @@ To set this up, perform the following steps:
42100
}
43101
```
44102
45-
*NOTE: As a reminder, you can retrieve these keys by running `code-push deployment ls <APP_NAME> -k` from your terminal.*
46-
47103
*NOTE: The naming convention for `releaseStaging` is significant due to [this line](https://github.com/facebook/react-native/blob/e083f9a139b3f8c5552528f8f8018529ef3193b9/react.gradle#L79).*
48104
49105
4. Pass the deployment key to the `CodePush` constructor via the build config you defined, as opposed to a string literal.
50106
51-
**For React Native >= v0.29**
52-
53-
Open up your `MainApplication.java` file and make the following changes:
54-
55-
```java
56-
@Override
57-
protected List<ReactPackage> getPackages() {
58-
return Arrays.<ReactPackage>asList(
59-
...
60-
new CodePush(BuildConfig.CODEPUSH_KEY, MainApplication.this, BuildConfig.DEBUG), // Add/change this line.
61-
...
62-
);
63-
}
64-
```
65-
66107
**For React Native v0.19 - v0.28**
67108
68109
Open up your `MainActivity.java` file and make the following changes:
@@ -104,4 +145,4 @@ buildTypes {
104145

105146
5. Optionally, create "mirrored" directories in the `app/src/debug/res` directory for all of your app's icons that you want to change for your debug build. This part isn't technically critical, but it can make it easier to quickly spot your debug builds on a device if its icon is noticeable different.
106147

107-
And that's it! View [here](http://tools.android.com/tech-docs/new-build-system/resource-merging) for more details on how resource merging works in Android.
148+
And that's it! View [here](http://tools.android.com/tech-docs/new-build-system/resource-merging) for more details on how resource merging works in Android.

‎docs/setup-android.md

Lines changed: 56 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
## Android Setup
22

3-
* [Plugin Installation (Android)](#plugin-installation-android)
3+
* [Plugin Installation and Configuration for React Native 0.60 version and above](#plugin-installation-and-configuration-for-react-native-060-version-and-above-android)
4+
* [Plugin Installation for React Native lower than 0.60 (Android)](#plugin-installation-for-react-native-lower-than-060-android)
45
* [Plugin Installation (Android - RNPM)](#plugin-installation-android---rnpm)
56
* [Plugin Installation (Android - Manual)](#plugin-installation-android---manual)
67
* [Plugin Configuration (Android)](#plugin-configuration-android)
@@ -16,7 +17,59 @@
1617

1718
In order to integrate CodePush into your Android project, please perform the following steps:
1819

19-
### Plugin Installation (Android)
20+
### Plugin Installation and Configuration for React Native 0.60 version and above (Android)
21+
22+
1. In your `android/app/build.gradle` file, add the `codepush.gradle` file as an additional build task definition underneath `react.gradle`:
23+
24+
```gradle
25+
...
26+
apply from: "../../node_modules/react-native/react.gradle"
27+
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"
28+
...
29+
```
30+
2. Update the `MainApplication.java` file to use CodePush via the following changes:
31+
32+
```java
33+
...
34+
// 1. Import the plugin class.
35+
import com.microsoft.codepush.react.CodePush;
36+
37+
public class MainApplication extends Application implements ReactApplication {
38+
39+
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
40+
...
41+
42+
// 2. Override the getJSBundleFile method in order to let
43+
// the CodePush runtime determine where to get the JS
44+
// bundle location from on each app start
45+
@Override
46+
protected String getJSBundleFile() {
47+
return CodePush.getJSBundleFile();
48+
}
49+
};
50+
}
51+
```
52+
53+
3. Add the Deployment key to `strings.xml`:
54+
55+
To let the CodePush runtime know which deployment it should query for updates against, open your app's `strings.xml` file and add a new string named `reactNativeCodePush_androidDeploymentKey`, 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 `code-push deployment ls <appName> -k` in the CodePush CLI (the `-k` flag is necessary since keys aren't displayed by default) and copying the value of the `Deployment 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.
56+
57+
![Deployment list](https://cloud.githubusercontent.com/assets/116461/11601733/13011d5e-9a8a-11e5-9ce2-b100498ffb34.png)
58+
59+
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](../README.md#multi-deployment-testing) docs below before actually moving your app's usage of CodePush into production.
60+
61+
Your `strings.xml` should looks like this:
62+
63+
```xml
64+
<resources>
65+
<string name="app_name">AppName</string>
66+
<string moduleConfig="true" name="reactNativeCodePush_androidDeploymentKey">DeploymentKey</string>
67+
</resources>
68+
```
69+
70+
*Note: You can also set your deployment key in JS code using [Code-Push options](./api-js.md#CodePushOptions)*
71+
72+
### Plugin Installation for React Native lower than 0.60 (Android)
2073
2174
In order to accommodate as many developer preferences as possible, the CodePush plugin supports Android installation via two mechanisms:
2275
@@ -40,7 +93,7 @@ In order to accommodate as many developer preferences as possible, the CodePush
4093
4194
*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.*
4295
43-
2. If you're using RNPM >=1.6.0, you will be prompted for the deployment key you'd like to use. If you don't already have it, you can retreive this value by running `code-push deployment ls <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 your `Staging` deployment key, so that you can test out the CodePush end-to-end.
96+
2. If you're using RNPM >=1.6.0, 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 `code-push deployment ls <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 your `Staging` deployment key, so that you can test out the CodePush end-to-end.
4497
4598
And that's it for installation using RNPM! Continue below to the [Plugin Configuration](#plugin-configuration-android) section to complete the setup.
4699

‎docs/setup-ios.md

Lines changed: 54 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,58 @@
11
## iOS Setup
22

33
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:
4+
​
5+
### Plugin Installation and Configuration for React Native 0.60 version and above (iOS)
46

5-
### Plugin Installation (iOS)
7+
1. Run `cd ios && pod install && cd ..` to install all the necessary CocoaPods dependencies.
8+
​
9+
2. Open up the `AppDelegate.m` file, and add an import statement for the CodePush headers:
10+
11+
```objective-c
12+
#import <CodePush/CodePush.h>
13+
```
14+
15+
3. Find the following line of code, which sets the source URL for bridge for production releases:
16+
17+
```objective-c
18+
return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
19+
```
20+
21+
4. Replace it with this line:
22+
23+
```objective-c
24+
return [CodePush bundleURL];
25+
```
26+
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.
27+
28+
*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*
29+
30+
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.
31+
32+
Your `sourceURLForBridge` method should look like this:
33+
34+
```objective-c
35+
- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
36+
{
37+
#if DEBUG
38+
return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
39+
#else
40+
return [CodePush bundleURL];
41+
#endif
42+
}
43+
```
44+
45+
5. Add the Deployment key to `Info.plist`:
46+
47+
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 `code-push deployment ls <appName> -k` in the CodePush CLI (the `-k` flag is necessary since keys aren't displayed by default) and copying the value of the `Deployment 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.
48+
49+
![Deployment list](https://cloud.githubusercontent.com/assets/116461/11601733/13011d5e-9a8a-11e5-9ce2-b100498ffb34.png)
50+
51+
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](../README.md#multi-deployment-testing) docs below before actually moving your app's usage of CodePush into production.
52+
53+
*Note: You can also set your deployment key in JS code using [Code-Push options](./api-js.md#CodePushOptions)*
54+
55+
### Plugin Installation for React Native lower than 0.60 (iOS)
656
757
In order to accommodate as many developer preferences as possible, the CodePush plugin supports iOS installation via three mechanisms:
858
@@ -85,7 +135,7 @@ And that's it! Isn't RNPM awesome? :)
85135
*Note: Alternatively, if you prefer, you can add the `-lz` flag to the `Other Linker Flags` field in the `Linking` section of the `Build Settings`.*
86136
87137
88-
### Plugin Configuration (iOS)
138+
### Plugin Configuration for React Native lower than 0.60 (iOS)
89139
90140
*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.*
91141
@@ -97,7 +147,7 @@ Once your Xcode project has been setup to build/link the CodePush plugin, you ne
97147
#import <CodePush/CodePush.h>
98148
```
99149
100-
For React Native 0.59 and above:
150+
For React Native 0.59 - 0.59.10:
101151
102152
2. Find the following line of code, which sets the source URL for bridge for production releases:
103153
@@ -131,7 +181,7 @@ This change configures your app to always load the most recent version of your a
131181
132182
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.
133183
134-
For React Native 0.59 and above:
184+
For React Native 0.59 - 0.59.10:
135185
136186
```objective-c
137187
- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge

‎react-native.config.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
module.exports = {
2+
dependency: {
3+
platforms: {
4+
android: {
5+
packageInstance:
6+
"new CodePush(getResources().getString(R.string.reactNativeCodePush_androidDeploymentKey), getApplicationContext(), BuildConfig.DEBUG)"
7+
}
8+
}
9+
}
10+
};

0 commit comments

Comments
 (0)