With Ionic, comes the flexibility of building cross platform apps without any problem. It's far more easier to build high-end user interfaces with added functionalities and reuse the same code to build apps for different platforms. As the rewriting of code is not required, it saves a lot of time and effort.
This post outlines how to create a desktop app using:
npm install -g @ionic/cli
ionic start demo --type=react sidemenu
- This creates a project called
React, instead of
Angularis chosen as the framework for development
Use the template
sidemenuas the base, other template also include
- blank | A blank starter project
- sidemenu | A starting project with a side menu with navigation in the content area
- tabs | A starting project with a simple tabbed interface
- conference | A kitchen-sink application that shows off all Ionic has to offer
The project structure will be similar to below snapshot:
Run below commands:
ionic build # This is a must ionic cap add electron # Add Electron sub-project ionic cap open electron # Run the Electron App # or run these 3 commands in one go: ionic build; ionic cap add electron; ionic cap open electron
Note: If you clone the project from this Github repo, you can find a branch tagged with
ELECTRON_SUCKS, pull this commit and run below command
yarn # Run this to install dependencies cd electron; yarn # Run this to install electron dependencies ionic build; ionic cap sync; ionic cap open electron
You will find that two folders will be created and now the project structure will be similar to below snapshot:
The Electron desktop app will be built and opened, as shown below:
Other than the warnings/errors shown in the DEV tools, we can now see the desktop application up and running!
Wait a minute, why can't we see the left menu as shown in the web App? If you acutely spot this, congratulations, you are so alert and you are not alone!!!
To trouble shoot the above issues, follow the below procedures:
a. Open the
package.json file in the project root folder, and add below code:
as shown below:
electron\index.js, change the line highlighted to:
c. Rebuild the project
ionic build ionic cap sync # or ionic cap copy
electron\app\index.html, change the line highlighted to:
e. Run the below command:
ionic cap open electron
Now, you will see the electron app is up and running with desired UI:
Note that Step d maybe reverted after calling
ionic cap sync or
ionic cap copy. If you found the app no longer loads as expected, try to check if is reverted!
Re-run the electron app, yeal!
ionic cap open electron