DEV Community: Rain9

react

Rain9 — Wed, 11 Mar 2026 13:48:50 +0000

AI

Rain9 — Sun, 01 Mar 2026 13:18:12 +0000

Building a Hugo + Tailwind technical blog from scratch: Taking INFINI Labs Blog as an example

Rain9 — Sat, 20 Dec 2025 06:40:40 +0000

Project Overview

This blog is a typical static-site blog project: content is written in Markdown, then Hugo (a Go-based static site generator) renders it into HTML during the build phase, and TailwindCSS + PostCSS bundle the final CSS during the build phase as well. After deployment, there is no backend required—any static hosting (GitHub Pages / Netlify / Vercel / S3+CDN) can serve it.

Two key aspects of this project are especially worth noting:

It uses Hugo Modules to reuse theme capabilities (such as image processing, PWA, SEO, and UI components), so CI must install Go (to fetch/manage module dependencies).
The homepage additionally generates a search index index.json, and the pages inject a prebuilt search UI (/static/assets/*), enabling offline/local search in the browser.

The rest of this article explains both “how to set it up” and “how it works” in detail.

1. Directory Structure: Where Do Content, Theme, Config, and Assets Live?

You can think of this repository as four layers:

1) Content Layer: `content/`

content/english/posts/: blog posts (Markdown + front matter)
content/english/authors/: author pages (Markdown + front matter)

Each post starts with front matter (YAML/TOML/JSON are all supported; this repo uses YAML). Typical fields include:

title / description: used for page title and SEO
date: publish time (affects ordering and display)
categories / tags: used for category and tag pages
image: cover image
author: author name (linked to the corresponding author page)

Templates read these fields. For example, themes/hugoplate/layouts/posts/single.html displays the cover image, author, categories, publish date, the main content, and the table of contents (TOC).

2) Configuration Layer: `hugo.toml` + `config/_default/*`

Hugo supports splitting configuration under the config/ directory. This project uses:

Root config: hugo.toml
- theme = "hugoplate"
- outputs.home includes JSON to generate public/index.json
- build.buildStats.enable = true for accurate Tailwind scanning (explained later)
Language config: config/_default/languages.toml
- English language with contentDir = "content/english"
Site parameters: config/_default/params.toml
- logo / favicon, theme colors, announcement bar, cookie banner, sidebar widgets, etc.
Hugo Modules: config/_default/module.toml
- Imports modules like github.com/gethugothemes/hugo-modules/images, pwa, seo-tools, etc. (this is where the Go dependency comes from)

3) Theme Layer: `themes/hugoplate/`

The theme defines the page structure and Hugo Pipes:

themes/hugoplate/layouts/_default/baseof.html: base layout skeleton
themes/hugoplate/layouts/index.html: homepage list
themes/hugoplate/layouts/posts/single.html: post detail page
themes/hugoplate/layouts/index.json: template that generates the JSON search index (important)

Note: you’ll see {{ partial "image" ... }} in templates, but there is no partials/image.html inside the theme directory. That partial comes from Hugo Modules (the hugo-modules/images module imported in config/_default/module.toml). This is a common pattern: “theme + modular capabilities.”

4) Asset Layer: `assets/` vs `static/`

These two directories behave differently in Hugo:

assets/: resources processed by Hugo Pipes (compile, fingerprint, minify, etc.)
- Images live under assets/images/... and are emitted to public/images/... during build
- Styles/scripts source files also live under themes/hugoplate/assets/* and are bundled via Hugo Pipes
static/: copied to public/ as-is
- This project includes static/assets/index-*.css/js and pizza_wasm_bg-*.wasm
- baseof.html hardcodes imports for /assets/index-*.css and /assets/index-*.js

2. Build Pipeline: What Happens From Markdown to Final HTML/CSS/JS?

1) Build entry points: `package.json` scripts

The key scripts are:

dev: hugo server
build: hugo --gc --minify --templateMetrics --templateMetricsHints --forceSyncStatic

So Hugo drives the whole build. Node is mainly here for PostCSS/Tailwind.

Also, CI/hosting often runs this before build:

project-setup: node ./scripts/projectSetup.js

This script comes from the Hugoplate template project and is used to “move” the exampleSite/ layout into the real project layout. Since this repository already has a themes/ directory, the script typically prints Project already setup (i.e., it does nothing and is safe to keep in CI).

2) Hugo Modules: Why does CI install Go?

Because config/_default/module.toml uses Hugo Modules, such as:

github.com/gethugothemes/hugo-modules/images
github.com/gethugothemes/hugo-modules/pwa
github.com/gethugothemes/hugo-modules/seo-tools/basic-seo
github.com/hugomods/mermaid
etc.

These modules are fetched during build and participate in rendering. The repo’s go.mod locks module versions (you can treat it as the dependency manifest for Hugo Modules).

So the division of responsibilities is:

Hugo renders the site
Go pulls and manages Hugo Module dependencies

That’s why CI installs both Hugo and Go (see netlify.toml and .github/workflows/hugo.yml).

3) How does Tailwind generate only the CSS you actually use?

Two configs are key:

hugo.toml enables build stats: [build.buildStats] enable = true
tailwind.config.js uses: content: ["./hugo_stats.json"]

Hugo emits hugo_stats.json while rendering templates, recording the classes/tokens used by the generated HTML. Tailwind reads this file and can very accurately generate only the required utility classes, avoiding scanning the entire template/content tree (which can lead to false positives and a much larger CSS bundle).

In addition, hugo.toml includes a module mount:

Mounts hugo_stats.json into assets/watching/hugo_stats.json
Combined with cache-busting config so CSS rebuilds trigger correctly

This is a well-established integration approach in Hugoplate-based setups.

4) How are CSS/JS bundled, minified, and fingerprinted?

In themes/hugoplate/layouts/partials/essentials/style.html, you can see the Hugo Pipes flow:

Collect plugin CSS (from hugo.toml params.plugins.css)
Compile scss/main.scss (requires Hugo extended)
resources.Concat to merge
css.PostCSS to run PostCSS (Tailwind + autoprefixer)
In production: minify | fingerprint | resources.PostProcess
Output <link href="...style.<hash>.css" integrity="...">

JS is handled similarly in themes/hugoplate/layouts/partials/essentials/script.html.

This also explains two important runtime facts:

After deployment, the site is pure static files (HTML/CSS/JS/images), with no runtime compilation.
Fingerprinting stabilizes caching: when content changes, the asset URL changes, so browsers/CDNs won’t serve stale assets.

3. Search: How Do `index.json` and `/static/assets/*` Work Together?

1) Where does the index come from?

hugo.toml sets outputs.home = ["HTML", "RSS", "WebAppManifest", "JSON"] and configures JSON output with baseName = "index". So the build generates:

public/index.json

The template that creates it is:

themes/hugoplate/layouts/index.json

It iterates over site pages and packs fields such as title, URL, tags, category, description, and the plain-text content into a JSON array.

This is a great data source for client-side search, especially on static sites.

2) Where does the search UI come from?

themes/hugoplate/layouts/_default/baseof.html hardcodes:

<link rel="stylesheet" href="/assets/index-*.css">
<script type="module" src="/assets/index-*.js"></script>

These files live in static/assets/ and are copied to public/assets/ by Hugo, so browsers can request them directly after deployment.

At runtime (when users open the site):

The browser loads the static page
It loads the search UI JS/CSS
The search UI fetches index.json (and potentially WASM assets) and builds an index in the browser
Searches run locally in the browser—no backend API required

This is a common approach to “enhance” static sites: generate data at build time, consume it with front-end code at runtime.

4. Building a Similar Project From Scratch (Minimum Viable Steps)

Here is a practical checklist if you want to replicate this repository’s approach.

1) Prepare the toolchain

Hugo extended (this project requires >= 0.139.2, see config/_default/module.toml)
Go (CI uses 1.23.3 for Hugo Modules)
Node (for PostCSS/Tailwind; CI uses Node 20, but a common LTS should work locally)

2) Install dependencies and start development

This repo declares pnpm, but the scripts are compatible with npm/yarn as well.

pnpm install
pnpm dev
# or: npm install && npm run dev

This starts the Hugo dev server.

3) Add a new post

Create a Markdown file under content/english/posts/YYYY/, for example:

---
title: "My First Post"
description: "A short summary"
date: "2025-12-20T09:00:00+08:00"
categories: ["Engineering"]
tags: ["Hugo"]
image: "/images/posts/2025/some-folder/cover.jpg"
author: "Rain9"
lang: "en"
category: "Technology"
subcategory: "Engineering"
draft: true
---

# Hello

Write something here.

It’s recommended to put images under assets/images/posts/... and reference them as /images/posts/.... After building, they will be emitted under public/images/posts/....

4) Build for production

pnpm build

The output directory is public/ (see netlify.toml: publish = "public").

5. Deployment & CI/CD: How Netlify / GitHub Pages / Vercel Build It

This repository supports multiple hosting platforms:

1) Netlify

netlify.toml:

build command: yarn project-setup; yarn build
publish: public
env: HUGO_VERSION=0.139.2, GO_VERSION=1.23.3

2) GitHub Pages (GitHub Actions)

.github/workflows/hugo.yml does:

checkout
install Node
download Hugo extended
install Go
npm run project-setup
npm install
npm run build
upload public as Pages artifact and deploy

3) Vercel

vercel-build.sh runs on the build machine:

install Go
install Hugo extended
npm run project-setup
npm install
npm run build

All platforms do the same thing in the end: provision the build toolchain (Hugo + Go + Node) and produce public/.

Wrap-up: The Boundary Between Build-Time and Run-Time

The core idea of a Hugo-based blog is simple:

Build-time: Hugo compiles content, templates, modules, and assets into static files (and also performs minification, fingerprinting, and index generation).
Run-time: the CDN/static server only serves files; the browser runs a small amount of front-end JS (like the search UI). No backend API is required.

Once you understand this boundary, it becomes natural to extend the site: when adding new features, first ask “can we generate the data at build time?” and then “can the browser consume it at run time?”

Rain9 — Tue, 15 Jul 2025 00:00:53 +0000

useEffect

Rain9 — Fri, 14 Mar 2025 00:48:54 +0000

Tauri (9) - Implementing automatic startup of desktop applications

Rain9 — Mon, 27 Jan 2025 07:43:10 +0000

Introduction

In many desktop applications, implementing the "launch at startup" feature is a common requirement, especially when the app needs to automatically start and stay running as soon as the operating system boots. This article will introduce how to implement the startup launch feature for desktop applications using Tauri.

Implementation Principle

Tauri provides the tauri-plugin-autostart plugin, allowing developers to easily configure applications to launch at startup. This plugin supports multiple operating systems (Windows, macOS, Linux) and provides simple APIs to manage the auto-start functionality.

Installing the Plugin

Install the Plugin: To enable the startup launch feature, you need to install the tauri-plugin-autostart plugin in your Tauri project.

Open the terminal in the project root directory and run the following command:
```
cargo tauri plugin add tauri-plugin-autostart
```

Configure Permissions: After installing the plugin, update the configuration in the src-tauri/capabilities/default.json file.

Add the following to the permissions section in the src-tauri/capabilities/default.json file:

{
  "$schema": "../gen/schemas/desktop-schema.json",
  "identifier": "default",
  "description": "Capability for the main window",
  "windows": ["main", "chat", "settings"],
  "permissions": [
    "autostart:allow-enable",
    "autostart:allow-disable",
    "autostart:allow-is-enabled"
  ]
}

Rust Code Implementation

Implement the core functionality in src-tauri/src/autostart.rs:

use std::{fs::create_dir, io::Read};
use tauri::{Manager, Runtime};
use tauri_plugin_autostart::ManagerExt;

pub fn enable_autostart(app: &mut tauri::App) {
    use tauri_plugin_autostart::MacosLauncher;

    app.handle()
        .plugin(tauri_plugin_autostart::init(
            MacosLauncher::AppleScript,
            None,
        ))
        .unwrap();

    let autostart_manager = app.autolaunch();

    match (
        autostart_manager.is_enabled(),
        current_autostart(app.app_handle()),
    ) {
        (Ok(false), Ok(true)) => match autostart_manager.enable() {
            Ok(_) => println!("Autostart enabled successfully."),
            Err(err) => eprintln!("Failed to enable autostart: {}", err),
        },
        (Ok(true), Ok(false)) => match autostart_manager.disable() {
            Ok(_) => println!("Autostart disabled successfully."),
            Err(err) => eprintln!("Failed to disable autostart: {}", err),
        },
        _ => (),
    }
}

fn current_autostart<R: Runtime>(app: &tauri::AppHandle<R>) -> Result<bool, String> {
    use std::fs::File;

    let path = app.path().app_config_dir().unwrap();
    let mut old_value = true;

    if path.exists() {
        let file_path = path.join("autostart.txt");
        if file_path.exists() {
            let mut file = File::open(file_path).unwrap();
            let mut data = String::new();
            if let Ok(_) = file.read_to_string(&mut data) {
                if !data.is_empty() {
                    old_value = data.parse().unwrap_or(true);
                }
            }
        }
    };

    Ok(old_value)
}

#[tauri::command]
pub fn change_autostart<R: Runtime>(app: tauri::AppHandle<R>, open: bool) -> Result<(), String> {
    use std::fs::File;
    use std::io::Write;

    let autostart_manager = app.autolaunch();

    let change = |open: bool| -> Result<(), String> {
        let mut open_str = String::from("");
        if open {
            autostart_manager
                .enable()
                .map_err(|_| "enable autostart failed".to_owned())?;
            open_str = "true".to_owned();
        } else {
            autostart_manager
                .disable()
                .map_err(|_| "disable autostart failed".to_owned())?;
            open_str = "false".to_owned();
        }

        let path = app
            .path()
            .app_config_dir()
            .map_err(|_| "not found app config directory".to_owned())?;
        if !path.exists() {
            create_dir(&path).map_err(|_| "creating app config directory failed".to_owned())?;
        }

        let file_path = path.join("autostart.txt");
        let mut file = File::create(file_path).unwrap();
        file.write_all(open_str.as_bytes()).unwrap();

        Ok(())
    };

    match (autostart_manager.is_enabled().unwrap(), open) {
        (false, true) => change(true),
        (true, false) => change(false),
        _ => Err("no change".to_owned()),
    }
}

mod autostart;

use autostart::{change_autostart, enable_autostart};
use tauri_plugin_autostart::MacosLauncher;

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    let mut ctx = tauri::generate_context!();

    tauri::Builder::default()
        .plugin(tauri_plugin_autostart::init(
            MacosLauncher::AppleScript,
            None,
        ))
        .invoke_handler(tauri::generate_handler![change_autostart])
        .setup(|app| {
            enable_autostart(app);
            Ok(())
        })
        .run(ctx)
        .expect("error while running tauri application");
}

Frontend: Configuring Auto-Start

In the frontend, call the backend commands to toggle the startup launch status:

import { isTauri, invoke } from "@tauri-apps/api/core";
import { isEnabled } from "@tauri-apps/plugin-autostart";

const [launchAtLogin, setLaunchAtLogin] = useState(true);

useEffect(() => {
  const fetchAutoStartStatus = async () => {
    if (isTauri()) {
      try {
        const status = await isEnabled();
        setLaunchAtLogin(status);
      } catch (error) {
        console.error("Failed to fetch autostart status:", error);
      }
    }
  };

  fetchAutoStartStatus();
}, []);

const enableAutoStart = async () => {
  if (isTauri()) {
    try {
      invoke("change_autostart", { open: true });
    } catch (error) {
      console.error("Failed to enable autostart:", error);
    }
  }
  setLaunchAtLogin(true);
};

const disableAutoStart = async () => {
  if (isTauri()) {
    try {
      invoke("change_autostart", { open: false });
    } catch (error) {
      console.error("Failed to disable autostart:", error);
    }
  }
  setLaunchAtLogin(false);
};

Conclusion

With the tauri-plugin-autostart plugin, implementing the "launch at startup" feature for Tauri apps becomes straightforward. The plugin supports multiple platforms, simplifying the cross-platform development of this functionality. By configuring and using Tauri's API, you can easily manage your app's auto-start status.

I hope this article helps you implement startup launch functionality for your Tauri desktop app. Feel free to discuss if you have any questions!

Open Source

Recently, I’ve been working on a project based on Tauri called Coco. It’s open source and under continuous improvement. I’d love your support—please give the project a free star 🌟!

This is my first Tauri project, and I’ve been learning while exploring. I look forward to connecting with like-minded individuals to share experiences and grow together!

Official website: coco.rs/
Frontend repo: github.com/infinilabs/coco-app
Backend repo: github.com/infinilabs/coco-server

Thank you for your support and attention!

tauri

Rain9 — Sun, 26 Jan 2025 01:06:51 +0000

Tauri (1) — A desktop application development solution more suitable for web developers ✅

Rain9 — Sat, 25 Jan 2025 14:24:23 +0000

Background

We recently decided to develop an open-source desktop application (keeping it a secret for now, but stay tuned! Follow to avoid missing out!), and chose Tauri as our tech stack. It's a lesser-known option for most people, but for those interested, let's dive deeper!

Introduction to Tauri

Official Website: https://tauri.app/ (v2.0)
GitHub: https://github.com/tauri-apps/tauri (84k Stars)

Official Description: Create small, fast, secure, and cross-platform applications

Simple Understanding

Tauri is a cross-platform desktop application framework that allows developers to use familiar web technologies (like HTML, CSS, JS, and frameworks such as Vue.js, Svelte, React, SolidJS, Angular, Preact, etc.) to easily build desktop applications.

For us web developers looking to delve into desktop application development, Tauri is a great choice, without the steep learning curve. Web technologies have become one of the most powerful UI tools, running seamlessly on platforms with web browsers. With Tauri, we can design the UI exactly as we would on the web, meaning we can continue using our familiar web development skills to create amazing and user-friendly interfaces.

In some cases, desktop applications perform better than web apps. One of the key reasons for choosing desktop applications is that web apps are often limited by the native APIs available within a browser and can't interact with the operating system in the way desktop apps can (e.g., we can't access the file system or read clipboard data with web apps). Desktop applications can interact more deeply with the operating system's APIs and can be optimized for performance with more efficient languages (e.g., Rust). So, if a framework can combine the flexibility of a web UI with full access to native APIs, it is the perfect choice.

Tauri combines two major ecosystems and provides access to native APIs, creating a more complete developer experience.

The architecture of Tauri consists of two core components:

The frontend, built with Web technologies
The backend, developed using the Rust programming language, called Tauri Core.

The frontend allows us to use the Web technologies we are comfortable with (like React and Vue) to create flexible and visually appealing UIs, while the Rust backend opens the door to native APIs through inter-process communication (e.g., clipboard access or file system operations). Thanks to Rust’s performance, even computationally intensive tasks can be efficiently and smoothly handled.

This is why we believe Tauri is the ideal choice for building cross-platform desktop apps based on web technologies (our tech stack decision).

VS Electron

Introduction to Electron

Electron Website: https://www.electronjs.org/ (v33.0)
GitHub: https://github.com/electron/electron (114k Stars)

At this point, we must mention Electron, which might be the most popular cross-platform framework today. The iteration of its versions and the number of stars it has accumulated speaks for itself. Electron has proven its value by being the foundation of many well-known applications. The Electron apps directory is a showcase of its wide usage and powerful functionality, with a community that highly acknowledges Electron's achievements.

Before diving into any technical details, I think it’s important to compare Electron with other frameworks, so we can better assess which framework best fits our needs.

State of JavaScript User Data Comparison

To make a fair comparison, let’s take a look at the State of JavaScript survey data. It covers various aspects such as usage, awareness, retention, enthusiasm, etc.

Survey data link: https://2023.stateofjs.com/zh-Hans/libraries/mobile_desktop/

Usage

Awareness

Interest

Retention

Enthusiasm

Technical Comparison

Regarding the technical comparison, I’m still getting started, so I can’t offer too much advice, but many people online have provided comparison results. Let’s take a look.

Here’s a comparison table between ElectronJS and Tauri, showing their differences across multiple dimensions:

Feature	ElectronJS	Tauri
Framework Size	Large application size, usually over 100MB	Much smaller application size, typically under 10MB
Memory Usage	High memory usage, each app instance requires more memory	Lower memory usage, uses fewer resources
Tech Stack	Based on Chromium and Node.js (bundles the entire browser runtime)	Based on WebView and Rust (no need to bundle the entire browser)
Performance	Lower performance due to bundling Chromium	Higher performance with native WebView component
API Access	System APIs available via Node.js	Rust backend provides easy access to native OS APIs
Security	Must be careful about communication between Node.js and web content	More secure by default, with strict security policies
Packaging & Publishing	Requires electron-builder or electron-forge for packaging	Built-in packaging tools (AppImage, DMG, EXE), no external dependencies
Supported Languages	JavaScript, TypeScript	JavaScript, TypeScript (frontend) and Rust (backend)
Ecosystem	Rich community and plugin ecosystem, many templates and tools	Growing community, stable official templates
Developer Experience	Strong documentation and community support, easy to start	Lightweight solution, documentation is complete but learning Rust may have a steeper curve
Cross-Platform Support	Supports Windows, macOS, Linux	Supports Windows, macOS, Linux, with easier optimizations for size and performance
Debugging Tools	Supports Chrome DevTools, easy to develop and debug	Supports DevTools, similar frontend debugging, but Rust debugging requires additional tools
Update Mechanism	Requires manual update configuration, like electron-updater	Built-in auto-update feature, simplified update process
Project Initialization	- Requires manual creation of npm projects, install Electron libraries.	- Provides a built-in CLI tool to quickly generate projects.
	- Start from scratch, configure project structure manually.	- Uses official templates to automatically configure the project structure, reducing manual setup.
Official Template Support	- Lacks official templates, relies on community-maintained boilerplates.	- Offers multiple official templates, supporting frameworks like React, Vue, Svelte, etc.

Summary of Major Differences:

Complexity: Tauri has built-in tools, official templates, and simplified configuration files; Electron requires more tools and dependencies, with fewer official templates.
Size & Performance: Tauri is much lighter and performs better, making it ideal for resource-sensitive scenarios; Electron is heavier but has a more mature ecosystem.
System API Access: Tauri provides more direct access to native OS APIs, ideal for apps that require native functionality; Electron relies on Node.js, needing extra configuration for system resource access.
Packaging & Publishing: Tauri has more efficient and simple packaging, particularly when generating lightweight apps.

References for Comparison:

Conclusion

With the rapid development of Web technologies, developers are no longer limited to traditional native programming languages when building desktop apps. Tauri, as a lightweight, cross-platform desktop application framework, perfectly combines the flexibility of web development with the power of desktop apps. It opens the door to desktop development for developers familiar with front-end technologies without the steep learning curve. In this article, we explored why Tauri is an ideal choice for web developers, as it not only leverages existing web skills but also enables seamless access to native APIs, making it easier to build outstanding desktop apps.

Open Source

Recently, I’ve been working on a project based on Tauri called Coco. It’s open source and under continuous improvement. I’d love your support—please give the project a free star 🌟!

This is my first Tauri project, and I’ve been learning while exploring. I look forward to connecting with like-minded individuals to share experiences and grow together!

Official website: coco.rs/
Frontend repo: github.com/infinilabs/coco-app
Backend repo: github.com/infinilabs/coco-server

Thank you for your support and attention!

Tauri (8) - Implementing global shortcut key function

Rain9 — Sat, 25 Jan 2025 13:52:37 +0000

Introduction

In modern desktop applications, shortcuts are an essential tool for enhancing user experience and productivity. Many applications allow users to perform specific actions through shortcuts. As a cross-platform desktop application framework, Tauri provides rich functionality to support global shortcuts.

This article introduces how to implement global shortcut functionality in Tauri, guiding you step-by-step to create a desktop application that supports global shortcuts.

Installing Dependencies

To get started, install the necessary dependencies:

pnpm tauri add global-shortcut

pnpm tauri add store

After installation, you can use @tauri-apps/plugin-global-shortcut in the frontend as follows:

import { register } from '@tauri-apps/plugin-global-shortcut';
// When using `"withGlobalTauri": true`, you may use:
// const { register } = window.__TAURI__.globalShortcut;

await register('CommandOrControl+Shift+C', () => {
  console.log('Shortcut triggered');
});

On the Rust side, the tauri-plugin-global-shortcut plugin will also be available for use:

pub fn run() {
    tauri::Builder::default()
        .setup(|app| {
            #[cfg(desktop)]
            {
                use tauri_plugin_global_shortcut::{Code, GlobalShortcutExt, Modifiers, Shortcut, ShortcutState};

                let ctrl_n_shortcut = Shortcut::new(Some(Modifiers::CONTROL), Code::KeyN);
                app.handle().plugin(
                    tauri_plugin_global_shortcut::Builder::new().with_handler(move |_app, shortcut, event| {
                        println!("{:?}", shortcut);
                        if shortcut == &ctrl_n_shortcut {
                            match event.state() {
                              ShortcutState::Pressed => {
                                println!("Ctrl-N Pressed!");
                              }
                              ShortcutState::Released => {
                                println!("Ctrl-N Released!");
                              }
                            }
                        }
                    })
                    .build(),
                )?;

                app.global_shortcut().register(ctrl_n_shortcut)?;
            }
            Ok(())
        })
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

Permission Configuration

In the src-tauri/capabilities/default.json file, add the following configuration:

{
  "$schema": "../gen/schemas/desktop-schema.json",
  "identifier": "main-capability",
  "description": "Capability for the main window",
  "windows": ["main"],
  "permissions": [
    "global-shortcut:allow-is-registered",
    "global-shortcut:allow-register",
    "global-shortcut:allow-unregister",
    "global-shortcut:allow-unregister-all"
  ]
}

Implement Global Shortcuts

Create a shortcut.rs file in the src-tauri/src directory:

use tauri::App;
use tauri::AppHandle;
use tauri::Manager;
use tauri::Runtime;
use tauri_plugin_global_shortcut::GlobalShortcutExt;
use tauri_plugin_global_shortcut::Shortcut;
use tauri_plugin_global_shortcut::ShortcutState;
use tauri_plugin_store::JsonValue;
use tauri_plugin_store::StoreExt;

/// Name of the Tauri storage
const COCO_TAURI_STORE: &str = "coco_tauri_store";

/// Key for storing global shortcuts
const COCO_GLOBAL_SHORTCUT: &str = "coco_global_shortcut";

/// Default shortcut for macOS
#[cfg(target_os = "macos")]
const DEFAULT_SHORTCUT: &str = "command+shift+space";

/// Default shortcut for Windows and Linux
#[cfg(any(target_os = "windows", target_os = "linux"))]
const DEFAULT_SHORTCUT: &str = "ctrl+shift+space";

/// Set shortcut during application startup
pub fn enable_shortcut(app: &App) {
    let store = app
        .store(COCO_TAURI_STORE)
        .expect("Creating the store should not fail");

    // Use stored shortcut if it exists
    if let Some(stored_shortcut) = store.get(COCO_GLOBAL_SHORTCUT) {
        let stored_shortcut_str = match stored_shortcut {
            JsonValue::String(str) => str,
            unexpected_type => panic!(
                "COCO shortcuts should be stored as strings, found type: {} ",
                unexpected_type
            ),
        };
        let stored_shortcut = stored_shortcut_str
            .parse::<Shortcut>()
            .expect("Stored shortcut string should be valid");
        _register_shortcut_upon_start(app, stored_shortcut); // Register stored shortcut
    } else {
        // Use default shortcut if none is stored
        store.set(
            COCO_GLOBAL_SHORTCUT,
            JsonValue::String(DEFAULT_SHORTCUT.to_string()),
        );
        let default_shortcut = DEFAULT_SHORTCUT
            .parse::<Shortcut>()
            .expect("Default shortcut should be valid");
        _register_shortcut_upon_start(app, default_shortcut); // Register default shortcut
    }
}

/// Get the current stored shortcut as a string
#[tauri::command]
pub fn get_current_shortcut<R: Runtime>(app: AppHandle<R>) -> Result<String, String> {
    let shortcut = _get_shortcut(&app);
    Ok(shortcut)
}

/// Unregister the current shortcut in Tauri
#[tauri::command]
pub fn unregister_shortcut<R: Runtime>(app: AppHandle<R>) {
    let shortcut_str = _get_shortcut(&app);
    let shortcut = shortcut_str
        .parse::<Shortcut>()
        .expect("Stored shortcut string should be valid");

    // Unregister the shortcut
    app.global_shortcut()
        .unregister(shortcut)
        .expect("Failed to unregister shortcut")
}

/// Change the global shortcut
#[tauri::command]
pub fn change_shortcut<R: Runtime>(
    app: AppHandle<R>,
    _window: tauri::Window<R>,
    key: String,
) -> Result<(), String> {
    println!("Key: {}", key);
    let shortcut = match key.parse::<Shortcut>() {
        Ok(shortcut) => shortcut,
        Err(_) => return Err(format!("Invalid shortcut {}", key)),
    };

    // Store the new shortcut
    let store = app
        .get_store(COCO_TAURI_STORE)
        .expect("Store should already be loaded or created");
    store.set(COCO_GLOBAL_SHORTCUT, JsonValue::String(key));

    // Register the new shortcut
    _register_shortcut(&app, shortcut);

    Ok(())
}

/// Helper function to register a shortcut, primarily for updating shortcuts
fn _register_shortcut<R: Runtime>(app: &AppHandle<R>, shortcut: Shortcut) {
    let main_window = app.get_webview_window("main").unwrap();
    // Register global shortcut and define its behavior
    app.global_shortcut()
        .on_shortcut(shortcut, move |_app, scut, event| {
            if scut == &shortcut {
                if let ShortcutState::Pressed = event.state() {
                    // Toggle window visibility
                    if main_window.is_visible().unwrap() {
                        main_window.hide().unwrap(); // Hide window
                    } else {
                        main_window.show().unwrap(); // Show window
                        main_window.set_focus().unwrap(); // Focus window
                    }
                }
            }
        })
        .map_err(|err| format!("Failed to register new shortcut '{}'", err))
        .unwrap();
}

/// Helper function to register shortcuts during application startup
fn _register_shortcut_upon_start(app: &App, shortcut: Shortcut) {
    let window = app.get_webview_window("main").unwrap();
    // Initialize global shortcut and set its handler
    app.handle()
        .plugin(
            tauri_plugin_global_shortcut::Builder::new()
                .with_handler(move |_app, scut, event| {
                    if scut == &shortcut {
                        if let ShortcutState::Pressed = event.state() {
                            // Toggle window visibility
                            if window.is_visible().unwrap() {
                                window.hide().unwrap(); // Hide window
                            } else {
                                window.show().unwrap(); // Show window
                                window.set_focus().unwrap(); // Focus window
                            }
                        }
                    }
                })
                .build(),
        )
        .unwrap();
    app.global_shortcut().register(shortcut).unwrap(); // Register global shortcut
}

/// Retrieve the stored global shortcut as a string
pub fn _get_shortcut<R: Runtime>(app: &AppHandle<R>) -> String {
    let store = app
        .get_store(COCO_TAURI_STORE)
        .expect("Store should already be loaded or created");

    match store
        .get(COCO_GLOBAL_SHORTCUT)
        .expect("Shortcut should already be stored")
    {
        JsonValue::String(str) => str,
        unexpected_type => panic!(
            "COCO shortcuts should be stored as strings, found type: {} ",
            unexpected_type
        ),
    }
}

In the src-tauri/src/lib.rs file, import and register:

mod shortcut;

pub fn run() {
    let mut ctx = tauri::generate_context!();

    tauri::Builder::default()
        .plugin(tauri_plugin_store::Builder::default().build())
        .invoke_handler(tauri::generate_handler![
            shortcut::change_shortcut,
            shortcut::unregister_shortcut,
            shortcut::get_current_shortcut,
        ])
        .setup(|app| {
            init(app.app_handle());

            shortcut::enable_shortcut(app);
            enable_autostart(app);

            Ok(())
        })
        .run(ctx)
        .expect("error while running tauri application");
}

At this point, the app has implemented the functionality to toggle its visibility using a global shortcut.

The default shortcut for macOS is command+shift+space.
The default shortcut for Windows and Linux is ctrl+shift+space.

If the default shortcut conflicts with another application or the user has personal preferences, they can modify it.

Modify shortcut keys

Then you need to create a front-end interface to allow users to operate on the front-end interface.

import { useState, useEffect } from "react";
import { isTauri, invoke } from "@tauri-apps/api/core"; 

import { ShortcutItem } from "./ShortcutItem"; 
import { Shortcut } from "./shortcut"; 
import { useShortcutEditor } from "@/hooks/useShortcutEditor"; 
export default function GeneralSettings() {
  const [shortcut, setShortcut] = useState<Shortcut>([]);

  async function getCurrentShortcut() {
    try {
      const res: string = await invoke("get_current_shortcut"); 
      console.log("DBG: ", res); 
      setShortcut(res?.split("+")); 
    } catch (err) {
      console.error("Failed to fetch shortcut:", err); 
    }
  }


  useEffect(() => {
    getCurrentShortcut(); 
  }, []);


  const changeShortcut = (key: Shortcut) => {
    setShortcut(key); 
    if (key.length === 0) return; 
    invoke("change_shortcut", { key: key?.join("+") }).catch((err) => {
      console.error("Failed to save hotkey:", err); 
    });
  };

  const { isEditing, currentKeys, startEditing, saveShortcut, cancelEditing } =
    useShortcutEditor(shortcut, changeShortcut);


  const onEditShortcut = async () => {
    startEditing(); 
    invoke("unregister_shortcut").catch((err) => {
      console.error("Failed to save hotkey:", err); 
    });
  };

  const onCancelShortcut = async () => {
    cancelEditing(); 
    invoke("change_shortcut", { key: shortcut?.join("+") }).catch((err) => {
      console.error("Failed to save hotkey:", err); 
    });
  };


  const onSaveShortcut = async () => {
    saveShortcut(); 
  };


  return (
    <div className="space-y-8">
      <div>
        <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
          General Settings
        </h2>
        <div className="space-y-6">
          <ShortcutItem
            shortcut={shortcut} 
            isEditing={isEditing} 
            currentKeys={currentKeys} 
            onEdit={onEditShortcut} 
            onSave={onSaveShortcut}
            onCancel={onCancelShortcut} 
          />
        </div>
      </div>
    </div>
  );
}

ShortcutItem.tsx file：

import { formatKey, sortKeys } from "@/utils/keyboardUtils";
import { X } from "lucide-react";
interface ShortcutItemProps {
  shortcut: string[];
  isEditing: boolean;
  currentKeys: string[];
  onEdit: () => void;
  onSave: () => void;
  onCancel: () => void;
}

export function ShortcutItem({
  shortcut,
  isEditing,
  currentKeys,
  onEdit,
  onSave,
  onCancel,
}: ShortcutItemProps) {
  const renderKeys = (keys: string[]) => {
    const sortedKeys = sortKeys(keys);
    return sortedKeys.map((key, index) => (
      <kbd
        key={index}
        className={`px-2 py-1 text-sm font-semibold rounded shadow-sm bg-gray-100 border-gray-300 text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200`}
      >
        {formatKey(key)}
      </kbd>
    ));
  };

  return (
    <div
      className={`flex items-center justify-between p-4 rounded-lg bg-gray-50 dark:bg-gray-700`}
    >
      <div className="flex items-center gap-4">
        {isEditing ? (
          <>
            <div className="flex gap-1 min-w-[120px] justify-end">
              {currentKeys.length > 0 ? (
                renderKeys(currentKeys)
              ) : (
                <span className={`italic text-gray-500 dark:text-gray-400`}>
                  Press keys...
                </span>
              )}
            </div>
            <div className="flex gap-2">
              <button
                onClick={onSave}
                disabled={currentKeys.length < 2}
                className={`px-3 py-1 text-sm rounded bg-blue-500 text-white hover:bg-blue-600 dark:bg-blue-600 dark:text-white dark:hover:bg-blue-700
                   disabled:opacity-50 disabled:cursor-not-allowed`}
              >
                Save
              </button>
              <button
                onClick={onCancel}
                className={`p-1 rounded text-gray-500 hover:text-gray-700 hover:bg-gray-200 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:bg-gray-600`}
              >
                <X className="w-4 h-4" />
              </button>
            </div>
          </>
        ) : (
          <>
            <div className="flex gap-1">{renderKeys(shortcut)}</div>
            <button
              onClick={onEdit}
              className={`px-3 py-1 text-sm rounded bg-gray-200 text-gray-700 hover:bg-gray-300 dark:bg-gray-600 dark:text-gray-200 dark:hover:bg-gray-500`}
            >
              Edit
            </button>
          </>
        )}
      </div>
    </div>
  );
}

hooks/useShortcutEditor.ts file：

import { useState, useCallback, useEffect } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';

import { Shortcut } from '@/components/Settings/shortcut';
import { normalizeKey, isModifierKey, sortKeys } from '@/utils/keyboardUtils';

const RESERVED_SHORTCUTS = [
  ["Command", "C"],
  ["Command", "V"],
  ["Command", "X"],
  ["Command", "A"],
  ["Command", "Z"],
  ["Command", "Q"],
  // Windows/Linux
  ["Control", "C"],
  ["Control", "V"],
  ["Control", "X"],
  ["Control", "A"],
  ["Control", "Z"],
  // Coco
  ["Command", "I"],
  ["Command", "T"],
  ["Command", "N"],
  ["Command", "G"],
  ["Command", "O"],
  ["Command", "U"],
  ["Command", "M"],
  ["Command", "Enter"],
  ["Command", "ArrowLeft"],
  ["Command", "ArrowRight"],
  ["Command", "ArrowUp"],
  ["Command", "ArrowDown"],
  ["Command", "0"],
  ["Command", "1"],
  ["Command", "2"],
  ["Command", "3"],
  ["Command", "4"],
  ["Command", "5"],
  ["Command", "6"],
  ["Command", "7"],
  ["Command", "8"],
  ["Command", "9"],
];

export function useShortcutEditor(shortcut: Shortcut, onChange: (shortcut: Shortcut) => void) {
  console.log("shortcut", shortcut)

  const [isEditing, setIsEditing] = useState(false);
  const [currentKeys, setCurrentKeys] = useState<string[]>([]);
  const [pressedKeys] = useState(new Set<string>());

  const startEditing = useCallback(() => {
    setIsEditing(true);
    setCurrentKeys([]);
  }, []);

  const saveShortcut = async () => {
    if (!isEditing || currentKeys.length < 2) return;

    const hasModifier = currentKeys.some(isModifierKey);
    const hasNonModifier = currentKeys.some(key => !isModifierKey(key));

    if (!hasModifier || !hasNonModifier) return;

    console.log(111111, currentKeys)

    const isReserved = RESERVED_SHORTCUTS.some(reserved =>
      reserved.length === currentKeys.length &&
      reserved.every((key, index) => key.toLowerCase() === currentKeys[index].toLowerCase())
    );

    console.log(22222, isReserved)


    if (isReserved) {
      console.error("This is a system reserved shortcut");
      return;
    }

    // Sort keys to ensure consistent order (modifiers first)
    const sortedKeys = sortKeys(currentKeys);


    onChange(sortedKeys);
    setIsEditing(false);
    setCurrentKeys([]);
  };

  const cancelEditing = useCallback(() => {
    setIsEditing(false);
    setCurrentKeys([]);
  }, []);

  // Register key capture for editing state
  useHotkeys(
    '*',
    (e) => {
      if (!isEditing) return;

      e.preventDefault();
      e.stopPropagation();

      const key = normalizeKey(e.code);

      // Update pressed keys
      pressedKeys.add(key);

      setCurrentKeys(() => {
        const keys = Array.from(pressedKeys);
        let modifiers = keys.filter(isModifierKey);
        let nonModifiers = keys.filter(k => !isModifierKey(k));

        if (modifiers.length > 2) {
          modifiers = modifiers.slice(0, 2)
        }

        if (nonModifiers.length > 2) {
          nonModifiers = nonModifiers.slice(0, 2)
        }

        // Combine modifiers and non-modifiers
        return [...modifiers, ...nonModifiers];
      });
    },
    {
      enabled: isEditing,
      keydown: true,
      enableOnContentEditable: true
    },
    [isEditing, pressedKeys]
  );

  // Handle key up events
  useHotkeys(
    '*',
    (e) => {
      if (!isEditing) return;
      const key = normalizeKey(e.code);
      pressedKeys.delete(key);
    },
    {
      enabled: isEditing,
      keyup: true,
      enableOnContentEditable: true
    },
    [isEditing, pressedKeys]
  );

  // Clean up editing state when component unmounts
  useEffect(() => {
    return () => {
      if (isEditing) {
        cancelEditing();
      }
    };
  }, [isEditing, cancelEditing]);

  return {
    isEditing,
    currentKeys,
    startEditing,
    saveShortcut,
    cancelEditing
  };
}

Summary

Through the introduction of this article, you can integrate global shortcuts into your Tauri application to provide users with a smoother operation experience. If you have not used Tauri yet, I hope you can have a deeper understanding of it through this article and start trying this feature in your own projects!

Open Source

Recently, I’ve been working on a project based on Tauri called Coco. It’s open source and under continuous improvement. I’d love your support—please give the project a free star 🌟!

This is my first Tauri project, and I’ve been learning while exploring. I look forward to connecting with like-minded individuals to share experiences and grow together!

Official website: coco.rs/
Frontend repo: github.com/infinilabs/coco-app
Backend repo: github.com/infinilabs/coco-server

Thank you for your support and attention!

Tauri (7) - Implementing OAuth login functionality

Rain9 — Wed, 22 Jan 2025 06:25:56 +0000

Introduction

Implementing OAuth login in Tauri requires integrating both frontend and backend functionalities. It uses WebView and the system browser to securely authenticate users. This article outlines a complete implementation process with key steps.

Implementation Overview

1. Launching Desktop Applications via Browser

The user clicks the login button, and Tauri opens the default browser to access the OAuth server's authorization URL.
After completing the authorization, the server returns an authorization code (code) via a callback URL.
The application retrieves the code from the callback and exchanges it for an access_token via an API request.
User information and access_token are stored, completing the login process.

2. Internal App Listening

The user clicks the login button, and Tauri opens the default browser to access the OAuth server's authorization URL.
After completing the authorization, the server returns an authorization code (code).
The application retrieves the code through an internal listener and exchanges it for an access_token via an API request.
User information and access_token are stored, completing the login process.

The difference between these two approaches lies in how the code is obtained: the first method retrieves it from the callback, while the second listens for it internally within the app.

This article focuses on the second approach.

OAuth Login Workflow

The following example demonstrates the implementation process using GitHub OAuth.

Tauri App Frontend Implementation

async function signIn() {
    let res: (url: URL) => void;

    try {
        const stopListening = await listen(
            "oauth://url",
            (data: { payload: string }) => {
                console.log(111, data.payload);

                const urlObject = new URL(data.payload);
                res(urlObject);
            }
        );

        try {
            await invoke("plugin:oauth|stop");
        } catch (e) {
            // Ignore errors if no server is running
        }

        const port: string = await invoke("plugin:oauth|start", {
            config: {
                response: callbackTemplate,
                headers: {
                    "Content-Type": "text/html; charset=utf-8",
                    "Cache-Control": "no-store, no-cache, must-revalidate",
                    Pragma: "no-cache",
                },
                cleanup: true,
            },
        });

        let uid = app_uid;
        if (!uid) {
            uid = uuidv4();
            setAppUid(uid);
        }

        await shell.open(
            `http://localhost:1420/login?provider=coco-cloud&product=coco&request_id=${uid}&port=${port}`
        );

        const url = await new Promise<URL>((r) => {
            res = r;
        });
        stopListening();

        const code = url.searchParams.get("code");
        const provider = url.searchParams.get("provider");

        if (!code || provider !== "coco-cloud") {
            throw new Error("Invalid token or expires");
        }

        const response: any = await tauriFetch({
            url: `/auth/request_access_token?request_id=${uid}`,
            method: "GET",
            headers: {
                "X-API-TOKEN": code,
            },
        });

        await setAuth({
            token: response?.access_token,
            expires: response?.expire_at,
            plan: { upgraded: false, last_checked: 0 },
        });

        getCurrentWindow()
            .setFocus()
            .catch(() => {});
    } catch (error) {
        console.error("Sign in failed:", error);
        await setAuth(undefined);
        throw error;
    }
}

// Listen for auth status
useEffect(() => {
    const setupAuthListener = async () => {
        try {
            if (!auth) {
                // Redirect to the signin page
            }
        } catch (error) {
            console.error("Failed to set up auth listener:", error);
        }
    };

    setupAuthListener();

    return () => {
        const cleanup = async () => {
            try {
                await invoke("plugin:oauth|stop");
            } catch (e) {}
        };

        cleanup();
    };
}, [auth]);

Configuring OAuth Provider

For GitHub OAuth:

Log in to the GitHub Developer platform and create an OAuth application.
Configure:
- Callback URL: For example, http://localhost:1420/auth/callback
- Retrieve client_id and client_secret.

Web Browser Implementation

import { useSearchParams } from "react-router-dom";

const [searchParams] = useSearchParams();
const uid = searchParams.get("request_id");
const port = searchParams.get("port");
const code = searchParams.get("code");

// GitHub Authorization
const authWithGithub = (uid: string, port: any) => {
    const authorizeUrl = "https://github.com/login/oauth/authorize";
    location.href = `${authorizeUrl}?client_id=${"xxxxxxxx"}&redirect_uri=http://localhost:1420/login?port=${port}`;
};

// GitHub Login
function handleGithubSignIn() {
    uid && authWithGithub(uid, port);
}

// Monitor code and callback to app
useEffect(() => {
    setTimeout(() => {
        window.location.href = `http://localhost:${port}/?code=${code}&provider=coco-cloud`;
    }, 10000);
}, [code]);

Conclusion

This guide demonstrates how to implement OAuth login in a Tauri app using GitHub OAuth. It covers both frontend and backend integration, providing a secure and user-friendly login experience. With this method, developers can adapt the approach to other OAuth providers as needed.

Open Source

Recently, I’ve been working on a project based on Tauri called Coco. It’s open source and under continuous improvement. I’d love your support—please give the project a free star 🌟!

This is my first Tauri project, and I’ve been learning while exploring. I look forward to connecting with like-minded individuals to share experiences and grow together!

Official website: coco.rs/
Frontend repo: github.com/infinilabs/coco-app
Backend repo: github.com/infinilabs/coco-server

Thank you for your support and attention!

Tauri (6) — Invoke desktop application functionality through the browser

Rain9 — Tue, 21 Jan 2025 05:07:49 +0000

Introduction

Most of the online articles focus on Tauri V1. This article primarily discusses the implementation in Tauri V2.

In a Tauri V2 application, it's possible to open the app via a specific URL in the browser by configuring the protocol and relevant settings. Let’s walk through the steps to achieve this functionality.

Install Plugins

Install `@tauri-apps/plugin-deep-link`

This plugin is used to set the Tauri application as the default handler for a specific URL.

Method 1: Modify Cargo.toml

Add the following to the src-tauri/Cargo.toml file:

[dependencies]
tauri-plugin-deep-link = "2.0.0"
# alternatively with Git:
tauri-plugin-deep-link = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v2" }

Method 2: Install via JS

pnpm add @tauri-apps/plugin-deep-link
# or
npm add @tauri-apps/plugin-deep-link
# or
yarn add @tauri-apps/plugin-deep-link

# alternatively with Git:
pnpm add https://github.com/tauri-apps/tauri-plugin-deep-link#v2
# or
npm add https://github.com/tauri-apps/tauri-plugin-deep-link#v2
# or
yarn add https://github.com/tauri-apps/tauri-plugin-deep-link#v2

Install `tauri-plugin-single-instance`

This ensures that only a single instance of the Tauri application is running.

Configuration: Modify Cargo.toml

Add the following to the src-tauri/Cargo.toml file:

[dependencies]
tauri-plugin-single-instance = "2.0.0"
# alternatively with Git:
tauri-plugin-single-instance = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v2" }

Configure Custom Protocol

Tauri supports using custom protocols like tauri:// to open content in the application via the browser.

Add the following to the src-tauri/tauri.conf.json file:

  "plugins": {
    "features": {
      "protocol": ["all"]
    },
    "window": {},
    "websocket": {},
    "shell": {},
    "globalShortcut": {},
    "deep-link": {
      "schema": "coco",
      "mobile": [
        { "host": "app.infini.cloud", "pathPrefix": ["/open"] },
        { "host": "localhost:9000" }
      ],
      "desktop": {
        "schemes": ["coco"]
      }
    }
  }

Implement Custom Protocol Logic

Add the following to the src-tauri/src/lib.rs file:

use tauri_plugin_deep_link::DeepLinkExt;

#[derive(Clone, serde::Serialize)]
struct Payload {
    args: Vec<String>,
    cwd: String,
}

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    let mut ctx = tauri::generate_context!();

    tauri::Builder::default()
        .plugin(tauri_plugin_shell::init())
        .plugin(tauri_plugin_deep_link::init())
        .plugin(tauri_plugin_single_instance::init(|app, argv, cwd| {
            app.emit("single-instance", Payload { args: argv, cwd })
                .unwrap();
        }))
        .invoke_handler(tauri::generate_handler![
        ])
        .setup(|app| {
            init(app.app_handle());

            #[cfg(target_os = "macos")]
            app.set_activation_policy(ActivationPolicy::Accessory);

            #[cfg(any(target_os = "linux", all(debug_assertions, windows)))]
            app.deep_link().register_all()?;

            app.deep_link().on_open_url(|event| {
                dbg!(event.urls());
            });

            Ok(())
        })
        .run(ctx)
        .expect("error while running tauri application");
}

Permission Configuration

Add the following to the src-tauri/capabilities/default.json file:

  "permissions": [
    "oauth:allow-start",
    "deep-link:allow-get-current", 
    "deep-link:default",
    "deep-link:allow-register"
  ]

MacOS Configuration

In a Tauri project, src-tauri/Info.plist is a macOS-specific file that defines key properties and behaviors for the application, such as the name, permissions, URL schemes, etc.

Modify the src-tauri/Info.plist file:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
  <key>NSCameraUsageDescription</key>
  <string>Request camera access for WebRTC</string>
  <key>NSMicrophoneUsageDescription</key>
  <string>Request microphone access for WebRTC</string>

  <key>CFBundleIdentifier</key>
  <string>rs.coco.app</string>

  <key>NSPrefPaneIconLabel</key>
  <string>coco-ai</string>
  <key>CFBundleURLTypes</key>
  <array>
    <dict>
      <key>CFBundleURLName</key>
      <string>rs.coco.app</string>
      <key>CFBundleURLSchemes</key>
      <array>
        <string>coco</string>
      </array>
    </dict>
  </array>
</dict>
</plist>

Frontend Implementation

Tauri APP Code:

import {
  onOpenUrl,
  getCurrent as getCurrentDeepLinkUrls,
} from "@tauri-apps/plugin-deep-link";

const handleUrl = (url: string) => {
  try {
    const urlObject = new URL(url);
    console.error("urlObject:", urlObject);

    switch (urlObject.pathname) {
      case "oauth_callback":
        const code = urlObject.searchParams.get("code");
        const provider = urlObject.searchParams.get("provider");
        // Implement logic here
        break;

      default:
        console.log("Unhandled deep link path:", urlObject.pathname);
    }
  } catch (err) {
    console.error("Failed to parse URL:", err);
  }
};

// Fetch the initial deep link intent
useEffect(() => {
  getCurrentDeepLinkUrls()
    .then((urls) => {
      if (urls && urls.length > 0) {
        handleUrl(urls[0]);
      }
    })
    .catch((err) => console.error("Failed to get initial URLs:", err));

  const unlisten = onOpenUrl((urls) => handleUrl(urls[0]));

  return () => {
    unlisten.then((fn) => fn());
  };
}, []);

Browser Web Code:

<a href="coco://oauth_callback?code=ctvracbq50ke7o4qksj0&provider=coco-cloud">
  In order to continue, please click here to launch Coco AI
</a>

Use Cases

Triggering desktop app logic via web pages.
Integrating OAuth login, payment callbacks, etc., that require browser interaction.
Cross-platform data exchange.
Online documentation and help center.
Dynamic loading and updates.

Summary

With the steps above, we’ve implemented the functionality to open a Tauri app from the browser using a custom protocol, supporting flexible configuration and multi-platform compatibility.

References

Open Source

Recently, I’ve been working on a project based on Tauri called Coco. It’s open source and under continuous improvement. I’d love your support—please give the project a free star 🌟!

This is my first Tauri project, and I’ve been learning while exploring. I look forward to connecting with like-minded individuals to share experiences and grow together!

Official website: coco.rs/
Frontend repo: github.com/infinilabs/coco-app
Backend repo: github.com/infinilabs/coco-server

Thank you for your support and attention!

Tauri（5）—— Tray Icon Implementation and Event Handling

Rain9 — Fri, 17 Jan 2025 14:52:19 +0000

This guide details the implementation of a tray icon in a Tauri application, including customizing the icon, creating menu items, and handling events. The steps also include dynamically switching the tray icon based on themes.

Dependencies

Add the required dependencies in src-tauri/Cargo.toml:

[dependencies]
tauri = { version = "2.0.6", features = ["tray-icon", "image-png"] }

Tray Icon Setup

Function: `enable_tray`

fn enable_tray(app: &mut tauri::App) {
    use tauri::{
        image::Image,
        menu::{MenuBuilder, MenuItem},
        tray::TrayIconBuilder,
    };

    // Create menu items
    let quit_i = MenuItem::with_id(app, "quit", "Quit Coco", true, None::<&str>).unwrap();
    let settings_i = MenuItem::with_id(app, "settings", "Settings...", true, None::<&str>).unwrap();
    let open_i = MenuItem::with_id(app, "open", "Open Coco", true, None::<&str>).unwrap();
    let about_i = MenuItem::with_id(app, "about", "About Coco", true, None::<&str>).unwrap();
    let hide_i = MenuItem::with_id(app, "hide", "Hide Coco", true, None::<&str>).unwrap();

    // Build menu
    let menu = MenuBuilder::new(app)
        .item(&open_i)
        .separator()
        .item(&hide_i)
        .item(&about_i)
        .item(&settings_i)
        .separator()
        .item(&quit_i)
        .build()
        .unwrap();

    // Create tray icon
    let _tray = TrayIconBuilder::with_id("tray")
        .icon(Image::from_bytes(include_bytes!("../icons/light@2x.png")).expect("Failed to load icon"))
        .menu(&menu)
        .on_menu_event(|app, event| match event.id.as_ref() {
            "open" => handle_open_coco(app),
            "hide" => handle_hide_coco(app),
            "about" => { let _ = app.emit("open_settings", "about"); },
            "settings" => { let _ = app.emit("open_settings", ""); },
            "quit" => app.exit(0),
            _ => println!("Unhandled menu item: {:?}", event.id),
        })
        .build(app)
        .unwrap();
}

Register Tray Function in `run`

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    let mut ctx = tauri::generate_context!();

    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![switch_tray_icon])
        .setup(|app| {
            init(app.app_handle());
            enable_tray(app); // Register tray events
            Ok(())
        })
        .run(ctx)
        .expect("Error while running Tauri application");
}

Dynamically Switch Tray Icon

Rust Command: `switch_tray_icon`

#[tauri::command]
fn switch_tray_icon(app: tauri::AppHandle, is_dark_mode: bool) {
    println!("is_dark_mode: {}", is_dark_mode);

    const DARK_ICON_PATH: &[u8] = include_bytes!("../icons/dark@2x.png");
    const LIGHT_ICON_PATH: &[u8] = include_bytes!("../icons/light@2x.png");

    // Determine icon based on theme
    let icon_path: &[u8] = if is_dark_mode {
        DARK_ICON_PATH
    } else {
        LIGHT_ICON_PATH
    };

    // Fetch tray by ID
    if let Some(tray) = app.tray_by_id("tray") {
        if let Err(e) = tray.set_icon(Some(
            tauri::image::Image::from_bytes(icon_path)
                .unwrap_or_else(|e| panic!("Failed to load icon from bytes: {}", e)),
        )) {
            eprintln!("Failed to set tray icon: {}", e);
        }
    } else {
        eprintln!("Tray with ID 'tray' not found");
    }
}

Frontend Invocation

import { invoke } from "@tauri-apps/api";

async function switchTrayIcon(value: "dark" | "light") {
    try {
        await invoke("switch_tray_icon", { isDarkMode: value === "dark" });
    } catch (err) {
        console.error("Failed to switch tray icon:", err);
    }
}

Summary

Tray Icon Features: Create customizable tray icons with menus and handle user interactions.
Dynamic Theme Switching: Adjust tray icons dynamically to match light or dark themes.
Frontend Integration: Seamlessly invoke backend commands to manage tray features.

This setup ensures a polished user experience with a functional and dynamic tray in your Tauri application.

Open Source Project Sharing

Recently, I started developing a project based on Tauri, called Coco. The project is open source, and we’re actively improving it. Feel free to check it out and give it a star 🌟 if you find it helpful!

This is my first project with Tauri, and I’ve been learning and exploring along the way. I look forward to connecting with like-minded developers to exchange ideas and grow together!

Official Website: https://coco.rs/
Frontend Repository: https://github.com/infinilabs/coco-app
Backend Repository: https://github.com/infinilabs/coco-server

Thank you so much for your support and attention!

DEV Community: Rain9

react

AI

Building a Hugo + Tailwind technical blog from scratch: Taking INFINI Labs Blog as an example

Project Overview

1. Directory Structure: Where Do Content, Theme, Config, and Assets Live?

1) Content Layer: content/

2) Configuration Layer: hugo.toml + config/_default/*

3) Theme Layer: themes/hugoplate/

4) Asset Layer: assets/ vs static/

2. Build Pipeline: What Happens From Markdown to Final HTML/CSS/JS?

1) Build entry points: package.json scripts

2) Hugo Modules: Why does CI install Go?

3) How does Tailwind generate only the CSS you actually use?

4) How are CSS/JS bundled, minified, and fingerprinted?

3. Search: How Do index.json and /static/assets/* Work Together?

1) Where does the index come from?

2) Where does the search UI come from?

4. Building a Similar Project From Scratch (Minimum Viable Steps)

1) Prepare the toolchain

2) Install dependencies and start development

3) Add a new post

4) Build for production

5. Deployment & CI/CD: How Netlify / GitHub Pages / Vercel Build It

1) Netlify

2) GitHub Pages (GitHub Actions)

3) Vercel

Wrap-up: The Boundary Between Build-Time and Run-Time

next

useEffect

Tauri (9) - Implementing automatic startup of desktop applications

Introduction

Implementation Principle

Installing the Plugin

Rust Code Implementation

Frontend: Configuring Auto-Start

Conclusion

Open Source

tauri

Tauri (1) — A desktop application development solution more suitable for web developers ✅

Background

Introduction to Tauri

Simple Understanding

VS Electron

Introduction to Electron

State of JavaScript User Data Comparison

Technical Comparison

Conclusion

Open Source

Tauri (8) - Implementing global shortcut key function

Introduction

Installing Dependencies

Permission Configuration

Implement Global Shortcuts

Modify shortcut keys

Summary

Open Source

Tauri (7) - Implementing OAuth login functionality

Introduction

Implementation Overview

1. Launching Desktop Applications via Browser

2. Internal App Listening

OAuth Login Workflow

Tauri App Frontend Implementation

Configuring OAuth Provider

Web Browser Implementation

Conclusion

Open Source

Tauri (6) — Invoke desktop application functionality through the browser

Introduction

Install Plugins

Install @tauri-apps/plugin-deep-link

Install tauri-plugin-single-instance

Configure Custom Protocol

Implement Custom Protocol Logic

Permission Configuration

MacOS Configuration

Frontend Implementation

Tauri APP Code:

Browser Web Code:

1) Content Layer: `content/`

2) Configuration Layer: `hugo.toml` + `config/_default/*`

3) Theme Layer: `themes/hugoplate/`

4) Asset Layer: `assets/` vs `static/`

1) Build entry points: `package.json` scripts

3. Search: How Do `index.json` and `/static/assets/*` Work Together?

Install `@tauri-apps/plugin-deep-link`

Install `tauri-plugin-single-instance`

Function: `enable_tray`

Register Tray Function in `run`

Rust Command: `switch_tray_icon`