How to Create an App with Electron and Node.js

Electron combines Node.js, Chromium, and a large library of natively implemented APIs to allow developers to build powerful desktop applications.

In this tutorial, you'll learn how to create an Electron app, run it, and package it on Windows, Mac OS, and Linux environments. Let's get started!

Step 1: Install Node.js

Make sure you have the latest stable version of Node.js installed on your computer. If you don't have it, you can download it from their official website.

Step 2: Create A New Project

Open your terminal or command prompt and navigate to the directory where you'd like to create your Electron project, then run these commands:

mkdir my-app
cd my-app

my-app can be changed to any project name of your liking.

Step 3: Initialize the Node.js Project

In the project directory, initialize the new Node.js project by running the following command:

npm init -y

Step 4: Install Electron

To install Electron as a development dependency within Node.js, you'll need to run the following command:

npm install electron --save-dev

Step 5: Create the Main Script

Within your project directory, create a new file named main.js. This will be your main project file and is required to execute a desktop instance. Add this code to the file:

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

function createWindow() {
	const mainWindow = new BrowserWindow({
		width: 800,
		height: 600,
		webPreferences: {
			nodeIntegration: true
		}
	})
	
	mainWindow.loadFile("index.html")
}

app.whenReady().then(() => {
	createWindow();
	
	app.on("activate", function() {
		if (BrowserWindow.getAllWindows().length === 0) {
			createWindow()
		}
	})
})

app.on("window-all-closed", function() {
	if (process.platform !== "darwin") {
		app.quit()
	}
})

When the application fully launches, the createWindow() method creates a new desktop window with a size of 800x600 pixels, loading the index.html file that we'll create shortly with the mainWindow.loadFile() method.

The window-all-closed event listener shuts down the application when all windows are closed as long as the user is not using the Darwin platform.

Step 6: Create the HTML File

For the HTML file, create a file named index.html in your project's root directory, and add the following code to this file:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Electron Application</title>
	</head>
	<body>
		<h1>Hello There!</h1>
		<p>This is my first Electron application.</p>
	</body<>
</html>

Step 7: Update the `package.json` Configuration File

Open the package.json file in your project's root directory and add the following code snippet:

"scripts": {
	"start": "electron ."
}

Step 8: Start the Electron App

Now you're ready to run the Electron app as a desktop application! The following command prompt will execute the application for you:

npm start

If everything is set up correctly, a new desktop window should launch with your application!

Create Desktop App Executable Files

If you want to only generate the executable files for your Electron app, you can do so by installing Electron Packager with the following command:

npm install electron-packager --save-dev

Now, you can create executable files for your Electron app and package your application files.

Here is the command to create Windows executable files:

electron-packager . [my-app] --platform=win32 --icon=./build/icon.ico --overwrite

Here is the command to create Mac OS executable files:

electron-packager . [my-app] --platform=darwin --icon=./build/icon.icns

And here is the command to create Linux executable files:

electron-packager . [my-app] --platform=linux --icon=./build/icon.png

Remember my-app is the name of your Electron application, so make sure to change it accordingly before running the commands.

Also, note that you will receive an error message if the desktop application files already exist. You can add the optional --overwrite flag to overwrite any existing files with a fresh copy of the application.

Create a Desktop Icon for the Electron App

There are three different desktop icons you'll need to create, one for each operating system. Here are the formats and sizes required for each:

Windows: 256x256 pixels, .ico format. CloudConvert offers a free PNG to ICO conversion tool on their website.
Mac OS: 1024x1024 pixels, .icns format. Shiny Frog offers a free PNG to ICNS file converter tool called Image2Icon in the App store.
Linux: 512x512 pixels, .png format

Conclusion

That's it! You've successfully installed Electron and created your first desktop application! You can now build upon its foundation to create more complex desktop applications using Electron.

Created: July 10, 2023