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

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"];
  #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>

CodePush Setup

• 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);

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