Use capacitor api/plugins for electron & android without ionic?

[bitnom]

I want to develop an app with capacitor without using ionic. How can I use the capacitor plugins this way? I added the electron and android build targets. If I include a script app.js from index.html with the following:

import { Capacitor } from '@capacitor/core';
import { Plugins } from '@capacitor/core';

I had to: <script type="module" src="assets/js/app.js"></script>

which produces the error: **Uncaught TypeError:

Failed to resolve module specifier "@capacitor/core". Relative references must start with either "/", "./", or "../".**.

What should the path be or is there some other script that can run concurrently and interact with the dom thread like electron and still be compatible with android/ios? I must be doing something wrong.

[dotNetkow]

We're still in the process of building more examples - but I think this thread could help.

[bitnom]

cool thanks

[jcesarmobile]

To use the import syntax to external packages that you installed through npm (such as @capacitor/core) you'll need to use a bundler such as webpack, snowflake, babel, rollup, etc.

If you don't want to use a bundler, you can set the bundledWebRuntime option in capacitor.config.json file to true.
That will copy a capacitor.js file into the www folder with all @capacitor/core code and you can link it in your index.html like <script type="text/javascript" src="capacitor.js"></script>.

Then Capacitor object becomes available and you can just use it.

You can use it like

Capacitor.Plugins.Device.getInfo().then(info => console.log(info));
or

const { Plugins } = Capacitor;
Plugins.Device.getInfo().then(info => console.log(info));

or

const { Plugins } = Capacitor;
const { Device } = Plugins;
Device.getInfo().then(info => console.log(info));

[bitnom]

Thanks! What about node modules? Does bundledWebRuntime also bridge regular npm modules and what should importing a regular npm module look like?

I also heard about Cordova Bridge to node but I'm not sure if it can work in capacitor and how that would work with electron.

[jcesarmobile]

No, bundledWebRuntime only bundles capacitor code, for other libraries you’ll have to use a bundler as the ones I mentioned

[mbushpilot2b]

@TensorTom Interesting. Sounds like ill need a bundler at some point for non-capacitor modules.

@jcesarmobile This worked for me. Thank you. I will have to learn and understand how to include non-capacitor plugin-like modules but for now, this works great.