How to use capacitor without a framework just with rollup

[muuvmuuv]

Looking into a freshly generated capacitor project inside the index.html its says

This simple example uses Capacitor Core as a bundled file. For large apps, we recommend using a bundler/module loader such as rollup or webpack and importing Capacitor using ES2015 imports.

but I cannont find any documentation how to set up capacitor with rollup. Any ideas how to start?

[tafelnl]

It doesn't really matter what you use to bundle your app. It can even be just a simple static index.html.

What you want to do is the following:

In your capacitor.config.json file, change the webDir to your output folder. Something like dist or www. I.e. the output folder where your app gets bundled into when you run npm run build for example.

{
  "appId": "com.example",
  "appName": "example",
  "webDir": "dist",
  "cordova": {},
  "plugins": {}
}

The when you run npx cap copy, it will copy that folder into some folders that will be used by the native Android and iOS app to run it.

[muuvmuuv]

Yes, I know that last part but I have not yet got rollup bundle the index.html correctly so it can be used in native iOS. I would like to have some kind of example setup. Or with webpack.

I found this plugin here but could not get it running: https://github.com/open-wc/open-wc/tree/master/packages/rollup-plugin-html

I would even be fine with a working webpack setup. I just want it as simple as possible including a bundler.

[tafelnl]

I think that is out of scope for Capacitor. You can better take a look at some tutorials or boilerplate about webpack or rollup.

[muuvmuuv]

I do agree with you but it's hard to find any starting point. Anyway I found a solution with webpack.

[muuvmuuv]

Created a starter for Snowpack: https://github.com/muuvmuuv/capacitor-starter-snowpack