🚀 Setting Up Capacitor to Load a Web URL in a New React + TypeScript App

Greta Anjalin D — Tue, 05 Aug 2025 12:21:40 +0000

This guide walks you through the complete steps to:

✅ Create a React app with TypeScript

✅ Set up Capacitor

✅ Load an external web URL (like a live panel) inside your Android/iOS app

✅ Optionally preview it during development

🧱 Step 1: Create React App with TypeScript

npx create-react-app my-app
cd my-app

(Replace my-app with your desired project name.)

🛠️ Step 2: Convert Project to TypeScript

📦 Install TypeScript & React Types

npm install --save typescript @types/react @types/react-dom

📝 Rename Files

.js → .ts (for non-JSX files)
.jsx → .tsx (for component files)

🛠️ Create tsconfig.json

npx tsc --init
npm install --save-dev @types/jest

🧩 Modify index.tsx

const root = ReactDOM.createRoot(document.getElementById('root')!);

🧪 Update reportWebVitals.tsx

import { ReportHandler } from 'web-vitals';

const reportWebVitals = (onPerfEntry?: ReportHandler) => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
      getCLS(onPerfEntry);
      getFID(onPerfEntry);
      getFCP(onPerfEntry);
      getLCP(onPerfEntry);
      getTTFB(onPerfEntry);
    });
  }
};

export default reportWebVitals;

🧾 Replace tsconfig.json

{
  "compilerOptions": {
    "module": "ESNext",
    "target": "ESNext",
    "moduleResolution": "Node",
    "verbatimModuleSyntax": false,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "jsx": "react-jsx",
    "resolveJsonModule": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "isolatedModules": true,
    "noEmit": true
  },
  "include": ["src"]
}

✅ Your project is now TypeScript ready!

⚙️ Step 3: Set Up Capacitor

📦 Install Capacitor Core and CLI

npm install @capacitor/core @capacitor/cli --force

🔧 Initialize Capacitor

npx cap init

🏗️ Build Your React App

npm run build

➕ Add Android Platform

npx cap add android
npm install @capacitor/android --force

🔄 Sync Capacitor Config

npx cap sync

📱 Open Android Project in Android Studio

npx cap open android

🛠️ Every time you update the React app:

npm run build
npx cap sync

🌐 Step 4: Load External Web URL in Capacitor

Update your capacitor.config.ts or capacitor.config.json:

const config: CapacitorConfig = {
  appId: 'com.yourcompany.app',
  appName: 'app',
  webDir: 'build',
  server: {
    url: '{Your Web Url}',
    cleartext: true
  }
};

export default config;

👀 (Optional) Show Web App in iFrame for Local Preview

Example App.tsx

import './App.css';

function App() {
  return (
    <div className="App" style={{ height: '100vh', margin: 0, padding: 0 }}>
      <iframe
        src="{Your Web Url}"
        title="Admin"
        width="100%"
        height="100%"
        style={{ border: 'none' }}
      />
    </div>
  );
}

export default App;

⚠️ Notes

📦 FlatDir Warning (Android)

Check your android/build.gradle:

allprojects {
    repositories {
        google()
        mavenCentral()
        flatDir {
            dirs project(':capacitor-android').file('libs')
        }
    }
}

Leave it as-is, unless you're troubleshooting plugin issues.

✅ You're Done!

You've successfully:

🎉 Created a React + TypeScript app

🔌 Integrated Capacitor

🌍 Configured it to load a live web app

🧪 Built and previewed the app locally and on Android

DEV Community: Greta Anjalin D

Load a Web URL in a React + TypeScript App Using Capacitor 🔥