Today we tolk about Electron, that is a fantastic framework that allows you to create desktop applications with Javascript, HTML and CSS. You can use Typescript and other framewrok like Angular, React or Vue.js. You can create a single dasktop applications for Windows, Mac and Linux, that's crazy.
The library, made available, allows you to interface with the entire operating system.
Short History
Electron was born in 2013 for building Atom.io, one year later it became open source. In 2016 Electron 1.0 was release and then Electron grew.
Today, there are too many application that use Electron
Visual Studio
Slack
Fiddler
Discrod
Twitch
And that is a small part of apps written in Electron, if you want to find out other app go to Electron App.
Create our first basic Electron app
Before proceeding we need to install Node.js, than we need create folder for our project and install Electron, open powershell and type:
mkdir base-electron-app
cd base-electron-app
npm init -y
npm i --save-dev electronNow we are in this situation
After that we must create main.js. Main.js is the entry point of our application. The script in this file controls the lifecycle of the application, create app's window and performs native operating system interactions.
const { app, BrowserWindow } = require('electron')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
win.loadFile('index.html')
}
app.whenReady().then(createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})CreateWindow is the function to create the main window. This Function is called when the app is Ready.
Then we create two listener:
- First for quit the application when it no longer has any open windows;
- Second for creates a new browser window when the application have no visible windows.
How we saw in the last line of createWindow, we try to load index.html in our window, let's create index.html.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Publish0x!</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
<h1>Hello Publish0x!</h1>
<p style="font-size: 18px;">
We have create our first Electon app!
Electron <script>document.write(process.versions.electron)</script>
</p>
</body>
</html>Now we only do a small changes in package.json
- Change property "main" in "main.js";
- Add "start": "electron ." in "scripts" section.
{
"name": "base-electron-app",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "electron .",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^11.1.1"
}
}
Thats all, our app is ready to start, open our powershell and type
npm startThis is the result
Do you like Electron? Do you also want to see other electron features, such as changing the page header or opening new windows or interacting with filesystems?
Let me know
If you like this post, follow me on Twitter Denis
