App Center Setup

Download APK

Click here

Requirements

• React Native CLI
  

• Yarn
  

• Sign Up on App Center and create a new App.

How to use this repo

• Clone this repo: [email protected]: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 to env.json and paste your API_KEY generated on TMDB;
• Follow the instructions below, generate your own api's keys and paste on the respective files.

Installation

• 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.

Adding dependencies on your project

yarn add appcenter appcenter-analytics appcenter-crashes react-native-code-push

Getting Started

Reference: Visual Studio App Center

Android:

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:

project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')
include ':app', ':react-native-code-push'

3 - In your android/app/build.gradle file, add the codepush.gradle

...
apply from: "../../node_modules/react-native/react.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 - Override 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 - Open terminal and run appcenter codepush deployment list -a <ownerName>/<appName> -k
5.1 - Copy the Production Deployment Key

6 - Modify the app's res/values/strings.xml to include the following lines:

<resources>
  <string name="app_name">{app_name}</string>
  <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>

iOS:

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" fallbackResource:nil];
  #else
    return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
  #endif
}

to:

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
  #if DEBUG
    return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
  #else
    return [CodePush bundleURL];
  #endif
}

4 - Open terminal and run appcenter codepush deployment list -a <ownerName>/<appName> -k
4.1 - Copy the Production Deployment Key

5 - 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>

CodePush Usage

• Run on terminal: appcenter codepush release-react -a <owner>/<project_name> -m -d Production

🎓 LICENSE

This project is licensed under the MIT License - see the LICENSE file for details.

Author

• 👨🏻‍💻 LinkedIn: André Angeloni