Build Electron application using Capacitor for Ionic React SPA

Capacitor is one of the good tools to create a native application.We can easy to create application for iOS / […]

Capacitor is one of the good tools to create a native application.
We can easy to create application for iOS / android / electron and any other platform.
Today, I’ll try to create electron application from Ionic React application by using Capacitor.

Enable Capacitor

To the beginning, we have to enable capacitor in own Ionic application.

$ ionic integrations enable capacitor

Add Electron platform

Next, run cap add command to add the Electron platform.

$ npx cap add electron
✔ Installing NPM Dependencies in 50.97s
✔ add in 50.98s
✔ Copying web assets from build to electron/app in 74.63ms
✔ Copying capacitor.config.json in 1.42ms
✔ copy in 78.75ms
✔ update electron in 91.89μp

Then you get a new files in the electron directory.

% tree electron -L 1
electron
├── app
├── capacitor.config.json
├── index.js
├── node_modules
├── package-lock.json
├── package.json
└── splash_assets

3 directories, 4 files

How do the Electron read our application?

I check the directory, probably, Capacitor will copy our builded files from /buildto./electron/app.

So if we want to update the application code, I think we need to run the following command.

$ yarn run build // or ionic build
$ npx cap copy
$ npx cap open electron

Edit any files

For now, The Ionic React application will not work well by default.

We need to update two files before open the Electron application.

`public/index.html`: Replace base tag attribute

We have to replace the base tag in the file.

% git diff public/index.html 
diff --git a/public/index.html b/public/index.html
index 25b753b..f2ab8ed 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,8 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <title>Ionic App</title>
-
-    <base href="/" />
+    <base href="./" /> 
 
     <meta name="color-scheme" content="light dark" />
     <meta

`package.json`: Set homepage property

We need to add homepage property in the file.

% git diff package.json
diff --git a/package.json b/package.json
index 0bca5d1..27c1f90 100644
--- a/package.json
+++ b/package.json
@@ -2,6 +2,7 @@
   "name": "ionic-react-wordpress",
   "version": "0.0.1",
   "private": true,
+  "homepage": "./",
   "dependencies": {
     "@capacitor/core": "2.0.1",
     "@ionic/react": "^5.0.7",

Run it!

After that, we can run our application from Electron.

$ ionic build
$ npx cap copy
$ npx cap open electron

Build it

Finally, we can build our own application as a Desktop application.

$ cd electron
$ npx electron-packager . sample --platform=darwin --arch=x64
$ tree ./sample-darwin-x64 -L 2
./sample-darwin-x64
├── LICENSE
├── LICENSES.chromium.html
├── sample.app
│   └── Contents
└── version

2 directories, 3 files

$ open ./sample-darwin-x64

When open the directory, we can find a new application made by Electron.

We can run own application as a Desktop application!