How to open a remote URL in an Electron JS Application (Project)?

Electron JS Application (Project): In this tutorial, we are going to develop a small Electron JS Application that does nothing much but simply loads a remote URL like a browser.
Submitted by Godwill Tetah, on June 15, 2020

It is a very simple task, so let's get straight to the point;

  • Firstly, we will create a new browser window specifying height and width of 600 and 800 respectively.
  • We will add a few menu items and add one submenu which will be seen below.
  • Finally, we will then add a URL or return the URL passed into win.loadURL.

Open your main JavaScript file and type the following:

The code has comments for better explanation,

const electron = require ('electron')

const app = // electron module
const BrowserWindow = electron.BrowserWindow //enables UI
const Menu = electron.Menu // menu module

let win

app.on('ready', _ => {
    win = new BrowserWindow({
    width: 800,
    height: 600,
    const template = [
            label: 'Help',
            submenu: [{ // adds submenu
                    label: `About US`,
                }, {
                    type: 'separator' // horizontal line between submenu items
                    label: 'Quit',
                    role: 'quit' // closes app when clicked  

            label: 'Refresh', // Refreshes or reloads the page when clicked
            role: 'reload'
            label: 'ZoomIn', // zooms the page when clicked
            role : 'ZoomIn'
    const menu = Menu.buildFromTemplate (template) // sets the menu
    Menu.setApplicationMenu (menu)

    win.loadURL('')    // loads this URL

Finally, run the code and enjoy the output.

Open a remote URL in an Electron JS (1)

Open a remote URL in an Electron JS (2)

Thanks for coding with me!

Comments and Discussions!

Load comments ↻

Copyright © 2024 All rights reserved.