Do you know which framework are programmed with many of the best desktop app today? Applications such as the Atom code editor, the famous messaging app Slack, the Microsoft Visual Studio IDE. Well, all these great apps are coded using this great framework.
Electron uses Chromium and Node.js so you can create an app with HTML, CSS and JAVASCRIPT just like a web page. It's also OPEN SOURCE so you can find the code in github and see the great community behind this great project. In addition to this as it says in the title of this entry is CROSS-PLATFORM ie you can export your project to any operating systems such as Windows, Mac or Linux.
Electron facilitates many of the great difficulties when programming a Desktop Application, such as:
- Automatic Updates
- Native menus
- Reports when the app does not respond
- Debugging
- Installer for Windows
If you can build a Website, you can build an App.
- electron team. -
Let's create a simple app, I'll show the steps and at the end of this post I'll post a video that we uploaded to our YouTube channel (do not forget to subscribe)
Show me the code!
Let's create a simple App that shows the famous "Hello World" inside a window and open a secondary window exporting functions inside the main electron process.
Well the first thing you have to do is have the packages npm installed on your operating system these come when you install node.js, you can download and install it from your official website here
Then inside your console, place yourself in a folder of your choice to create the electron project and execute the following command:
npm initNext step is install electron within our folder:
npm install electronAt the end of the command job, the framework will be downloaded into your folder node_module
The next step is to add our main file main.js inside the root of our folder and add the following code:
const electron = require('electron')
const {app, BrowserWindow} = electron
const path = require('path')
const url = require('url')
let win
function createWindow(){
win = new BrowserWindow ({width: 800, height:600})
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file',
slashes: true
}))
win.webContents.openDevTools()
}
exports.openWindow = () => {
let newWin = new BrowserWindow ({width: 400, height:200})
newWin.loadURL(url.format({
pathname: path.join(__dirname, 'enupal.html'),
protocol: 'file',
slashes: true
}))
}
app.on('ready', createWindow)As you can see in our file main.js will run the main process of our application here we can run the life cycle of our application. We create our variable electron which contains our object of our framework. And we also create a BrowserWindow object to add the different screens of our application. BrowserWindow will at the end be a window like the one in our Chrome browser. We add a function createWindow() to add the window to our application when it is listed with app.on ('ready', createWindow) and finally we have exported a function so that it can be called from the front end that will open a secondary window to our app after pressing a button.
The next thing we have to do is add the html files that we have uploaded to our BrowserWindow in this case index.html and enupal.html this last one will be our secondary window.
The code for index.html is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Electron</title>
</head>
<body>
<h1> Hello world</h1>
<script> require('./index.js') </script>
</body>
</html>As you can see in our main window, we show the famous "Hello World" and add a javascript file that will call the function we have exported from our main process and open our secondary window
The code in the index.js file is as follows:
const remote = require('electron').remote
const main = remote.require('./main.js')
let button = document.createElement('button')
button.textContent = "Open Window"
document.body.appendChild(button)
button.addEventListener('click', () => {
main.openWindow()
})
Simply call electron remote to add the function that we have exported and can invoke it by clicking on our button on the main screen.
The code for our secondary window enupal.html is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Enupal</title>
</head>
<body>
<h2>Hello world from ENUPAL</h2>
</body>
</html>That would be all! easy eh? to run and test our first application only need to add the command start to run our main file main.js this we do inside our file package.json will look like this:
{
"name": "enupal-electron",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start" : "electron main.js"
},
"author": "",
"license": "ISC"
}
Finally to execute our application electron we simply execute in our console the following command:
npm startThat's it! if you have any doubts, please chech our video tutorial that we have created for this application in our youtube channel. See you soon!
Updates
If you are following the tutorial of our youtube channel, you can get the most recent version of the code in our github page cheers!
