In today's web development landscape, there has never been so many frameworks and libraries to choose from. And while many of them have been engineered to be best suited for particular fields of web development, they all generally share the quality of being easier to work with and more intuitive than their predecessors. No framework exemplifies this more than ElectronJS. ElectronJS is a cross platform framework that is used to develop desktop applications with only javascript, css and html. In this article, we'll walk through how to build a barebones Electron desktop app step by step, and learn about some of the key features along the way.
To begin, we'll start by doing some set up in the terminal command line by making a directory mkdir <your_directory_name> and cd-ing into it with
cd <your_directory_name>. Next, we'll add a package.json by running npm init. At this point you will be prompted to fill in some options. Many of these are optional, but it is good practice to be as detailed about your projects as possible and there are some common conventions to consider. So, go ahead and give your app a name, description, set the entry point to main.js (an Electron convention), author it with your name, and when prompted is this OK? say yes, or simply type "y". Then, add the folder to your workspace so we can add some more contents. Next, we'll install Electron both globally and locally. To install globally, type npm install -g electron into the command line. To install locally, type npm install electron --save. Installing locally will place a node modules folder into your directory along with a package-lock.json file. Lastly, we'll create three files: index.html, main.js, and renderer.js.
Now that the initial workspace is complete, we'll move on to the code that we need in main.js. Take a look below, then read for an explanation of what it is doing.
main.js
const { app, BrowserWindow } = require('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();
win.on('closed', () => {
win = null;
});
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
}
The main.js file begins with us requiring a few modules that come with the Electron package. app contains functionality pertaining to our app and BrowserWindow is a class that creates an instance of a browser window that houses our application. path has some nice methods for handling filepaths and url will allow us to load our index.html file. We then declare win, a shorthand for window, that is assigned to a new browser window in the createWindow function which itself takes in an object of options for the window being created. We're only specifying width and height, but other options, such as images, can also be added here. Next, we load our url with win.loadURL which creates a path to our index.html file. win.webContents.openDevTools gives our applications its dev tools so we can inspect or debug the application just the same as if it were in a web browser. Our last window function sets win to null when the window is closed. Lastly, we have two app functions, one for calling createWindow when the app is opened and one that runs app.quit when all the windows are closed. That concludes the main.js file. Now we take a look at our index.html:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="<some_styling_template_url" />
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Your App Name</title>
</head>
<body>
<h1>My Desktop App</h1>
</body>
<script>
require('renderer.js');
</script>
</html>
The index.html file is mostly boiler plate, but Electron requires that we have a renderer.js file that runs when the window renders and also makes Node.js apis available in the process.
The final piece of the puzzle is a small change we need to make to our package.json file. By default, we'll have a test script that we won't need that we will replace with "start": "electron .". Now all you need to do to start your little desktop app is type npm start into the command line and explore the application!
Top comments (0)