Getting started
Learn how to make desktop applications out of the very same technologies used in web development.
Make a basic cross platform desktop application
Before creating the main.js and index.html files, we need to discuss the two process types available in Electron. They are fundamentally different and important to understand. Each of these two processes has a specific responsibility within the application.
index.html to make GUI simply with HTML
We already learned that the renderer processes would display the UI of your application. It will load content and execute it within its own thread. Now we'll create our renderer index.html file inside the same directory where the package.json resides.
Using remote module in renderer process
The remote module provides access to modules normally available only to the main process. By importing this module in our renderer process file, we can in turn access the main process’s modules within the Render process.
IPC (inter-process communication) between main and renderer
To communicate between main and renderer process we need a system and that system is in the IPC modules (ipcMain and ipcRenderer). These module allows us to send and receive messages between the processes.
dialog - Display native dialog box to select files or directories
In this tutorial we'll discuss the showOpenDialog method to open files and directories. This method displays a dialog box that enable us to select files or directories and returns their absolute paths.
dialog - Display save file dialog box
Saving files with Electron is similar to opening files. The showSaveDialog, displays save dialog box, asks where the user wants to save the file and what name they want to give it.
dialog - Display customizable confirmation message box
Electron’s showMessageBox() is a customizable dialog box. You can use it for displaying an info, error, a warning or a question by providing a list of button and a checkbox to receive the user input.
Making Duplicate File Finder Application
Getting Started with Duplicate File Finder Application
We’ll create index.html file for our "Duplicate File Finder" app and style it witch css. It is a very simple interface, just a logo on top with Application name, version number and two button Add folder and Start.
JavaScript - Create app options module with Object.freeze() method
JavaScript doesn't support ENUM data type. We can use the freeze() method to create ENUM like object. In this tutorial we’ll make a module to define some app settings for our Duplicate File Finder app to help child and parent processes when they communicate with each other.
User Interface for Duplicate File Finder app
In this tutorial we'll create renderer.js file (require by index.html). When a user clicks on Add folder button, it shows a directory picker to select a directory path for scanning and stores the received path as an object by adding some extra information, such as type included or excluded, to an array. The renderer.js file also interact with its child (walkerHelper.js) using Node IPC.
Spawn a child process to run FileWalker
In this tutorial we’ll spawn a new child process walkerHelper.js using fork method to establish communication between UI (renderer.js) and FileWalker (walker.js) to start, stop, pause and resume the walker and to send results back to UI.
WebView to display results
Electron’s webview tag is based on Chromium’s webview, which is simply a custom element using shadow DOM to wrap an iframe element inside it. Unlike an iframe, the webview runs in a separate process than your app.
Re-create the Duplicate File Finder GUI
In this tutorial we’ll re-create renderer.js file. The renderer.js file controls the whole application, it receives the inputs from the users, send commands to walkerHelper.js to start, pause or reset the walker.js, display the results on webview (grid.html) and update the app’s status bar (index.html).