Electron and Tauri app setup

I wanted to try Electron and Tauri for Desktop application development. A lot has been written about the advantages and disadvantages of each, so I'll skip those details. The following steps were used to quickly set up an application and access a website.

Electron

Electron is a framework for building desktop applications using JavaScript, HTML, and CSS. By embedding Chromium and Node.js into its binary, Electron allows you to maintain one JavaScript codebase and create cross-platform apps that work on Windows, macOS, and Linux — no native development experience required. -- Electron

Electron App Steps

Prerequisites

Per Electron Prerequisites:

To use Electron, you need to install Node.js. We recommend that you use the latest LTS version available.

Setup App Code

git clone git@github.com:electron/electron-quick-start-typescript.git

Update Create Window

const WINDOW_HEIGHT = 800;
const WINDOW_WIDTH = 800;
const APP_URL = process.env.APP_URL || 'https://google.com';

function createWindow() {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    height: WINDOW_HEIGHT,
    width: WINDOW_WIDTH,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  });

  const view = new BrowserView();
  mainWindow.setBrowserView(view);

  view.setBounds({ x: 0, y: 0, height: WINDOW_HEIGHT, width: WINDOW_WIDTH });
  view.webContents.loadURL(APP_URL);
}

Run Dev

npm start

Package App

npm install --save-dev @electron-forge/cli

npx electron-forge import

npm run make

Use App Package

Check for app in ./out/make directory. The bundle size on macOS is 213.1 MB. The app size is larger than Tauri considering Electron's use of Chromium and Node.js. I didn't investigate options for reducing the size.

Tauri

Tauri is an app construction toolkit that lets you build software for all major desktop operating systems using web technologies. -- Tauri

Tauri leverages the OS's native rendering engine (WebKit on macOS, WebView2 on Windows and WebKitGTK on Linux). -- Tauri

Tauri App Steps

Prerequisites

Per Tauri Prerequisites, frontend UI and Rust is required for development:

The first step is to install Rust and system dependencies. Keep in mind that this setup is only needed for developing Tauri apps. Your end-users are not required to do any of this.

Setup App Code

npm create tauri-app@latest

Ok to proceed? (y) y
✔ Project name · tauri-app
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, bun)
✔ Choose your package manager · npm
✔ Choose your UI template · Vanilla
✔ Choose your UI flavor · TypeScript

Template created!

Update Create Window

use tauri::Manager;

fn main() {
    tauri::Builder::default()
    .setup(|app| {
        let window = app.get_window("main").unwrap();
        window.eval("window.location.replace('https://google.com')");
        Ok(())
    })
    .run(tauri::generate_context!())
    .expect("error running tauri app");
}

Configure

Update the Tauri bundle identifier (tauri > bundle > identifier) in src-tauri/tauri.conf.json

npm run tauri build

Use App Package

Check for app in src-tauri/target/. The bundle size on macOS is 6.8 MB, making it better suited for resource-constrained environments.