How to Create an App with Electron and Node.js
NodeJS 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
Add A Comment
More NodeJS
How to Create A WebSocket Server with Node.jsHow to Save Text to A File in Node.js
The Anatomy of a package.json File in Node.js
view all
Click here for details.
Comments
There are no comments yet. Start the conversation!