DEV Community

loading...
Cover image for Using Ionic and React to create Electron desktop App: A step-by-step tutorial and troubleshooting

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

davidkou profile image XinyuStudio ・3 min read

Alt Text

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
Enter fullscreen mode Exit fullscreen mode

Create/Start a project

ionic start demo --type=react sidemenu
Enter fullscreen mode Exit fullscreen mode
  • 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:

image

Run the project as a web app

ionic serve
Enter fullscreen mode Exit fullscreen mode

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

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

You will find that two folders will be created and now the project structure will be similar to below snapshot:

image

The Electron desktop app will be built and opened, as shown below:

image

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": "./",
Enter fullscreen mode Exit fullscreen mode

as shown below:

image

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

mainWindow.loadURL('http://localhost:8100');
Enter fullscreen mode Exit fullscreen mode

image

c. Rebuild the project

ionic build
ionic cap sync # or  ionic cap copy
Enter fullscreen mode Exit fullscreen mode

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

<base href="./"/>
Enter fullscreen mode Exit fullscreen mode

image

e. Run the below command:

    ionic cap open electron
Enter fullscreen mode Exit fullscreen mode

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

image

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
Enter fullscreen mode Exit fullscreen mode

Discussion (0)

pic
Editor guide