How to Build GUI Application with ElectronJS & JavaScript

In this lesson we want to learn How to Build GUI Application with ElectronJS & JavaScript, Building GUI application with ElectronJS and JavaScript is fairly straightforward process. Here is an example of how to build a simple application with ElectronJS and JavaScript:

  1. Start by installing ElectronJS by running npm install electron in your command line.
  2. Create new folder for your project and navigate to it in the command line.
  3. Create package.json file in your project directory by running npm init. This file will store information about your project such as the dependencies it needs.
  4. Create new file called main.js in your project directory. this file will contain the main JavaScript code for your application.
  5. In your main.js file, import the electron module and create new BrowserWindow object. This will create new window for your application.

 

 

 

  1. In the same file, load an HTML file as the content for your window using loadFile method on BrowserWindow object.

 

  1. Create an index.html file in your project directory. this file will contain the HTML markup for your application.
  2. In the index.html  file create the layout and design of your application using HTML, CSS and JavaScript.
  3. To run the application, in the command line run npm start

This is basic example of how to build a GUI application with ElectronJS and JavaScript. You can add more functionality and features to your application as needed.

 

This is index.html

 

 

This is style.css

 

 

This design includes basic container div that centers the content on the page and sets width of 50%. It also includes heading and a submit button. the CSS styles the container with text align center, and the submit button with a green background color, white text color, and a hover effect.

You can modify this design or add more elements as you need, to create the desired UI for your application.

 

 

Run the code using npm start and this will be the result.

 How to Build GUI Application with ElectronJS & JavaScript
How to Build GUI Application with ElectronJS & JavaScript

 

 

You can see that we have default menubar, you can remove that and add your own, to remove the default menu bar and add your own in a GUI application built with ElectronJS and JavaScript, you can use Menu module from the electron package.

 

You can first import the Menu module by using the following line of code:

 

 

Then, you can create your own custom menu template using an array of objects that describe the menu items and their properties. for example:

 

 

Then you can create new Menu object using the Menu.buildFromTemplate(menuTemplate) method, and set it as the application’s menu by using the Menu.setApplicationMenu(menu) method.

This way you can customize the menu bar with own menu items and functionality.

 

It’s worth noting that, you might also need to disable the default menu bar on the main window of your application. You can do this by setting the frame: false option when creating the BrowserWindow object.

 

 

 

Also Learn More on Python

Leave a Comment