Capacitor Android app showing ERR_CONNECTION_REFUSED when using webDir: "dist"

Ionic Framework Ionic React
1

Hi everyone,

I’m building a mobile app using React + Vite + Capacitor. I am using the dist build approach instead of running a development server.

My capacitor.config.ts looks like this:

const config: CapacitorConfig = {
  appId: "co.testapp.com",
  appName: "Test App",
  webDir: "dist"
};

I build the project using:

npm run build
npx cap sync
npx cap run android

The dist folder is generated correctly and contains index.html and assets.

However, when the Android app starts, the WebView shows this error:

Failed to load resource: net::ERR_CONNECTION_REFUSED
Webpage https://localhost could not be loaded

It looks like Capacitor is still trying to load from https://localhost instead of the bundled files.

Things I have already checked:

  • Removed any server.url from capacitor.config.ts

  • Rebuilt the project (npm run build)

  • Ran npx cap sync

  • Cleaned the Android build (./gradlew clean)

  • Confirmed that dist/index.html exists

Expected behavior:
The app should load from capacitor://localhost/index.html.

Has anyone experienced this issue or knows what might cause Capacitor to still attempt loading https://localhost?

Any help would be appreciated.

2

To clarify something, the default Capacitor URL on Android is https://localhost. capacitor://localhost is only the default for iOS.

If you just run:

npm run build
npx cap sync

you do have files in android/app/src/main/assets/public including an index.html file? That is where your compiled JS assets get copied when running cap sync.

3

Hello
Yes index.html is there but still is not working

image
image296×401 12.2 KB

4

How are you testing this, in an actual device or in the simulator?