Hey Devs! Let’s get crafty with Over-The-Air (OTA) updates for React Native CLI without leaning on packages like CodePush or Expo. With App Center’s retirement looming, it’s time to take control and build your own OTA system. Think of it as cooking your app’s updates from scratch-messy at first, but oh-so-satisfying! Let’s dive in with a pinch of humor to keep the bugs at bay.
<h2>Why Go Package-Free for OTA?</h2>
OTA updates let you push JavaScript bundle changes to your app without resubmitting to app stores. Building your own system means no dependency on third-party services, full control over the process, and zero extra library bloat. Plus, you get to flex your dev muscles by handling everything manually-talk about street cred!
<h2>The Core OTA Flow: How It Works</h2>
The idea is simple: host your updated JS bundle on a server, have your app check for new versions, download if available, and reload to apply changes. Here’s the breakdown without any pre-built packages:
<ul>
<li>Bundle Your Code: Generate a production-ready JS bundle for your app.</li>
<li>Host It Somewhere: Use a static hosting service like Firebase Hosting or your own server.</li>
<li>Check for Updates: Make your app ping the server to compare versions.</li>
<li>Download &amp; Apply: Fetch the new bundle, save it locally, and reload the app.</li>
</ul>
<h2>Step-by-Step: Building Your OTA System</h2>
Let’s roll up our sleeves and build a lightweight OTA mechanism for a bare React Native CLI app (using RN 0.74, the latest at the time of writing).
<h3>1. Generate the JS Bundle</h3>
First, create a production bundle for Android (or iOS, adjust as needed) using the React Native CLI:
<pre><code class="language-bash">npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output ota-bundles/index.android.bundle --assets-dest ota-bundles
</code></pre>
This spits out <code>index.android.bundle</code> and related assets in an <code>ota-bundles</code> folder. It’s your app’s brain in a neat little package.
<h3>2. Host the Bundle</h3>
Pick a hosting solution-Firebase Hosting is free and easy for starters. Set up a project, install the Firebase CLI (<code>npm install -g firebase-tools</code>), log in (<code>firebase login</code>), and initialize hosting in your project folder with <code>firebase init hosting</code>. Point it to your <code>ota-bundles</code> directory, then deploy:
<pre><code class="language-bash">firebase deploy --only hosting
</code></pre>
You’ll get a URL (e.g., <code>https://your-project.web.app</code>) where your bundle lives. Also, host a <code>version.json</code> file alongside it to track the bundle version, like:
<pre><code class="language-json">{
 &quot;version&quot;: &quot;1.0.1&quot;,
 &quot;timestamp&quot;: &quot;2025-05-14T11:37:00Z&quot;
}
</code></pre>
This helps your app know if there’s something new to grab.
<h3>3. Check for Updates in Your App</h3>
In your React Native app, use basic HTTP requests (via <code>fetch</code>) to check the server’s <code>version.json</code> against a locally stored version. Store the current version in <code>AsyncStorage</code> for comparison.
Here’s a snippet to check for updates on app start:
<pre><code class="language-javascript">import AsyncStorage from &#x27;@react-native-async-storage/async-storage&#x27;;
import { Alert } from &#x27;react-native&#x27;;

const VERSION_URL = &#x27;https://your-project.web.app/version.json&#x27;;
const LOCAL_VERSION_KEY = &#x27;localJsBundleVersion&#x27;;

const checkForUpdate = async () =&gt; {
 try {
 const response = await fetch(VERSION_URL + &#x27;?t=&#x27; + Date.now(), {
 headers: {
 &#x27;Cache-Control&#x27;: &#x27;no-cache&#x27;,
 &#x27;Pragma&#x27;: &#x27;no-cache&#x27;,
 &#x27;Expires&#x27;: &#x27;0&#x27;,
 },
 });
 const remoteData = await response.json();
 const remoteVersion = remoteData.version;
 const localVersion = await AsyncStorage.getItem(LOCAL_VERSION_KEY) || &#x27;0.0.0&#x27;;

 if (remoteVersion !== localVersion) {
 Alert.alert(&#x27;Update Available&#x27;, &#x27;A new version is ready. Download now?&#x27;, [
 { text: &#x27;Cancel&#x27;, style: &#x27;cancel&#x27; },
 { text: &#x27;Update&#x27;, onPress: () =&gt; downloadBundle(remoteVersion) },
 ]);
 }
 } catch (error) {
 console.error(&#x27;Error checking for updates:&#x27;, error);
 }
};
</code></pre>
Call this in a <code>useEffect</code> on app load to silently scout for updates.
<h3>4. Download and Store the Bundle</h3>
If there’s a new version, download the bundle using <code>fetch</code> and save it to the device’s filesystem with <code>react-native-fs</code> (okay, a tiny dependency, but it’s just for file handling). Here’s how:
<pre><code class="language-javascript">import RNFS from &#x27;react-native-fs&#x27;;

const BUNDLE_URL = &#x27;https://your-project.web.app/index.android.bundle&#x27;;
const LOCAL_BUNDLE_PATH = `${RNFS.DocumentDirectoryPath}/index.android.bundle`;

const downloadBundle = async (version) =&gt; {
 try {
 console.log(&#x27;Downloading new bundle...&#x27;);
 const downloadResult = await RNFS.downloadFile({
 fromUrl: BUNDLE_URL,
 toFile: LOCAL_BUNDLE_PATH,
 }).promise;

 if (downloadResult.statusCode === 200) {
 await AsyncStorage.setItem(LOCAL_VERSION_KEY, version);
 Alert.alert(&#x27;Update Ready&#x27;, &#x27;Restart app to apply changes?&#x27;, [
 { text: &#x27;Restart Now&#x27;, onPress: () =&gt; restartApp() },
 ]);
 } else {
 console.error(&#x27;Download failed:&#x27;, downloadResult.statusCode);
 }
 } catch (error) {
 console.error(&#x27;Failed to download bundle:&#x27;, error);
 }
};
</code></pre>
<h3>5. Reload the App</h3>
To apply the update, restart the app manually or use a simple reload trick. Since we’re avoiding heavy packages, you can trigger a reload with <code>react-native-restart</code> (another small helper) or prompt users to close and reopen the app.
<pre><code class="language-javascript">import RNRestart from &#x27;react-native-restart&#x27;;

const restartApp = () =&gt; {
 RNRestart.Restart();
};
</code></pre>
<h3>6. Load the Local Bundle</h3>
On app start, check if a local bundle exists and load it. React Native automatically loads the bundle from the default location if overridden, but ensure your setup points to the custom path if needed.
<h2>The Funny Side of DIY OTA</h2>
Ever pushed an update that turned your app’s font into Comic Sans by mistake? With a custom OTA system, you can roll back faster than your users can screenshot the disaster. Just don’t tell them you’re basically playing Jenga with live code!
<h2>Gotchas to Watch</h2>
<ul>
<li>Security: Secure your hosting URL or add authentication-don’t let just anyone snag your bundle.</li>
<li>Size Matters: JS bundles can be chunky; consider delta updates or compression to save bandwidth.</li>
<li>Rollback Plan: Always keep old bundles handy on your server for quick reversions if things go south.</li>
</ul>
<h2>Let’s Swap Stories!</h2>
Have you built a custom OTA system for React Native? Got a hilarious update blunder to share? Or are you tempted to try this DIY approach? Drop your thoughts below-I’m all ears! Let’s get this thread popping with wild ideas and epic fails!

React Nexus – A squad of passionate devs mastering React, React Native, and JavaScript together! 🚀

Ideology: Learn, build, and grow—while keeping it fun, supportive, and impactful! 💡🔥

React Nexus 🚀

Learn how to implement Over-The-Air updates for React Native CLI apps without relying on third-party packages like CodePush or Expo. This DIY approach involves generating production-ready JS bundles, hosting them on a server, and setting up the app to check for and apply updates manually, offering greater control and reduced dependencies.

🚀 DIY OTA Updates in React Native CLI: Build Your Own Update Ninja!

Is it also works if we add subscriptions that are handled on web to avoid In-App Purchases. So they allow to do that?