Home »
Electron JS
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.
Thanks for coding with me!