DEV Community

Cover image for 🚀 Setting Up Capacitor to Load a Web URL in a New React + TypeScript App
Greta Anjalin D
Greta Anjalin D

Posted on

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

#reactnative #react #weburltoapk #appconfig

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
Enter fullscreen mode Exit fullscreen mode

(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
Enter fullscreen mode Exit fullscreen mode

📝 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
Enter fullscreen mode Exit fullscreen mode

🧩 Modify index.tsx 

const root = ReactDOM.createRoot(document.getElementById('root')!);
Enter fullscreen mode Exit fullscreen mode

🧪 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;
Enter fullscreen mode Exit fullscreen mode

🧾 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"]
}
Enter fullscreen mode Exit fullscreen mode

✅ Your project is now TypeScript ready!

⚙️ Step 3: Set Up Capacitor

📦 Install Capacitor Core and CLI 

npm install @capacitor/core @capacitor/cli --force
Enter fullscreen mode Exit fullscreen mode

🔧 Initialize Capacitor 

npx cap init
Enter fullscreen mode Exit fullscreen mode

🏗️ Build Your React App 

npm run build
Enter fullscreen mode Exit fullscreen mode

➕ Add Android Platform 

npx cap add android
npm install @capacitor/android --force
Enter fullscreen mode Exit fullscreen mode

🔄 Sync Capacitor Config 

npx cap sync
Enter fullscreen mode Exit fullscreen mode

📱 Open Android Project in Android Studio 

npx cap open android
Enter fullscreen mode Exit fullscreen mode

🛠️ Every time you update the React app:

npm run build
npx cap sync
Enter fullscreen mode Exit fullscreen mode

🌐 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;
Enter fullscreen mode Exit fullscreen mode

👀 (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;
Enter fullscreen mode Exit fullscreen mode

⚠️ Notes

📦 FlatDir Warning (Android)

Check your android/build.gradle:

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

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

Top comments (0)