Using Ionic and React to create Electron desktop App: A step-by-step tutorial and troubleshooting
Tags: ionic, electron, react, howto
Published: 2021-04-10 03:48:01

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ahb41a0qfa0kdpkzldun.jpg)

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

```bash
npm install -g @ionic/cli
```

### Create/Start a project

```bash
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:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/up2xle3wjcebsa08ad9e.png)
 

### Run the project as a web app

```bash
ionic serve
```

Then a web page will be opened by the default browser:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jq21svhnnim1q7al6gs9.png)


### Add Electron build target

Run below commands:

```bash
    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](https://github.com/hkusoft/ionic-react-electron-fix), you can find a branch tagged with `ELECTRON_SUCKS`, pull this commit and run below command

```bash
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:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y6egmsqadsedbrndm77w.png)
 
The Electron desktop app will be built and opened, as shown below:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4vazauvukis9a4eqrcqv.png)

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:

```bash
"homepage": "./",
```
as shown below:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hxoawlutu6fc18qvuk7r.png)

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

```bash
mainWindow.loadURL('http://localhost:8100');
```
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hfw1gjy5nprf3059d1ls.png)
 
 
c. Rebuild the project

```bash
ionic build
ionic cap sync # or  ionic cap copy
```

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

```bash
<base href="./"/>
```
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cioddrr90qs3r1vf6a3j.png)

e. Run the below command:

```bash
    ionic cap open electron
```

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

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ccwj54dd3o77bhkpy4v7.png)
 

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 **<base href="./"/>** is reverted!

Re-run the electron app, yeal!

```bash
ionic cap open electron
```