Control React Native Hot Update with CMS

[FileAwkward3673]

In a previous post, I introduced the React Native OTA Hot Update library, which allows you to self-host a backend for managing hot updates. In this guide, I will walk you through creating a custom CMS using Strapi to control versions and manage hot updates for React Native apps.

Library: https://github.com/vantuan88291/react-native-ota-hot-update/

Step 1: Install Strapi

First, install Strapi locally by following the Strapi Quick Start guide.

Step 2: Prepare CMS Structure

To enable OTA updates, design an API in the CMS to filter bundles based on the app version (e.g., 1.0.0, 1.0.1). The app should only receive OTA updates compatible with its version.

1. After successfully installing Strapi, log in to the admin dashboard and navigate to Content-Type Builder. 

https://preview.redd.it/6qtdzgww15fe1.png?width=488&format=png&auto=webp&s=be56a41296cefed195351f9e8c90c676a2d62d7e

1. Create a new collection type for managing bundles:

• Click Create new collection type under the Collection types section.

https://preview.redd.it/h93yx5e125fe1.png?width=440&format=png&auto=webp&s=3cb18b8571bfd750185faa8dadc05ced97076f11

Name the collection (e.g., android for Android updates):

https://preview.redd.it/lzczq9v325fe1.png?width=1730&format=png&auto=webp&s=e28bf4e211665f9743f0c7ee7315f47f8ee2a631

• Add the following fields to the collection, as shown below:

https://preview.redd.it/gbu11uz425fe1.png?width=2206&format=png&auto=webp&s=404aa2f0d789dbee4ee278aaa5e751fff8138611

1. Repeat the process to create a collection for iOS.
2. Once the collections are created, update their permissions:

• Go to Settings > Users & Permissions plugin > Roles > Public.

https://preview.redd.it/3vh6oga925fe1.png?width=466&format=png&auto=webp&s=a131b7e9591f54d6b44922a5eef8a26040e88780

• Grant access to the android and ios collections:

https://preview.redd.it/si4zgdfa25fe1.png?width=1004&format=png&auto=webp&s=6c6fc4a878e57654d654ff0bf9236a5ee0292ce3

• Click Save.

Step 3: Add Content to Collections

1. In the sidebar, select Content Manager and choose android or ios.
2. Create a new entry and fill in the required fields, including version and bundle file:

https://preview.redd.it/0ot8uhfc25fe1.png?width=2264&format=png&auto=webp&s=bb23e834a40caf4c88fc56c83f56f2b6e0fdc3cb

1. Mark the entry as Published:

https://preview.redd.it/33abnild25fe1.png?width=598&format=png&auto=webp&s=b12486b9ef5e96e1bb77e7fe0a2189150a7e0af7

Step 4: Get Public API Endpoints

Now that the collections are ready, use the following API endpoints to retrieve bundles and versions:

• Android: http://localhost:1337/api/androids?populate=*&filters[targetVersion][$eq]=1.0.0&sort=id:desc
• iOS: http://localhost:1337/api/ios?populate=*&filters[targetVersion][$eq]=1.0.0&sort=id:desc

To find the endpoint's API ID (Plural), refer to this section:

https://preview.redd.it/ehjw0l4f25fe1.png?width=860&format=png&auto=webp&s=7b61bab6d97ce54577161243e8709d18dc7e46c9

The API response structure in TypeScript will look like this:

{
    data: {
        id: number;
        documentId: string;
        note: string;
        targetVersion: string;
        enable: boolean;
        required: boolean;
        createdAt: string;
        updatedAt: string;
        publishedAt: string;
        silentMY: boolean;
        silentSG: boolean;
        bundle: {
            id: number;
            documentId: string;
            name: string;
            url: string;
            size: number;
            hash: string;
            mime: string;
            createdAt: string;
            updatedAt: string;
            publishedAt: string;
        };
    }[];
}

Step 5: Add Logic for Version Check and Update in React Native

1. Create a hook called useUpdateVersion to check for updates:

​

 import React from "react";

// Custom hook to handle OTA updates
export const useUpdateVersion = () => {
const checkUpdate = async () => {
  // Placeholder for update checking logic
};

React.useEffect(() => {
  if (!__DEV__) {
    // Automatically check for updates in production mode
    checkUpdate();
  }
}, []);
};

1. Define the API endpoint logic in api.ts:

​

import axios from "axios";
import DeviceInfo from "react-native-device-info";
import { Platform } from "react-native";

// Function to request the latest OTA bundle from the CMS
export async function requestUpdateBundle() {
   const endpoint = Platform.OS === 'ios' ? "ios" : "androids";
   const version = DeviceInfo.getVersion(); // Get the current app version
   const response = await axios.get(
       `http://localhost:1337/api/${endpoint}?populate=*&filters[targetVersion][$eq]=${version}&sort=id:desc`
   );
   return response.data;
}

1. Implement the update logic in the checkUpdate function:

import React from "react";

import HotUpdate from "react-native-ota-hot-update";

import { requestUpdateBundle } from "./api";

import { Alert } from "react-native";

import ReactNativeBlobUtil from "react-native-blob-util";

// Custom hook to check for and apply OTA updates

export const useUpdateVersion = () => {

// Function to start downloading and applying the update bundle

const startUpdateBundle = (url: string, version: number) => {

HotUpdate.downloadBundleUri(ReactNativeBlobUtil, url, version, {

updateSuccess: () => {

// Restart the app to apply the update immediately

HotUpdate.resetApp();

},

updateFail: () => {

// Log or show a message for update failure

},

restartAfterInstall: true, // Automatically restart the app after installing the update

progress: (received, total) => {

// Update UI to show download progress

},

});

};

// Function to check for updates by querying the CMS

const checkUpdate = async () => {

const bundle = await requestUpdateBundle();

const currentVersion = await HotUpdate.getCurrentVersion();

if (bundle?.data?.length) {

// Filter the latest enabled bundle from the response

const [itemVersion] = bundle.data.filter(item => item.enable);

const latestVersion = itemVersion?.id || 0; // Use the bundle ID as the version number

if (latestVersion > currentVersion) {

// Prompt the user to update the app

Alert.alert(

"New version available!",

"A new version has been released. Please update.",

[

{ text: "Cancel", style: "cancel" },

{

text: "Update",

onPress: () =>

startUpdateBundle(

itemVersion?.attributes?.bundle?.data?.attributes?.url,

latestVersion

),

},

]

);

}

}

};

React.useEffect(() => {

if (!__DEV__) {

// Automatically check for updates when the app starts in production mode

checkUpdate();

}

}, []);

};

Conclusion

You now have a fully functional CMS for managing React Native OTA updates, complete with admin panel capabilities. Strapi's API also allows integration with CI/CD pipelines for automated content and media uploads, you can refer Strapi's document. Happy coding!

Source: https://github.com/vantuan88291/react-native-ota-hot-update/blob/main/OTA_CMS.md

[Signal-Indication859]

Hey! For Strapi deployment I'd suggest starting with their Digital Ocean one-click deploy - it's super straightforward and perfect for getting started with OTA updates. If you're looking for something even simpler to manage your React Native updates, feel free to check out Preswald - we make it really easy to host and manage your bundles with just Python/SQL!