Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Niurka77/tf-app/llms.txt

Use this file to discover all available pages before exploring further.

Every time you change code in src/ — whether it is JavaScript logic, CSS styles, or an HTML view — those changes must go through two steps before they appear in the Android app. First, Vite compiles the source into the dist/ output directory. Then, Capacitor copies that compiled output into the Android project and reconciles any plugin or configuration changes. Skipping either step means your device or emulator will still be running stale assets.

​
The Build-Sync Workflow

1

Build the web app with Vite

Run the build script defined in package.json. Vite compiles everything in src/ and writes the output to dist/:
npm run build
Once complete, dist/ will contain the production-ready index.html, bundled JS, and CSS that the Android WebView will load.
2

Sync with the Android project

Run Capacitor’s sync command to push the new dist/ contents into the Android project and apply any plugin or config updates:
npx cap sync
Capacitor copies web assets into android/app/src/main/assets/public/ and updates the native layer to match the current state of capacitor.config.json and installed plugins.
3

Open Android Studio and run the app

Open the project in Android Studio and deploy it to a device or emulator, or use the Capacitor CLI shortcut:
npx cap open android
Select your target device in the Android Studio toolbar and click Run ▶, or run npx cap run android directly from the terminal.
Running all three commands back-to-back covers the full cycle from source change to device: 
npm run build
npx cap sync
npx cap open android

​
What cap sync Does

npx cap sync performs three distinct operations every time it runs:
  1. Copies web assets — the entire contents of dist/ (configured as "webDir": "dist" in capacitor.config.json) are copied into android/app/src/main/assets/public/, replacing whatever was there before.
  2. Updates native plugins — if you have added or removed a Capacitor plugin (such as @capacitor/splash-screen) since the last sync, Capacitor installs or removes the corresponding native Android module and updates settings.gradle and build.gradle references accordingly.
  3. Applies config changes — any modifications to capacitor.config.json — such as appId, appName, or server settings — are written into the appropriate native configuration files.

​
cap copy vs cap sync

Capacitor ships two related commands with different scopes:
CommandWhat it doesWhen to use it
npx cap copyCopies web assets from dist/ to the native project onlyAfter HTML, CSS, or JS changes when no plugins changed
npx cap syncCopies web assets and updates plugins and configAfter installing or removing a plugin, or after capacitor.config.json changes
If you only changed JavaScript, CSS, or HTML and did not touch package.json plugins or capacitor.config.json, use npx cap copy instead of npx cap sync. It skips plugin resolution and completes significantly faster — especially useful during active UI iteration.

​
Live Reload During Development

For browser-based development, npm run dev starts Vite’s dev server with hot module replacement, which is the fastest way to iterate on UI changes. However, when you need to test on a physical device or emulator, you can point the Android WebView at the running Vite dev server instead of the bundled dist/ assets. Add a server.url to capacitor.config.json using your machine’s local network IP address: 
{
  "appId": "com.example.app",
  "appName": "tf-app",
  "webDir": "dist",
  "server": {
    "url": "http://192.168.1.100:5173",
    "android": {
      "cleartext": true
    }
  }
}
Replace 192.168.1.100 with your machine’s actual LAN IP (find it with ipconfig on Windows or ifconfig/ip a on macOS/Linux). The "cleartext": true flag — nested inside server.android — allows the Android WebView to load from an http:// URL, which is required because Vite’s dev server does not serve over HTTPS by default. This project already ships with server.android.cleartext set to true in capacitor.config.json. After saving the config, run npx cap sync once to push the updated config to Android, then deploy the app. The WebView will load directly from the Vite dev server and reflect code changes instantly without a rebuild-sync cycle.
Remove server.url from capacitor.config.json before building a production release. If that field is present in a production build, the app will attempt to load from the hardcoded dev server URL instead of its bundled assets, causing a blank screen for any user not on your local network. Run npx cap sync after removing it to ensure the Android project is updated.

Build docs developers (and LLMs) love

Get started for freeTalk to us