#Supabase Provider

This guide walks you through setting up hot-updater with Supabase in a React Native project. You'll configure the environment, install required packages, and initialize Supabase for seamless updates.

#Prerequisites

Before you begin, make sure the following are ready:

• Docker Or OrbStack: Install it via Docker or OrbStack.
• Node.js: Version 20 or later is recommended.
• Supabase CLI: Install it via npx supabase.
• Supabase Account: Sign up at Supabase if you don't have one.

#Step 1: Install Required Packages

Run the following command to install dependencies:

npm install hot-updater --save-dev

#Step 2: Configure Supabase

Run the initialization script to start the interactive setup process. Use the following command with your preferred package manager:

npx -y supabase login
npx hot-updater init

Once the setup is complete, a .env file will be generated containing the following keys:

HOT_UPDATER_SUPABASE_ANON_KEY=your-anon-key
HOT_UPDATER_SUPABASE_BUCKET_NAME=your-bucket-name
HOT_UPDATER_SUPABASE_URL=https://your-project-id.supabase.co

#Step 3: Generated Configurations

During the initialization process, the following file is automatically generated:

• hot-updater.config.ts: This file contains the configuration settings for integrating Supabase with your project.

import { bare } from "@hot-updater/bare";
import { supabaseDatabase, supabaseStorage } from "@hot-updater/supabase";
import { defineConfig } from "hot-updater";
import "dotenv/config";

export default defineConfig({
  build: bare({ enableHermes: true }),
  storage: supabaseStorage({
    supabaseUrl: process.env.HOT_UPDATER_SUPABASE_URL!,
    supabaseAnonKey: process.env.HOT_UPDATER_SUPABASE_ANON_KEY!,
    bucketName: process.env.HOT_UPDATER_SUPABASE_BUCKET_NAME!,
  }),
  database: supabaseDatabase({
    supabaseUrl: process.env.HOT_UPDATER_SUPABASE_URL!,
    supabaseAnonKey: process.env.HOT_UPDATER_SUPABASE_ANON_KEY!,
  }),
});

#Step 4: Add HotUpdater to Your Project

The HotUpdater component wraps your application, enabling seamless delivery of updates and fallback UI during updates. Follow these steps to integrate it into your App.tsx:

import { HotUpdater, getUpdateSource } from "@hot-updater/react-native";

function App() {
  return (
    <View>
      <Text>Hello World</Text>
    </View>
  );
}

export default HotUpdater.wrap({
  source: getUpdateSource("https://<project-id>.supabase.co/functions/v1/update-server", {
    updateStrategy: "appVersion", // or "fingerprint"
  }),
  requestHeaders: {
    // if you want to use the request headers, you can add them here
  },
  fallbackComponent: ({ progress, status }) => (
    <View
      style={{
        flex: 1,
        padding: 20,
        borderRadius: 10,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "rgba(0, 0, 0, 0.5)",
      }}
    >
      {/* You can put a splash image here. */}

      <Text style={{ color: "white", fontSize: 20, fontWeight: "bold" }}>
        {status === "UPDATING" ? "Updating..." : "Checking for Update..."}
      </Text>
      {progress > 0 ? (
        <Text style={{ color: "white", fontSize: 20, fontWeight: "bold" }}>
          {Math.round(progress * 100)}%
        </Text>
      ) : null}
    </View>
  ),
})(App);

#Step 5: Add Babel / Re.Pack / Expo Plugin to Your Project

In this step, you will configure Babel to set the bundle ID at build time. This is necessary for integrating the hot-updater plugin into your project.

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    'hot-updater/babel-plugin',
  ],
};

#Step 6: Add Native Code

To complete the integration of hot-updater, you'll need to add native code modifications for both Android and iOS platforms. This step ensures the hot-updater can interact with your app's underlying framework to apply updates seamlessly.

#Android

package com.hotupdaterexample

import android.app.Application
import com.facebook.react.PackageList
import com.facebook.react.ReactApplication
import com.facebook.react.ReactHost
import com.facebook.react.ReactNativeApplicationEntryPoint.loadReactNative
import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
import com.hotupdater.HotUpdater

class MainApplication : Application(), ReactApplication {

override val reactHost: ReactHost by lazy {
  getDefaultReactHost(
    context = applicationContext,
    packageList =
      PackageList(this).packages.apply {
        // Packages that cannot be autolinked yet can be added manually here, for example:
        // add(MyReactNativePackage())
      },
    jsBundleFilePath = HotUpdater.getJSBundleFile(applicationContext), 
  )

}

override fun onCreate() {
  super.onCreate()
  loadReactNative(this)
}
}

#iOS

import UIKit
import React
import React_RCTAppDelegate
import ReactAppDependencyProvider
import HotUpdater

@main
class AppDelegate: RCTAppDelegate {
  override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
    self.moduleName = "HotUpdaterExample"
    self.dependencyProvider = RCTAppDependencyProvider()

    // You can add your custom initial props in the dictionary below.
    // They will be passed down to the ViewController used by React Native.
    self.initialProps = [:]

    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }

  override func sourceURL(for bridge: RCTBridge) -> URL? {
    self.bundleURL()
  }

  override func bundleURL() -> URL? {
#if DEBUG
    RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
#else
    Bundle.main.url(forResource: "main", withExtension: "jsbundle")
    HotUpdater.bundleURL()
#endif
  }
}

#Verifying the Setup

1. Check your Supabase dashboard for the newly created bucket and edge function.
2. Test the HotUpdater integration in your React Native app.

You're all set! 🎉 Start using hot-updater with Supabase for seamless updates in your React Native app.

This document simplifies the initialization process, making it easy for developers to get started with minimal friction.