Creating Desktop App With Electron

Published 2018-07-16 15:32
Tagged on nodejs electron

- Assuming we have all set with nodejs and npm for creating a simple desktop project with electron. Now what we need, just to initiate a new project with the following command.

```
$ npm init
```
    
- Install electron with npm. All binary dependencies of electron will be preserved inside the node-modules directory.

```
$ npm install electron --save-dev --save-exact
```

- We want to create an entry point js file to write some server side codes which will render our desired HTML files to the user through chromium interface or any other modern browsers. Let’s create main.js file. Then we need electron APIs to make available in this js file. We will use this as a simple controller which will render an HTML page to show in the client side (in our case a desktop window).

`main.js`
```
const electron = require('electron');
```

- Since this electron variable is actually a complex object with lots of functionality inside, we will be using it for many purposes like creating window, load HTML files on that window etc. With the help of following line we can access app and BrowserWindow functionalities of electron.

`main.js`
```
const electron = require('electron');
const {app, BrowserWindow} = electron;
```

- We have to define what are we going to do when the application is ready to run. We will create a browser window and load an HTML file on this window. We may switch on the developer tools for debugging purposes as we do in chrome browser. Let the index.html file has some HTML content. So let’s create and load up this file.

`main.js`
```javascript
const electron = require('electron');
const {app, BrowserWindow} = electron;

app.on('ready', () => {
  let win = new BrowserWindow({width:800, height: 600});
  win.loadURL(`file://${__dirname}/index.html`);
  win.webContents.openDevTools();
});
```

`index.html`

```

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <h1>Grrr!</h1>
</body>
</html>

```

- Now let’s edit out package.json. Just change the “scripts” part, so that it becomes like the following. This helps us to run electron binaries and all it dependencies and start our main.js with electron whenever we run this project.

```
"scripts": {
    "start": "electron main.js"
},
```
- Now let’s check whether our application works or not. Just write npm start in the terminal. A window should be popped up.

> Grrr!

Nothing to worry, this is the content we should see in the window.

- main.js file is maintaining the whole life-cycle of this application. We are just rendering HTML contents to the client window whenever we wish and we can manage it through our main.js. We can add more js files to control or manage contents. We can include them in our main.js. We can also include them from HTML files. Adding js like following will not allow us to control contents as we like to do from server side.

```
<script src="index.js"></script>
```

Since we want to keep communication with our client codes and server codes, we have to do it with in some different way. We would rather write-
```
<script>require('./index.js')</script>
```
So our index.html file looks like the following-

`index.html`

```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <h1>Grrr!</h1>
  <script>require('./index.js')</script>
</body>
</html>
```
- Now we create index.js file. Since this file is added in client side html code. We have to include electron again, but in remote mode and that’s all, we can use/access all methods and variables written in our main.js (see #10). Lets create a button on the window.

`index.js`
```
const remote = require('electron').remote
const main = remote.require('./main.js')

var button = document.createElement('button')
button.textContent = 'Open Window'
```
- To use/access methods and variables we have to make sure that these methods/variables are written in export mode. So this remote-export combination is actually allowing us to maintain this server client communication. We have created a button in the window using index.js and we want to add an action listener method in server. We add exports.openWindow method and load some other file and render that to the client which is almost a similar process of window.alert() method of js in the client browser, but in this case we are doing the same thing with server side code. Thus we can have more control and managing power on the user contents.

`main.js`
```
const electron = require('electron')
const {app, BrowserWindow} = electron

app.on('ready', () => {
  let win = new BrowserWindow({width:800, height: 600})
  win.loadURL(`file://${__dirname}/index.html`)
  win.webContents.openDevTools()
})

exports.openWindow = () => {
  let win = new BrowserWindow({width:400, height: 200})
  win.loadURL(`file://${__dirname}/bear.html`)
}
```
Add event listener which actually calls remote (server export methods) openWindow method.

`index.js`
```
const remote = require('electron').remote
const main = remote.require('./main.js')

var button = document.createElement('button')
button.textContent = 'Open Window'
button.addEventListener('click', () => {
  main.openWindow()
}, false)
document.body.appendChild(button)
```

`bear.html`

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  I'm bear, a html file!
</body>
</html>
```
- Run the project with npm start , a window with a button will be appeared, clicking on the button will popping up a new window which is actually bear.html contents. We are done!

So far we have learned how to create a window, add contents on that, server and client side js communication. That’s all for today. Happy coding.

SHARE THIS POST

Creating Desktop App With Electron

Related Posts