The web directory (..\build) must contain a "index.html"

[dprem06]

[error] The web directory (..\build) must contain a "index.html".
It will be the entry point for the web portion of the Capacitor app.

npx cap add android
While try to add android platform in next js shows me error, can you help me how to copy build folder to assets and convert android apk?

[jcesarmobile]

In your capacitor.config.json file you should have a webDir entry that must point to a folder where your web assets are built and it should contain an index.html file.

[jshi991]

I dont have a capacitor.config.json should I just make one?

[jcesarmobile]

you can have a capacitor.config.json, a capacitor.config.ts or capacitor.config.js.
If you don't have any of those, you should run npx cap init, that's the first step for adding capacitor to your project.

[Kausthuban27]

I have a file index.html dist folder. Yet I still get same error.

[JPaulMora]

Should I just create it? an empty index.html file?

Thanks

[Saqib92]

What if i want to change index.html file name to default.html? I am working on PWA + mobile app and my scenario is on Server i want to open index.html as Landing Page with <a> anchor tag to default.html redirect it to my app without change URL.

[rujorgensen]

@Saqib92 did you find a solution to this? I'm using Angular with SSR, which in certain configurations generates an index.csr.html-file instead.

[Saqib92]

@Saqib92 did you find a solution to this? I'm using Angular with SSR, which in certain configurations generates an index.csr.html-file instead.

Yes, to make mobile build use command:

1. ng build --ssr=false
2. npx cap sync
3. npx cap build android/ios

[rujorgensen]

Ah Yes, I guess I could make a non-ssr build just for the Capacitor app--I can see how that would solve the issue, thanks 👍!

(Although I just dont see why Capacitor should be in charge of what we choose to name our index file and not at least let us configure it 😒)

[Saqib92]

Ah Yes, I guess I could make a non-ssr build just for the Capacitor app--I can see how that would solve the issue, thanks 👍!

(Although I just dont see why Capacitor should be in charge of what we choose to name our index file and not at least let us configure it 😒)

capacitor do have this configuration, you can set file name, but that doesn't work (last time tried). so --ssr=false is the only solution for now.

[coler8]

ionic build before, solve it.

[mohammedmoutawakkil]

if you are using nextjs 13 you should do that in your next.config.js :

const nextConfig = {
trailingSlash: true,
output: 'export',
}
module.exports = nextConfig

after that write this in your package.json :

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "static": "next build && next export"
  },

next run 'npm run static' Or 'yarn static' then you will see an 'out' folder in your project use this folder name in your capacitor.config.ts
now you can just run 'npx cap sync'

[kunzeleric]

What about the index.html?

Seems a bit uncommon to have just a regular index.page.tsx in the Pages Router.. In my case, its supposed to redirect always "/" to "/home" so then it reaches out for the index file inside the Home Folder.. Should I make home page a index.page.tsx instead of a folder route for this to work?

[jullicer]

I checked the output folder and corrected the path from 'www' to 'www/browser'.
then run npx cap add/update android
const config: CapacitorConfig = { appId: 'xxxx.app', appName: 'xxx', webDir: 'www/browser' }

[Mishaalfatima1]

Thank u so much it is very helpfull

[broomfn]

+1, This use to work fine when we where on Angular 18, but upgraded to Angular 19, which moves the build over to esbuild (no longer webpack) and that seems to drop the bundle in a "browser" folder under "www" now.

[broomfn]

I can confirm @jullicer suggestion fixes this for me, many thanks.