-
Sign Up on App Center and create a new App.
- Clone this repo:
git@github.com:andrefangeloni/mb-talk-app-center.git
; - Navigate to the downloaded folder and then run
yarn
on terminal to install dependencies; - Install Pods:
cd ios && pod install && cd ..
(iOS only); - Rename
env-template.json
toenv.json
and paste yourAPI_KEY
generated on TMDB; - Follow the instructions below, generate your own api's keys and paste on the respective files.
- Open terminal and run
npm install -g appcenter-cli
- Run
appcenter login
. This opens a browser and generates a new API token. - Copy the API token from the browser, and paste this into terminal.
yarn add appcenter appcenter-analytics appcenter-crashes react-native-code-push
Reference: Visual Studio App Center
1 - Create a new file with the name appcenter-config.json in android/app/src/main/assets/
with the following content and replace {APP_SECRET_VALUE} with your app secret value.
{
"app_secret": "{APP_SECRET_VALUE}"
}
Note: If the folder named assets doesn't exist, it should be created under project_root/android/app/src/main/assets
2 - In your android/settings.gradle
file, make the following additions:
PS: The following two lines must be at the end of file or otherwise the app won't build
rootProject.name = 'app_name'
...
include ':app', ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')
3 - In your android/app/build.gradle
file, add the codepush.gradle
...
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"
...
4 - Update the MainApplication.java
file to use CodePush via the following changes:
...
// 4.1 - Import the plugin class.
import com.microsoft.codepush.react.CodePush;
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
...
// 4.2 - Add the getJSBundleFile method to let the CodePush runtime
// determine where to get the JS bundle location from on each app start
...
@Override
protected String getJSBundleFile() {
return CodePush.getJSBundleFile();
}
};
}
5 - Go to AppCenter > Create your React Native Android App > Distribute > CodePush > Set to Production.
6 - Open the terminal and run appcenter apps list
to check the <ownerName>/<appName>
6.1 - Run appcenter codepush deployment list -a <ownerName>/<appName> -k
6.2 - Copy the Production Deployment Key
7 - Modify the app's res/values/strings.xml
to include the following lines:
<resources>
...
<string moduleConfig="true" name="CodePushDeploymentKey">{DeploymentKey}</string>
<string moduleConfig="true" translatable="false" name="appCenterCrashes_whenToSendCrashes">DO_NOT_ASK_JAVASCRIPT</string>
<string moduleConfig="true" translatable="false" name="appCenterAnalytics_whenToEnableAnalytics">ALWAYS_SEND</string>
</resources>
1 - Open terminal and run cd ios && pod install && cd ..
2 - Create a new file with the name AppCenter-Config.plist in ios/<app_name>/
with the following content and replace {APP_SECRET_VALUE} with your app secret value.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "https://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>AppSecret</key>
<string>{APP_SECRET_VALUE}</string>
</dict>
</plist>
3 - Add the following content on AppDelegate.m
#import <AppCenterReactNative.h>
#import <AppCenterReactNativeAnalytics.h>
#import <AppCenterReactNativeCrashes.h>
#import <CodePush/CodePush.h>
3.1 - Add these lines to the didFinishLaunchingWithOptions method
[AppCenterReactNative register];
[AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
[AppCenterReactNativeCrashes registerWithAutomaticProcessing];
3.2 - Replace else condition:
from:
- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}
to:
- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
return [CodePush bundleURL];
#endif
}
4 - Go to AppCenter > Create your React Native iOS App > Distribute > CodePush > Set to Production.
5 - Open the terminal and run appcenter apps list
to check the <ownerName>/<appName>
5.1 - Run appcenter codepush deployment list -a <ownerName>/<appName> -k
5.2 - Copy the Production Deployment Key
6 - Open Info.plist
file, add new entry named CodePushDeploymentKey and paste the value.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
...
<key>CodePushDeploymentKey</key>
<string>{DeploymentKey}</string>
</dict>
- Add CodePush frequency on App file:
import React from 'react';
import { Text } from 'react-native';
import CodePush from 'react-native-code-push';
const App = () => <Text>Hello AppCenter</Text>;
export default CodePush({
checkFrequency: CodePush.CheckFrequency.ON_APP_START,
})(App);
- Run on terminal:
appcenter codepush release-react -a <owner>/<project_name> -m -d Production
This project is licensed under the MIT License - see the LICENSE file for details.
- 👨🏻💻 LinkedIn: André Angeloni