Create graphical applications for Desktop!
Electron (formerly known as Atom Shell) is a free and open-source software framework developed and maintained by the OpenJS Foundation.
The framework is designed to create desktop applications using web technologies (primarily HTML, CSS and JavaScript, although other technologies such as front-end frameworks and WebAssembly are possible) that are rendered using a version of the Chromium browser engine and a back-end using the Node.js runtime environment.
It also uses several APIs to enable functionality such as native integration with Node.js services and an inter-process communication module.
Electron was originally built for Atom and is the main GUI framework behind several open source projects, including Atom, GitHub Desktop, Light Table, Visual Studio Code, WordPress Desktop and Eclipse Theia.
Dependencies
Download directly using your operating system's package manager.
Example of installing dependencies on Ubuntu:
sudo apt install nodejs npm
Creating a basic Window
Let's create the most basic example possible!
- Create a folder and enter it:
mkdir myapp
cd myapp
- Create a file named: package.json:
And insert the content below:
{ "name": "My First Electron Project",
"version": "1.0.0",
"description": "A basic usage example!",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"author":
"license": "GNU GPLv3"
This step can be replaced with the command: npm init with edits as you wish!
- Install Electron to be added to your project: npm install --save-dev electron
Note that your package.json has been changed and Electron support added!
- Create a file named: index.html
And insert the content below into the file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>My First Project with Electron</title>
</head>
<body>
<h1>My First Project with Electron</h1>
<h2>We are using the technologies (and versions):</h2>
<ul>
<li>Node.js: <span id="node-version"></span></li>
<li>Chromium: <span id="chrome-version"></span></li>
<li>Electron: <span id="electron-version"></span></li>
</ul>
</body>
</html>
- Create a file named: main.js
And insert the content below into the file:
const { app, BrowserWindow } = require('electron')
const path = require('node:path')
function createWindow () {
const win = new BrowserWindow({
width: 1280,
height: 720,
autoHideMenuBar: true, // Esconde a Barra de Menu: File, ...
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
- Create the preload.js file
And insert the content below into the file:
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const type of ['chrome', 'node', 'electron']) {
replaceText(
${type}-version, process.versions[type])
}
})- Now just run the project
When you open the window you can even access the console with: Ctrl + Shift + i.
npm start
That was a short tutorial, and I apologize for any formatting errors.