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 !
Thank’s for info. Much appreciated.
good one i found on internet. thanks brother.
tried it and it does work, however, i have set Execution Policy to run the script;
also, why doesn’t the package.json of the Awesome project not need to know that electron is a dependency?
It works, but it is not converted to an “.exe” app