Simple Desktop Application Opening a Website Using Electron-js

Simple Desktop Application Opening a Website Using Electron-js

TLDR:

  1. Clone

    git clone https://github.com/nomadicsoft/electron-webview-quickstart.git

  2. Run npm install

     

  3. Change link in main.js:

    mainWindow.loadURL('https://nomadicsoft.io/')

  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 https://github.com/electron/electron-quick-start or https://github.com/nomadicsoft/electron-webview-quickstart 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.loadURL('https://nomadicsoft.io/')
  mainWindow.setMenu(null)  // Remove this line to have menu
  mainWindow.on('page-title-updated', (evt) => {
    evt.preventDefault();
  });
}
app.whenReady().then(() => {
  createWindow()
  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 https://www.electron.build/

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 application you have is fully functional except a few window functions: alert, confirm, prompt. So avoid those.

Code: https://github.com/nomadicsoft/electron-webview-quickstart

 

 

Latest publications

Extracting Relations to Traits in Laravel Models
Extracting Relations to Traits in Laravel Models

Hey maybe it’s just me, but maybe you also noticed that once the project becomes big, models tend to grow exponentionally. While this is not bad by itself, but up to 80% of the code is Laravel relations which eat up all the screen space and you have to constantly scroll through them to get […]

folder-tree Development
How to Find a Professional on Upwork for Your Application Development
How to Find a Professional on Upwork for Your Application Development

There are a lot of freelancers out there. So if you need to develop an app, or fix something or whatever, you will get dozens of proposals in a matter of hours. But don’t be fooled, it doesn’t mean that you have dozens of viable candidates really. Writing a good job posting is 90% of […]

folder-tree Management
Simple Ways to Listen to Events Across React.js Components
Simple Ways to Listen to Events Across React.js Components

without hooks, flux, thunk, redux and react-redux There comes a point in your life, when you JUST want to click a button in one component and JUST make something happen in another component of your application Maybe you don’t have much time and you don’t want to set up redux, with reducers, actions, actionTypes, constants […]

folder-tree Development
Remove  dynamic-content-widget elementskit_template and Other Elementskit Content From Google Index
Remove dynamic-content-widget elementskit_template and Other Elementskit Content From Google Index

WordPress is the best engine when it comes to blogs and a lot of other content-heavy applications. Almost all the developers hate it because it’s really hard to understand where a lot of stuff is coming from and how to handle it. This one I admit might be not useful for everyone, but took me […]

folder-tree Development
Ecommerce info block

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 to learn more

Contact Us

By sending this form I confirm that I have read and accept Nomadic soft Privacy Policy
×
Thanks!
Sent!
×
Error!