Electron Js + jQuery + Bootstrap - Dev to Build
Join the DZone community and get the full member experience.Join For Free
Whenever we need software, we go to a website and download a package, and after a couple of clicks, the software will be installed on your PC. As a web developer, you may not have experience in building a Desktop application.
In this article, we look into "how can we build a Desktop application with web technologies". If you Google the above-quoted text, the result will be Electron JS.
What Is Electron.js?
Here, you might be asking what is compiling our JS code we write. It combines the Chromium rendering engine and the Node. js runtime. So, to build an Electron application, we need basic knowledge of Node.js as a prerequisite. And I assume here that you are familiar with JS. I think, this fair enough for the introduction. Let's move on to the topic.
Electron Forge helps us to create the electron app in an easy way. To understand the basics, let's go in the traditional way.
Create a folder wherever you want in your pc. Open cmd, and run
npm init. Please enter the details of the project for the generated package.json. Now, all we need is Electron JS. Electron JS is a dev dependency, and it should be installed globally. Install it with the help of
npm install -g electron --only=dev. Once installed, the package.json should have Electron as a devDependency. (If not please add it manually.)
In Electron JS, there are two processes. One is the main process and the other is the renderer process. Let's check what docs say about Main and Renderer processes.
In Electron, the process that runs
main script is called the main process. The script that runs in the main process can display a GUI by creating web pages. An Electron app always has one main process, but never more.
Since Electron uses Chromium for displaying web pages, Chromium's multi-process architecture is also used. Each web page in Electron runs in its own process, which is called the renderer process.
To communicate between the main and renderer processes, Electron provides us the support called Inter-Process Communication.
ipcMain: It listens to the events from the renderer processes.
ipcRenderer: Communicates asynchronously from a renderer process to the main process.
I believe this is the right time to get our hands dirty. Create a main.js file in the project directory, and it should be mentioned in
package.json's main property. If it's not added in the process of
npm init, please add it manually.
If you notice the
win.loadURL(), we load index.js, which lies in the src folder. Let's create an src folder inside our app dir. Here, we create
index.html, index.js, and index.scss.
Before we create them, let's take a step back and look at what we need.
We need to create a UI with a form that gets the date from the User and submits. So, We need jQuery, bootstrap, and a data-picker (js-datepicker).
npm install --save bootstrap
npm install --save jquery
npm install --save js-datepicker
Create index.js, and require all the packages you need.
Now, create an index.html and load index.js into it.
In order to send the selected date to the main process, we have to require
ipcRenderer in main.js and index.js respectively.
To run the app, we need to add script configuration in our package.json. Please add this in your package json.
That's all. It's time to run our application. Open your cmd and cd to project dir. Then, run
npm run start. Now, we have our standalone app running.
How to Build as an .exe File
In order to build the app we created, we need to add another dev dependency called electron builder and script configurations. Run
npm install electron-builder --only=dev and change your package.json's script:
Also, we need to write the build configuration in package.json:
I have kept the icon in
scr/icon/. To check the build configurations of other OSs, please check the docs here.
npm run dist. In a couple of minutes, you should be having your software ready in the dist folder.
That's all. We have the software ready to install. Happy coding. For complete code implementation, please visit my git repo.
Opinions expressed by DZone contributors are their own.