@huedaya - Integrate Self-hosted Code Push in React Native

Below the quick steps how to integrate your custom self-hosted Microsoft's codepush server into your React Native app. In this case I use shm-open/code-push-server repo.

Login to the CLI

Make sure already install the CLI.

bash

$ npm install -g @shm-open/code-push-cli

Then do login, a new web page will be opened, login with your account and obtain the token.

plaintext

$ code-push login https://YOUR_CODE_PUSH_SERVER_URL/

Please login to Mobile Center in the browser window we've just opened.

Enter your token from the browser:  YOUR_TOKEN

Successfully logged-in. Your session file was written to /Users/your-user/.code-push.config. You can run the code-push logout command at any time to delete this file and terminate your session.

Try to get list of the app.

plaintext

$ code-push app ls

┌──────────────────────────────┬─────────────────────┐
│ Name                         │ Deployments         │
├──────────────────────────────┼─────────────────────┤
│ project-name                 │ Production, Staging │
└──────────────────────────────┴─────────────────────┘

Codepush Integration to React Native

plaintext

$ code-push app add project-name ios react-native

Successfully added the "project-name" app, along with the following default deployments:
┌────────────┬───────────────────────────────────────┐
│ Name       │ Deployment Key                        │
├────────────┼───────────────────────────────────────┤
│ Production │ YOUR_DEPLOYMENT_KEY                   │
├────────────┼───────────────────────────────────────┤
│ Staging    │ YOUR_DEPLOYMENT_KEY                   │
└────────────┴───────────────────────────────────────┘

iOS

Update /ios/ProjectName/Info.plist

plaintext

    <key>CodePushDeploymentKey</key>
    <string>$(CODEPUSH_KEY)</string>
    <key>CodePushServerURL</key>
    <string>https://YOUR_CODE_PUSH_SERVER_URL</string>

Update /ios/ProjectName.xcodeproj/project.pbxproj

plaintext

/* Begin XCBuildConfiguration section */
        XXXXXXXXXXXXXXXXXXXXXXXX /* Release */ = {
            isa = XCBuildConfiguration;
            buildSettings = {
                CODEPUSH_KEY = YOUR_DEPLOYMENT_KEY; <-------------- CHANGE THIS

Android

Update /android/app/src/main/res/values/strings.xml

xml

<resources>
    <string name="app_name">AppName</string>
    <string moduleConfig="true" name="CodePushDeploymentKey">YOUR_DEPLOYMENT_KEY</string>  
    <string moduleConfig="true" name="CodePushServerUrl">https://YOUR_CODE_PUSH_SERVER_URL</string>
</resources>

Deploy / Push new Release

Push a new release. By default it will push to Staging deployment.

plaintext

$ code-push release-react project-name ios --mandatory --targetBinaryVersion="1.10"

Running "react-native bundle" command:

node node_modules/.bin/react-native bundle --assets-dest/CodePush --bundle-output  /CodePush/main.jsbundle --dev false --entry-file index.js --platform ios
Welcome to Metro!
              Fast - Scalable - Integrated

info Writing bundle output to:, /CodePush/main.jsbundle
info Done writing bundle output
info Copying 43 asset files
info Done copying assets

Releasing update contents to CodePush:

Upload progress:[==================================================] 100% 0.0s
Successfully released an update containing the "/CodePush" directory to the "Staging" deployment of the "project-name" app.

Check the deployment status

plaintext

$ code-push deployment ls project-name

┌────────────┬────────────────────────────────────┬──────────────────────┐
│ Name       │ Update Metadata                    │ Install Metrics      │
├────────────┼────────────────────────────────────┼──────────────────────┤
│ Production │ No updates released                │ No installs recorded │
├────────────┼────────────────────────────────────┼──────────────────────┤
│ Staging    │ Label: v1                          │ Active: 0% (0 of 0)  │
│            │ App Version: 1.10                  │ Total: 0             │
│            │ Mandatory: Yes                     │                      │
│            │ Release Time: a minute ago         │                      │
│            │ Released By: [email protected]      │                      │
│            │ Description: deskripsi             │                      │
└────────────┴────────────────────────────────────┴──────────────────────┘

Rollback release

By default it will create new label but the code is copying the previous label.

plaintext

$ code-push rollback project-name Staging

Are you sure? (y/N): y
Successfully performed a rollback on the "Staging" deployment of the "project-name" app.

That's it!

Ref

Tags:

#codepush #selfhosted #react-native #microsoft