How to Install and Set Up Electron on Windows 10

Syamlal CM

6 years ago

If we can build a website, we can also build a native desktop application for Windows, MacOS, and Linux operating systems using the same technology we used in web development(HTML, CSS, and JS). Electron is the framework used for this and it’s simpler than we think. It uses Node.js runtime for the backend and Chromium for the frontend.

Here we are going to discuss the steps in installing and setting up an Electron app on Windows 10.

Install Electron on Windows 10

1. Install Nodejs

In this tutorial, we are going to install Electron using the Node Package Manager(NPM). So first, it needs to install Nodejs on our system. NPM will be installed with Nodejs.

So, the current stable version of Node.js can be downloaded and installed from the official website that is given below.

https://nodejs.org

You can see two versions on the main page. The stable version and the latest version. The stable version is recommended for most users. Currently, 12.16.1 is the stable version of Nodejs and we need to download it.

It downloads an exe file to your system. Now install it on your system. If there is any doubt, the screenshots I provided below will help you.

1. Start the installation wizard – The first step is to start the installation wizard by running the installation file.

2. Accept the license agreement – Now accept the license agreement and click Next.

3. Choose the installation directory – AS default, the Node.js installed in the Program Files directory. If you are preferring another, it can be chosen from this step.

4. Select the features – We can customize the features to be installed with Node.js. But here, we don’t need to bother about it. Just click Next.

5. Install tools for Native Modules – In this step, you can optionally install tools like Python2, Visual Studio Build Tools, etc. Just skip and click Next.

6. Start installation – Now click the Install button to start Node.js installation.

7. Finish the installation – After a successful installation close the installation wizard by clicking the Finish button.

Now, verify Node.js and NPM are installed on our system. Open Command Prompt and check the Node and npm versions with the below commands. You can see the versions as it shows in the below image.

Note:- If you don’t know how to open Command Prompt, Press Windows key in your keyboard and search for “cmd”.

node -v
npm -v

2. Install Electron

Now we can install Electron globally on our system using NPM.

npm i electron -g

3. Create an Electron Project

3.1. Initialize the Project

First, create a project directory and a package.json file under it. This can be done with the below commands.

mkdir AwesomeProject
cd /AwesomeProject
npm init

This will ask you some details about the project. Give those details or you can skip also.

3.2. Create a View

Now create the file we wanted to be viewed when opening our app. Electron uses HTML to render the view and so we need to create an index.html file.

index.html

<html>
  <head>
    <title>Hello World Application</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

3.3. Create an index.js File

In package.json, we programmed that the root file of our project is index.js. So we need to create it. Some points about the structure of this index file are listed below.

Import the components we need in our project
Create a new browser window.
Define the view it wants to show on loading the window(index.html).

index.js

const { app, BrowserWindow } = require("electron");
const url = require("url");

function newApp() {
  win = new BrowserWindow();
  win.loadURL(
    url.format({
      pathname: "index.html",
      slashes: true
    })
  );
}

app.on("ready", newApp);

4. Running the Electron App

Now we can run our Electron app using the command below.

electron .

Have a nice code !