DEV Community

Cover image for ElectronJS QuickStart
Oskar Codes
Oskar Codes

Posted on • Updated on

ElectronJS QuickStart

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, but most code editors that have a terminal included should work.
You'll also need to install the NodeJS 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

Then type in npm init. This will setup your package.json 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 window.js as it will handle all of our desktop application's windows.
  • Test command: this is the command that will be executed when typing npm test in the terminal. In our case we want it to be electron . 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 package.json will be created.
It should resemble something like this:

package.json example

Notice the script object, containing test which has the value of electron ., which means running npm test will execute your project. You can add other scripts there, such as the start script. More about that here.

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 npm install electron in the terminal window.
Note that a package-lock.json 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 window.js 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:

const electron = require("electron");
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow;
Enter fullscreen mode Exit fullscreen mode

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 "ready" event using the app.on function. It will be triggered when the app is launched, and inside of it i'll set up the mainWindow variable with some options defining the size in pixels of the window.
Here is a list of all the available options.

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

Still inside the app.on function, I'll add the following code to handle closing the window:

mainWindow.on('closed', function() {
  mainWindow = null;
})
Enter fullscreen mode Exit fullscreen mode

And finally, still inside the app.on function, I'll add the following line, to display an HTML file named index.html:

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

Notice how __dirname is used in order to reference the current directory.

The final code should look like this:

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`);
});
Enter fullscreen mode Exit fullscreen mode

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 index.html.

Inside it i'll just write a basic web page:

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

Now you can just type npm test 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 or use the preinstalled ones to extend the capabilities of your project! For example, the preinstalled Filesystem module let's you interact with locally stored files directly in JavaScript, which is great!
If you don't know what to create, here are some apps made using electron, from which you can inspire yourself.

Top comments (0)