Cross Platform HTML5 Desktop GUI Using Tauri

On 5 minutes, 33 seconds read By Edward

Build GUI For Desktop Applications Using Node.js And Tauri

Tauri is build using Rust. Rust is a programming language and Tauri is a JavaScript front-end lightweight GUI framework.

Tauri comes with the cross-platform application window creation library TAO and Webview rendering library WRY. Tauri v2 includes mobile iOS and Android support.

Combine HTML5 code with Tauri software framework to create a GUI desktop application. Tauri requires basic understanding of JavaScript, HTML and CSS.

HTML5 GUI Window For Desktop Application

Tauri Requirements

Platform Requirements For Tauri
Name Description Version
Windows Desktop operating system 7+
macOS Desktop operating system 10.15+
Linux Desktop operating system webkit2gtk 4.0+
iOS Mobile operating system 9+
Android Mobile operating system 7+
Name Description Version

Tauri Node.js Snippet

npm create tauri-app@latest
cd tauri-app
npm install
npm run tauri dev

HTML Code Snippet

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<link rel="stylesheet" href="styles.css" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Tauri Name App</title>
		<script type="module" src="/main.js" defer></script>
	</head>
	<body>
		<div class="container">
			<h1>HTML5 Desktop App</h1>
			<form class="row" id="name-age-form">
				<input class="name-input" type="text" placeholder="Please enter your name" required />
				<input class="age-input" type="number" placeholder="Please enter your age" required />
				<button type="submit">Check</button>
			</form>
			<p id="output-msg">Output</p>
		</div>
	</body>
</html>

JavaScript Code Snippet

const { invoke } = window.__TAURI__.tauri;

let nameInputEl;
let ageInputEl;
let outputMsgEl;

async function nameage() {
  outputMsgEl.textContent = await invoke("nameage", { name: nameInputEl.value, age: Number(ageInputEl.value) });
}

window.addEventListener("DOMContentLoaded", () => {
  nameInputEl = document.querySelector(".name-input");
  ageInputEl = document.querySelector(".age-input");
  outputMsgEl = document.querySelector("#output-msg");
  document.querySelector("#name-age-form").addEventListener("submit", (e) => {
    e.preventDefault();
    nameage();
  });
});

Rust Code Snippet

// Prevents additional console window on Windows in release, DO NOT REMOVE!!
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
#[tauri::command]
fn nameage(name: &str, age: i32) -> String {
    format!("Hello, {0}, I see that you are {1} years old", name, age)
}

fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![nameage])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

Tauri Sample HTML5 Code
Netbeans IDE Displaying Tauri HTML5 Code

Tauri CLI Commands
Terminal Tauri Commands For HTML5 Application

Tauri HTML5 Application
Running Completed Tauri HTML5 Desktop Application


Usage

You can use any IDE or text editor and the command line to generate an application using Tauri. In this tutorial, HTML5 was used to create a desktop application for Linux.

Open Source

Tauri is is licensed under the permissive MIT License and the permissive Apache License version 2.0. This allows commercial use, modification, distribution, and allows making private derivatives. The MIT License was drafted before software patents were recognized under US Law. The Apache License includes an explicit contributor’s patent license.

Learn Programming Courses:

Courses are optimized for your web browser on any device.

OjamboShop.com Learning Python Course
OjamboShop.com Learning Python Interactive Online Course

OjamboShop.com Learning PHP Course
OjamboShop.com Learning PHP Interactive Online Course

Limited Time Offer:

OjamboShop.com is offering 20% off coupon code SCHOOL for Learning Python Course or for Learning PHP Course until End Day 2024.

Conclusion:

Python makes it easy to create a GUI for command line services or code. Command line ouput is controlled by the subprocess module and the GUI is generated using Tkinter.

Take this opportunity to learn the Python or PHP programming language by making a one-time purchase at Learning Python Course or Learning PHP Course. A web browser is the only thing needed to learn Python or PHP in 2024 at your leisure. All the developer tools are provided right in your web browser.

References: