ElectronJS QuickStart
Tags: electron, javascript, node, vscode
Published: 2020-02-04 19:56:04

Electron is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS, which basically means that if you know how to code a website, you can easily create desktop apps!
Now getting started with Electron can be quite tedious, which is why I'm going to explain how to get started in a few steps.


# What you need to get started
To develop desktop apps using Electron, I personally use [Visual Studio Code](https://code.visualstudio.com/), but most code editors that have a terminal included should work.
You'll also need to install the [NodeJS](https://nodejs.org/en/) runtime.


# Setting up your project
Now that you've got the right tools, let's get started setting up the project. To do so, you'll have to create a folder containing your project, and then open that folder using your code editor (VSCode in my case).
Then open up a new terminal window inside your code editor. Here's how it's done in VSCode:

![VSCode Terminal](https://dev-to-uploads.s3.amazonaws.com/i/n49j4cfaxczhdbbkah2x.png)

Then type in <code>npm init</code>. This will setup your <code>package.json</code> file.
You'll have to enter the following information:
- Package name: your project's name (lowercase and no spaces)
- Version: you can just hit enter for this one as it will default to 1.0.0
- Description: just enter some basic information about the purpose of your project
- Entry point: this one is quite important. It is the javascript file that will be executed when launching the project. I will name mine <code>window.js</code> as it will handle all of our desktop application's windows.
- Test command: this is the command that will be executed when typing <code>npm test</code> in the terminal. In our case we want it to be <code>electron .</code> because we want Electron to launch our application. The dot specifies the directory in which the Electron project is stored, which is just the root directory here, but if you want to store your project files somewhere else, you can adjust the directory.

The remaining fields are just some information for when you'll publish your project on npmjs. I'll leave all those fields empty for now.

Once you confirm, a file called <code>package.json</code> will be created.
It should resemble something like this:

![package.json example](https://dev-to-uploads.s3.amazonaws.com/i/q1mv6swag3lh9tr5z7s1.png)

Notice the <code>script</code> object, containing <code>test</code> which has the value of <code>electron .</code>, which means running <code>npm test</code> will execute your project. You can add other scripts there, such as the <code>start</code> script. More about that [here](https://docs.npmjs.com/misc/scripts).

And to finish setting up your project, you'll have to install electron using npm. This is very easy, as all you have to do is type <code>npm install electron</code> in the terminal window.
Note that a <code>package-lock.json</code> file is created, but you don't have to worry about it.

# Displaying a window
Now that everything is set up, we can start coding! Let's begin by creating the <code>window.js</code> file, that will handle our app's windows.
Right click in the file explorer, and hit "New file". Remember, you have to name it as the entry point of your project in order to execute it when launching your app!

I'll start by declaring four variables:
```javascript
const electron = require("electron");
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow;
```
The first one is a reference to electron. The second one is a reference to the app object of the first constant, which will be used to detect app events, such as when the user launches the app. The third constant is a reference to electron's BrowserWindow, which lets us display an HTML document in the application window. The last variable is just a holder variable that is uninitialized for now, as we will use it later.

Then I'll asign a function to the <code>"ready"</code> event using the <code>app.on</code> function. It will be triggered when the app is launched, and inside of it i'll set up the <code>mainWindow</code> variable with some options defining the size in pixels of the window.
[Here](https://www.electronjs.org/docs/api/browser-window#new-browserwindowoptions) is a list of all the available options.
```javascript
app.on('ready', function() {
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800
  })
}
```

Still inside the <code>app.on</code> function, I'll add the following code to handle closing the window:
```javascript
mainWindow.on('closed', function() {
  mainWindow = null;
})
```

And finally, still inside the <code>app.on</code> function, I'll add the following line, to display an HTML file named <code>index.html</code>:
```javascript
mainWindow.loadURL(`file://${__dirname}/index.html`);
```
Notice how __dirname is used in order to reference the current directory.

The final code should look like this:
```javascript
const electron = require("electron");
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow;

app.on('ready', function() {
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800
  })

  mainWindow.on('closed', function() {
    mainWindow = null;
  })

  mainWindow.loadURL(`file://${__dirname}/index.html`);
});
```


# Displaying your HTML file
Now let's create the HTML file that is going to be displayed in the window. Right click in the file explorer and hit "New file". I'll name mine <code>index.html</code>.

Inside it i'll just write a basic web page:
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test project</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>
```

Now you can just type <code>npm test</code> in the terminal, and you should see the HTML file appearing!

And now it's up to you to create your app! Because we're using NodeJS and Electron, you have the simplicity of creating websites combined with the power of Node. You can install modules from [npmjs](https://www.npmjs.com/) or use the preinstalled ones to extend the capabilities of your project! For example, the preinstalled [Filesystem](https://nodejs.org/api/fs.html) module let's you interact with locally stored files directly in JavaScript, which is great!
If you don't know what to create, [here](https://www.electronjs.org/apps) are some apps made using electron, from which you can inspire yourself.