Simple Desktop Application Opening a Website Using Electron-js

Simple Desktop Application Opening a Website Using Electron-js
Gregory Shein
Simple Desktop Application Opening a Website Using Electron-js

This is a short article on how to make electron app from website. Electron io is a library capable of turning electron js to cross platform desktop applications.


  1. Clone

    git clone

  2. Run npm install


  3. Change link in main.js:


  4. Run npm pack


  5. Resulting .exe and .msi will be in the dist folder


Fastest way to have a meaningful desktop app which actually does something is to use electron js and just open a website inside a webview:

electron webview app

All in all it’s a pretty simple and straightforward task, just a few notes along the way.

You can start by cloning or which is essentially the same thing but already prepared to run an external url in a resulting window instead of the js app you would compile yourself.

So you can get the following code:

const {app, BrowserWindow} = require('electron')
const path = require('path')
function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 1024,
    height: 768,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    title: 'Nomadic Soft'
  mainWindow.setMenu(null)  // Remove this line to have menu
  mainWindow.on('page-title-updated', (evt) => {
app.whenReady().then(() => {
  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()

I removed a default menu, because it doesn’t really make sense:

By default, electron would generate quite a bunch of unneeded stuff in the dist folder which is required for your app to run, which is not really nice and shareable.

Luckliy there are two packages to compile your app into a single file electron-builder and electron-packager. I liked the first one more, it has better documentation, more options and easier to work with

So you just fire: npm run pack and you’re good. (assuming you have windows for other platforms you would need to change command signature in package.json)

The electron app you have is fully functional except a few window functions: alert, confirm, prompt. So avoid those.


This article shows you how to create a minimal electron app. At the same time electron framework is capable for creating complex cross platform desktop apps

Ecommerce info block
Contact us to learn more

Hire a eCommerce Web or App Developer

Custom eCommerce development starts with your needs. No matter what size your business is, crafting killer websites or robust applications with Nomadic Soft is a winning strategy. Our development team will always use the latest tech tools to build your business interactive and engaging web interfaces and applications.

Contact Us

By sending this form I confirm that I have read and accept Nomadic soft Privacy Policy