React-native-code-push: Feature: Move Deployment Keys to JS side

[dwilt]

Description

As this is a React Native plugin, and the developers who are going to be using it are most likely proficient in JS, it would be helpful if we could put our deployment keys on the JS side when we instantiate CodePush. Something maybe like:

import codePush from "react-native-code-push";

@codePush({
    keys: {
        // the key's value directly ties to the platform on CodePush that you are in
        ios: `[iOS deployment key here]`,
        android: `[android deployment key here]`,
    }, 
    checkFrequency: codePush.CheckFrequency.ON_APP_RESUME,
    installMode: codePush.InstallMode.IMMEDIATE
})
class MyApp extends Component {
}

Being that the JS side is usually importing values from an env file when following the 12 factor best practices, we usually have the keys in the JS side that our relevant to whether it's a development, staging, or production build. This also simplifies it for the installation so that the process for iOS and Android is the same for this part and is only in one location.

[dwilt]

And by the way, you guys built an incredible product. Nice job. 👍

[max-mironov]

Hello @dwilt, thank you for your kind words, your feedback is highly appreciated!

As for your question - we have CodePushOptions object that allows you to specify the deployement key, so you can use something e.g. like the following:
codePush.sync({ deploymentKey: "KEY", mandatoryInstallMode: codePush.InstallMode.ON_NEXT_RESUME });

You can provide deploymentKey for codePush.checkForUpdate method as well.
You can also have a quick look at Dynamic Deployment Assignment section which mey be also interesting for you.

Please let us know if it was something that you were looking for.

[dwilt]

@max-mironov This is exactly what I was looking for. You guys should mention this in the setup instructions because while reading the docs, it seems like the only way to have it is by following the native instructions (which you explicitly link to) which involve putting keys in the strings.xml file for Android or in the Info.plist file for iOS.

Even on your Getting Started page, there is no real reference to this deploymentKey (other than here where it uses the sync method example - not the initialization of the plugin). I wouldn't be surprised if most developers went and setup their keys in the native files without realizing all they needed to put it was in one place on the JS side.

[max-mironov]

@dwilt thank you for you feedback, we will look at how to improve our docs about this.

[dwilt]

@max-mironov So I updated my main js file to look like this:

import codePush from 'react-native-code-push';

import {
    CODEPUSH_KEY
} from '../env';

@codePush({
    deploymentKey: CODEPUSH_KEY,
    checkFrequency: codePush.CheckFrequency.ON_APP_RESUME,
    installMode: codePush.InstallMode.IMMEDIATE
})
class App extends Component {

I also removed the key from Info.plist and strings.xml. However, when trying to build on Android, I'm getting this:

/Users/dwilt/Projects/GJS/gjs-app/android/app/src/main/java/com/greatjonesstreet/MainApplication.java:61: error: cannot find symbol
        new CodePush(getResources().getString(R.string.reactNativeCodePush_androidDeploymentKey), getApplicationContext(), BuildConfig.DEBUG),
                                                      ^
  symbol:   variable reactNativeCodePush_androidDeploymentKey

According to the Android setup it seems that we need to put the license key in the android/app/build.gradle and reference in MainApplication.java when instantiating the plugin:

new CodePush(BuildConfig.CODEPUSH_KEY, MainApplication.this, BuildConfig.DEBUG), // Add/change this line.

If you're saying all we need to do is put it in our CodePushOptions object, what's this new CodePush call look like?

[max-mironov]

Hey @dwilt, you've got this error due to you remove this line from strings.xml but still reference it in CodePush constructor.
It looks like you should use the default behavior here like you noted above
new CodePush(BuildConfig.CODEPUSH_KEY, MainApplication.this, BuildConfig.DEBUG)
This way e.g. empty string will be initiated at first time and then you override this value from JS side.
Let me know if it helps.

[dwilt]

That still breaks (because I didn't define the keys in android/app/build.gradle):

/Users/dwilt/Projects/GJS/gjs-app/android/app/src/main/java/com/greatjonesstreet/MainApplication.java:61: error: cannot find symbol
        new CodePush(BuildConfig.CODEPUSH_KEY, MainApplication.this, BuildConfig.DEBUG),
                                ^
  symbol:   variable CODEPUSH_KEY

What does work however is just passing in an empty string:

new CodePush("", MainApplication.this, BuildConfig.DEBUG),

This sort of explanation is absolutely missing from the documentation :)

[duhseekoh]

Just curious if there is any downside in terms of codepush functionality to declaring the codepush key in the js bundle itself?

e.g. Will rollbacks and updates all still happen the same way?

[baba43]

Same question here.

Also is it a bad idea to exchange _Staging_ and _Production_ keys after build? I thought about giving our QA/developers the possibility to change their versions independenly from their build.

[ruslan-bikkinin]

Hi, @baba43 and thanks for question! Exchanging keys after build is a good way to screw up something and to lost control on your builds. Technically, yes, you can exchange keys in runtime, using Dynamic Deployment Assignment, SDK is not bounding you here, but when you are going to switch deployment keys, you need to be absolutely sure, that application cache is cleaned up. Otherwise, you can break something and lost a lot of time by seeking what is wrong. Any way, that is very risky and bad practice. There is another approach, you can use and we are recommending you to use - Multi Deployment Assignment. E.g. you can prepare several environments for your application (dev, prod, etc) and use different deployment keys for it. Then you can create builds for each environment and use it. You can test it in dev and then if everything is okay promote it to prod. That's the best choice here, i guess. Also, you can take a look at https://github.com/Microsoft/react-native-code-push/issues/614#issuecomment-274051514 - there was similar conversations.
I hope this will help you, please, let me know if it is.