Getting started with ElectronJS
Tags: javascript, webdev, beginners
Published: 2022-01-06 10:30:51

In today's web development landscape, there has never been so many frameworks and libraries to choose from. And while many of them have been engineered to be best suited for particular fields of web development, they all generally share the quality of being easier to work with and more intuitive than their predecessors.  No framework exemplifies this more than ElectronJS. ElectronJS is a cross platform framework that is used to develop desktop applications with only javascript, css and html. In this article, we'll walk through how to build a barebones Electron desktop app step by step, and learn about some of the key features along the way. 

To begin, we'll start by doing some set up in the terminal command line by making a directory `mkdir <your_directory_name>` and cd-ing into it with
`cd <your_directory_name>`. Next, we'll add a package.json by running `npm init`. At this point you will be prompted to fill in some options. Many of these are optional, but it is good practice to be as detailed about your projects as possible and there are some common conventions to consider. So, go ahead and give your app a name, description, set the entry point to `main.js` (an Electron convention), author it with your name, and when prompted `is this OK?` say yes, or simply type "y". Then, add the folder to your workspace so we can add some more contents. Next, we'll install Electron both globally and locally. To install globally, type `npm install -g electron` into the command line. To install locally, type `npm install electron --save`. Installing locally will place a node modules folder into your directory along with a package-lock.json file. Lastly, we'll create three files: index.html, main.js, and renderer.js. 

Now that the initial workspace is complete, we'll move on to the code that we need in main.js. Take a look below, then read for an explanation of what it is doing. 

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

let win;

function createWindow() {
  win = new BrowserWindow({ width: 800, height: 600 });

  win.loadURL(
    url.format({
      pathname: path.join(__dirname, 'index.html'),
      protocol: 'file',
      slashes: true,
    })
  );

  win.webContents.openDevTools();

  win.on('closed', () => {
    win = null;
  });

  app.on('ready', createWindow);

  app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
      app.quit();
    }
  });
}
```

The main.js file begins with us requiring a few modules that come with the Electron package. `app` contains functionality pertaining to our app and `BrowserWindow` is a class that creates an instance of a browser window that houses our application. `path` has some nice methods for handling filepaths and `url` will allow us to load our index.html file. We then declare `win`, a shorthand for window, that is assigned to a new browser window in the `createWindow` function which itself takes in an object of options for the window being created. We're only specifying width and height, but other options, such as images, can also be added here. Next, we load our url with `win.loadURL` which creates a path to our index.html file. `win.webContents.openDevTools` gives our applications its dev tools so we can inspect or debug the application just the same as if it were in a web browser. Our last window function sets `win` to null when the window is closed. Lastly, we have two `app` functions, one for calling `createWindow` when the app is opened and one that runs `app.quit` when all the windows are closed. That concludes the `main.js` file. Now we take a look at our index.html: 

#####index.html

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="<some_styling_template_url" />
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Your App Name</title>
  </head>
  <body>
    <h1>My Desktop App</h1>
  </body>
  <script>
    require('renderer.js');
  </script>
</html>
```
The index.html file is mostly boiler plate, but Electron requires that we have a renderer.js file that runs when the window renders and also makes Node.js apis available in the process. 

The final piece of the puzzle is a small change we need to make to our `package.json` file. By default, we'll have a test script that we won't need that we will replace with `"start": "electron ."`. Now all you need to do to start your little desktop app is type `npm start` into the command line and explore the application!