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.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('https://www.go237.com')    // 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

Ad: Are you a blogger? Join our Blogging forum.





Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates


© https://www.includehelp.com some rights reserved.