Using Ionic and React to create Electron desktop App: A step-by-step tutorial and troubleshooting

Ionic is an open source UI toolkit for building high quality, cross-platform native, web, mobile and desktop app experiences. Move faster with a single code base, running everywhere with JavaScript and the Web!

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:

• Ionic
• React
• Electron

Install Ionic CLI

npm install -g @ionic/cli

Create/Start a project

ionic start demo --type=react sidemenu

• This creates a project called demo
• React, instead of Angular is chosen as the framework for development

• Use the template sidemenu as 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 the project as a web app

ionic serve

Then a web page will be opened by the default browser:

Add Electron build target

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!!!

Troubleshooting Electron Desktop

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:

"homepage": "./",

as shown below:

b. Open electron\index.js, change the line highlighted to:

mainWindow.loadURL('http://localhost:8100');

c. Rebuild the project

ionic build
ionic cap sync # or  ionic cap copy

d. Open electron\app\index.html, change the line highlighted to:

<base href="./"/>

e. Run the below command:

    ionic cap open electron

Now, you will see the electron app is up and running with desired UI:

Hooray~

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