How to Install and Set Up Electron on Windows 10

Electron WindowsLeave a Comment on How to Install and Set Up Electron on Windows 10

How to Install and Set Up Electron on Windows 10

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.

STEPS

1. INSTALL NODEJS

Electron requires to have Nodejs(A JavaScript runtime) installed on our system.

11.13.0 is the current latest version and it can be installed using the official website URL below.

https://nodejs.org

2. INSTALL ELECTRON GLOBALLY

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.

Now direct to the folder and make a package.json inside it.

mkdir AwesomeProject
cd /AwesomeProject
npm init

Enter the project details if you wish or skip.

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 OUR APPLICATION

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

electron .

Have a nice code !

Hi, I'm Syamlal, the co-founder of Redmonark. I'm a developer, writer and also have a little bit of experience in graphic designing.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back To Top