OtaKitOtaKit
Docs
Dashboard →

React guide

This walkthrough uses Vite + React with Capacitor and the default hosted OtaKit flow.

1

Create the React app

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
2

Add Capacitor

npm install @capacitor/core @capacitor/cli
npx cap init my-app com.example.myapp

Set webDir to dist in capacitor.config.ts:

import type { CapacitorConfig } from "@capacitor/cli";

const config: CapacitorConfig = {
  appId: "com.example.myapp",
  appName: "my-app",
  webDir: "dist",
};

export default config;
3

Add native platforms

npm install @capacitor/ios @capacitor/android
npx cap add ios
npx cap add android
4

Install the OtaKit plugin

npm install @otakit/capacitor-updater
npx cap sync
5

Create an OtaKit app and log in

Create an app in the OtaKit dashboard and copy its appId. Then install the CLI and log in:

npm install -g @otakit/cli
otakit login
6

Configure the plugin

const config: CapacitorConfig = {
  appId: "com.example.myapp",
  appName: "my-app",
  webDir: "dist",
  plugins: {
    OtaKit: {
      appId: "YOUR_OTAKIT_APP_ID",
      appReadyTimeout: 10000,
    }
  }
};
7

Add notifyAppReady()

Call notifyAppReady() once your app has rendered on a native device:

// src/AppReady.tsx
import { useEffect } from "react";
import { Capacitor } from "@capacitor/core";
import { OtaKit } from "@otakit/capacitor-updater";

export function AppReady() {
  useEffect(() => {
    if (Capacitor.isNativePlatform()) {
      OtaKit.notifyAppReady();
    }
  }, []);

  return null;
}

Render it near the top of your app:

// src/App.tsx
import { AppReady } from "./AppReady";

export default function App() {
  return (
    <>
      <AppReady />
      <main>...</main>
    </>
  );
}
8

Build and run on a device

npm run build
npx cap sync
npx cap run ios       # or: npx cap run android

Note: The app must be published to the App Store (and/or Play Store) at least once with the OtaKit plugin configured before end users’ devices can receive live updates.

9

Ship your first OTA update

Make a visible change, rebuild, and release:

npm run build
otakit upload --release

Relaunch the app on your device. By default, OtaKit downloads the update in the background and activates it on the next cold launch.

Next