React-Native + Code Push
Published: 2020-02-19 19:16:36

---
title: React-Native + Code Push
published: true
description: 
tags: 
---

In this post, we will add CodePush to a new React Native Project.
The first thing we will do is create a new React Native project using ```react-native init RNCodePush```

Now that the new project is created, we can cd into the project:
```cd RNCodePush```

Now we have our project, we can go ahead and install the CodePush cli:
```npm install -g code-push-cli```


###CodePush

####Installing CodePush

Click [here](https://docs.microsoft.com/en-us/appcenter/distribution/codepush/) to view the CodePush documentation.

Now that we have our project, we can go ahead and install the CodePush cli:

```npm install -g appcenter-cli```

#####Creating a Mobile Center account


After successfully installing the App Center CLI, execute the command to configure the CLI for your App Center account details, command is

```appcenter login```

We should be able to now sign up / authenticate using either a GitHub or Microsoft account.

Once we are registered / logged in, we should receive a token that we can use to paste into our command line to authenticate:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/s96n2tebqrz4i9jq71oz.jpeg)

####Creating the CodePush App


you can run the following command to display the e-mail address associated with your current authentication session, your username, and your display name: 
```appcenter profile list```

Now that we are logged in, we need to create the CodePush app that we will be associating with our React Native Project.
We will be creating two apps, one for iOS and one for Android

```appcenter apps create -d <appDisplayName> -o <operatingSystem> -p <platform>```

In my example, I will be calling my iOS app name RRNCodePush-IOS and my android app name RNCodePush-Android, so my command will look be:

`appcenter apps create -d RNCodePush-Android -o Android -p React-Native`

`appcenter apps create -d RNCodePush-IOS -o iOS -p React-Native`

Codepush Apps automatically had two deployments (Staging and Production). In App Center, you'll have to create them yourself using the following commands

`appcenter codepush deployment add -a <ownerName>/<appName> Staging`

`appcenter codepush deployment add -a <ownerName>/<appName> Production`

In my case totally 2 Android apps with environment Staging and Production and 2 IOS apps with with environment Staging and Production ,totally four keys i will have here is the example

#####Android

1.`appcenter codepush deployment add -a salman18/RNCodePush-Android Staging`

2 .`appcenter codepush deployment add -a salman18/RNCodePush-Android Production`

#####iOS

`appcenter codepush deployment add -a salman18/RNCodePush-IOS Staging`

`appcenter codepush deployment add -a salman18/RNCodePush-IOS Production`

Finally, if you want to list all apps that you've registered with the App Center server, run the following command:

```appcenter apps list```

After you create the deployments, you can access the deployment keys for both deployments using

`appcenter codepush deployment list -a <ownerName>/<appName> --displayKeys -k`

Example:-

#####For Android
`appcenter codepush deployment list -a salman18/RNCodePush-Android --displayKeys -k`

#####For iOS

`appcenter codepush deployment list -asalman18/RNCodePush-IOS --displayKeys -k`


#### react-native-code-push plugin installation and setup

Configure install and configure react-native-code-push on your project based on your react-native version by clicking provided link below

[react-native-code-push](https://github.com/microsoft/react-native-code-push)

#### JS bundle and assets (react-native bundle for React-native apps)

We need to do this each time when we are deploying changes via codepush.

```
react-native bundle --platform android --dev false --entry-file 
index.js --bundle-output  android/app/src/main/assets/index.android.bundle 
 --dev false

```
More information about bundling is with and without assets [https://docs.microsoft.com/en-gb/appcenter/distribution/codepush/cli]

### Releasing Updates (General)

```
appcenter codepush release -a <ownerName>/<appName> -c <updateContentsPath> -t <targetBinaryVersion> -d
 <deploymentName>

[-t|--target-binary-version <version>]
[-с|--update-contents-path <updateContentsPath>]
[-r|--rollout <rolloutPercentage>]
[--disable-duplicate-release-error]
[-k|--private-key-path <privateKeyPath>]
[-m|--mandatory]
[-x|--disabled]
[--description <description>]
[-d|--deployment-name <deploymentName>]
[-a|--app <ownerName>/<appName>]
[--disable-telemetry]
[-v|--version]
```