From a4d7bb12e1fc7508937596881339a856aacc7f71 Mon Sep 17 00:00:00 2001 From: Ayres Vitor Date: Fri, 29 Aug 2025 00:47:02 -0300 Subject: [PATCH 1/7] remove outdated field on cta --- src/content/docs/learn/sidecar-nodejs.mdx | 1 - src/content/docs/learn/splashscreen.mdx | 2 +- src/content/docs/zh-cn/learn/sidecar-nodejs.mdx | 1 - src/content/docs/zh-cn/learn/splashscreen.mdx | 2 +- 4 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/content/docs/learn/sidecar-nodejs.mdx b/src/content/docs/learn/sidecar-nodejs.mdx index 1cd0552b2d..4e41f73753 100644 --- a/src/content/docs/learn/sidecar-nodejs.mdx +++ b/src/content/docs/learn/sidecar-nodejs.mdx @@ -35,7 +35,6 @@ If you are not an advanced user it's **highly recommended** that you use the opt - Choose your package manager: `pnpm` - Choose your UI template: `Vanilla` - Choose your UI flavor: `Typescript` -- Would you like to setup the project for mobile as well? `yes` ::: diff --git a/src/content/docs/learn/splashscreen.mdx b/src/content/docs/learn/splashscreen.mdx index bcca5ce715..af0d0b54b2 100644 --- a/src/content/docs/learn/splashscreen.mdx +++ b/src/content/docs/learn/splashscreen.mdx @@ -33,7 +33,7 @@ If you are not an advanced user it's **highly recommended** that you use the opt - Choose your package manager: `pnpm` - Choose your UI template: `Vanilla` - Choose your UI flavor: `Typescript` -- Would you like to setup the project for mobile as well? `yes` + ::: ## Steps diff --git a/src/content/docs/zh-cn/learn/sidecar-nodejs.mdx b/src/content/docs/zh-cn/learn/sidecar-nodejs.mdx index 3b93f5a56b..f75c228f51 100644 --- a/src/content/docs/zh-cn/learn/sidecar-nodejs.mdx +++ b/src/content/docs/zh-cn/learn/sidecar-nodejs.mdx @@ -34,7 +34,6 @@ import CTA from '@fragments/cta.mdx'; - Choose your package manager: `pnpm` - Choose your UI template: `Vanilla` - Choose your UI flavor: `Typescript` -- Would you like to setup the project for mobile as well? `yes` ::: diff --git a/src/content/docs/zh-cn/learn/splashscreen.mdx b/src/content/docs/zh-cn/learn/splashscreen.mdx index b1534a6c9a..2c3453561f 100644 --- a/src/content/docs/zh-cn/learn/splashscreen.mdx +++ b/src/content/docs/zh-cn/learn/splashscreen.mdx @@ -32,7 +32,7 @@ import CTA from '@fragments/cta.mdx'; - Choose your package manager: `pnpm` - Choose your UI template: `Vanilla` - Choose your UI flavor: `Typescript` -- Would you like to setup the project for mobile as well? `yes` + ::: ## 步骤 From 7a72a4fe194c2fd7d9b98612b50d797f72f00b2a Mon Sep 17 00:00:00 2001 From: Ayres Vitor Date: Fri, 29 Aug 2025 01:01:20 -0300 Subject: [PATCH 2/7] Update sidecar-nodejs.mdx --- src/content/docs/learn/sidecar-nodejs.mdx | 99 ++++++++++++++++++++--- 1 file changed, 86 insertions(+), 13 deletions(-) diff --git a/src/content/docs/learn/sidecar-nodejs.mdx b/src/content/docs/learn/sidecar-nodejs.mdx index 4e41f73753..982d3e43bc 100644 --- a/src/content/docs/learn/sidecar-nodejs.mdx +++ b/src/content/docs/learn/sidecar-nodejs.mdx @@ -15,6 +15,16 @@ This example tutorial is applicable for desktop operating systems only. We recommend reading the general [sidecar guide] first for a deeper understanding of how Tauri sidecars work. +## Goals + +- Package a Node.js application to binary. +- Integrate this binary as Tauri sidecar. + +## Implementation Details + +- For this we use the [pkg], but any other tool that can compile JavaScript or Typescript into binary application will work. +- You can also embed Node runtime itself into your Tauri application and ship bundled JavaScript as a resource, but this will ship the JavaScript content as a readable-ish file. + In this example we will create a Node.js application that reads input from the command line [process.argv] and writes output to stdout using [console.log].
You can leverage alternative inter-process communication systems such as a localhost server, stdin/stdout or local sockets. @@ -55,8 +65,8 @@ Without the plugin being initialized and configured the example won't work. - We will compile our Node.js application to a self container binary using [pkg]. - Let's install it as a development dependency: + We will compile our Node.js application to a self container binary using [pkg] among other options. + Let's install it as a development dependency into the new `sidecar-app`: This will create the `sidecar-app/app` binary on Linux and macOS, and a `sidecar-app/app.exe` executable on Windows. - To rename this file to the expected Tauri sidecar filename, we can use the following Node.js script: - ```js + For sidecar applications, we need to ensure that the binary is named in the correct pattern, for more information read [Embedding External Binaries](https://tauri.app/develop/sidecar/) + To rename this file to the expected Tauri sidecar filename and also move to our Tauri project, we can use the following Node.js script as an starting example: + + ```js title="sidecar-app/rename.js" import { execSync } from 'child_process'; import fs from 'fs'; @@ -112,12 +124,42 @@ Without the plugin being initialized and configured the example won't work. if (!targetTriple) { console.error('Failed to determine platform target triple'); } + // TODO: create `src-tauri/binaries` dir fs.renameSync( `app${ext}`, `../src-tauri/binaries/app-${targetTriple}${ext}` ); ``` + And run `node rename.js` from the `sidecar-app` directory. + + At this step the `/src-tauri/binaries` directory should contain the renamed sidecar binary. + +1. ##### Setup plugin-shell permission + +After installing [shell plugin](/plugin/shell/) make sure you configure capabilities + +Note that we use `"args": true` but you can optionally provide an array `["hello"]` + +```json title='src-tauri/capabilities/default.json' +{ + "permissions": [ + "core:default", + "opener:default", + { + "identifier": "shell:allow-execute", + "allow": [ + { + "args": true, + "name": "binaries/app", + "sidecar": true + } + ] + } + ] +} +``` + 1. ##### Configure the Sidecar in the Tauri Application Now that we have our Node.js application ready, we can connect it to our Tauri application @@ -141,32 +183,35 @@ Without the plugin being initialized and configured the example won't work. - Let's execute the `ping` command in the Node.js sidecar directly: + Let's execute the `hello` command in the Node.js sidecar directly: - ```javascript + ```js import { Command } from '@tauri-apps/plugin-shell'; const message = 'Tauri'; - const command = Command.sidecar('binaries/app', ['ping', message]); + const command = Command.sidecar('binaries/app', ['hello', message]); const output = await command.execute(); - const response = output.stdout; + // once everything is configure it should log to browser console: "Hello Tauri" + console.log(output.stdout) ``` - Let's pipe a `ping` Tauri command to the Node.js sidecar: + Let's pipe a `hello` Tauri command to the Node.js sidecar: ```rust + use tauri_plugin_shell::ShellExt; + #[tauri::command] - async fn ping(app: tauri::AppHandle, message: String) -> String { + async fn hello(app: tauri::AppHandle, message: String) -> String { let sidecar_command = app .shell() .sidecar("app") .unwrap() - .arg("ping") + .arg("hello") .arg(message); let output = sidecar_command.output().unwrap(); let response = String::from_utf8(output.stdout).unwrap(); @@ -174,10 +219,38 @@ Without the plugin being initialized and configured the example won't work. } ``` + Register it into `invoke_handler` and call it on frontend with: + + ```js + + import { invoke } from "@tauri-apps/api/core"; + + const message = "Tauri" + console.log(await invoke("hello", { message })) + + ``` + +1. ##### Running + +Lets test it + + + +Open DevTools with F12 (or `Cmd+Option+I` on macOS) and you should see the output of the sidecar command. + +If you find any issues, please open an issue on [GitHub](https://github.com/tauri-apps/tauri-docs). + [sidecar guide]: /develop/sidecar/ From 173b7cf17211029ce2bb8a8cf576479a152fd141 Mon Sep 17 00:00:00 2001 From: Ayres Vitor Date: Fri, 29 Aug 2025 01:12:46 -0300 Subject: [PATCH 3/7] add note about arguments --- src/content/docs/learn/sidecar-nodejs.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/learn/sidecar-nodejs.mdx b/src/content/docs/learn/sidecar-nodejs.mdx index 982d3e43bc..d1b7a3ec7b 100644 --- a/src/content/docs/learn/sidecar-nodejs.mdx +++ b/src/content/docs/learn/sidecar-nodejs.mdx @@ -139,7 +139,7 @@ Without the plugin being initialized and configured the example won't work. After installing [shell plugin](/plugin/shell/) make sure you configure capabilities -Note that we use `"args": true` but you can optionally provide an array `["hello"]` +Note that we use `"args": true` but you can optionally provide an array `["hello"]`, [read more](/develop/sidecar/#passing-arguments). ```json title='src-tauri/capabilities/default.json' { From c98bf3161b860b4deb43b44ef63a0a9bfe27a086 Mon Sep 17 00:00:00 2001 From: Ayres Vitor Date: Fri, 29 Aug 2025 01:22:02 -0300 Subject: [PATCH 4/7] improve script instructions --- src/content/docs/learn/sidecar-nodejs.mdx | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/content/docs/learn/sidecar-nodejs.mdx b/src/content/docs/learn/sidecar-nodejs.mdx index d1b7a3ec7b..0bbb86f8bc 100644 --- a/src/content/docs/learn/sidecar-nodejs.mdx +++ b/src/content/docs/learn/sidecar-nodejs.mdx @@ -100,13 +100,17 @@ Without the plugin being initialized and configured the example won't work. 1. ##### Package the Sidecar - To package our Node.js application to a self contained binary, we can run the following `pkg` command: + To package our Node.js application to a self contained binary, create a script into package.json: - + ```json title="sidecar-app/package.json" + { + "scripts": { + "build": "pkg index.ts --output app" + } + } + ``` + + This will create the `sidecar-app/app` binary on Linux and macOS, and a `sidecar-app/app.exe` executable on Windows. From 9bac859665ba268178fc3e2c05f4b0446b93845c Mon Sep 17 00:00:00 2001 From: Ayres Vitor Date: Fri, 29 Aug 2025 01:25:36 -0300 Subject: [PATCH 5/7] fix rs command example --- src/content/docs/learn/sidecar-nodejs.mdx | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/src/content/docs/learn/sidecar-nodejs.mdx b/src/content/docs/learn/sidecar-nodejs.mdx index 0bbb86f8bc..71f78f7bc0 100644 --- a/src/content/docs/learn/sidecar-nodejs.mdx +++ b/src/content/docs/learn/sidecar-nodejs.mdx @@ -210,16 +210,15 @@ Note that we use `"args": true` but you can optionally provide an array `["hello use tauri_plugin_shell::ShellExt; #[tauri::command] - async fn hello(app: tauri::AppHandle, message: String) -> String { - let sidecar_command = app - .shell() - .sidecar("app") - .unwrap() - .arg("hello") - .arg(message); - let output = sidecar_command.output().unwrap(); - let response = String::from_utf8(output.stdout).unwrap(); - response + async fn hello(app: tauri::AppHandle, cmd: String, message: String) -> String { + let sidecar_command = app + .shell() + .sidecar("app") + .unwrap() + .arg(cmd) + .arg(message); + let output = sidecar_command.output().await.unwrap(); + String::from_utf8(output.stdout).unwrap() } ``` @@ -230,7 +229,7 @@ Note that we use `"args": true` but you can optionally provide an array `["hello import { invoke } from "@tauri-apps/api/core"; const message = "Tauri" - console.log(await invoke("hello", { message })) + console.log(await invoke("hello", { cmd: 'hello', message })) ``` From ace93dd31838a8dbe7226f88b9389ade84746931 Mon Sep 17 00:00:00 2001 From: Ayres Vitor Date: Fri, 29 Aug 2025 01:30:07 -0300 Subject: [PATCH 6/7] format --- src/content/docs/learn/sidecar-nodejs.mdx | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/content/docs/learn/sidecar-nodejs.mdx b/src/content/docs/learn/sidecar-nodejs.mdx index 71f78f7bc0..faba6466a4 100644 --- a/src/content/docs/learn/sidecar-nodejs.mdx +++ b/src/content/docs/learn/sidecar-nodejs.mdx @@ -239,20 +239,20 @@ Note that we use `"args": true` but you can optionally provide an array `["hello 1. ##### Running -Lets test it + Lets test it - + -Open DevTools with F12 (or `Cmd+Option+I` on macOS) and you should see the output of the sidecar command. + Open DevTools with F12 (or `Cmd+Option+I` on macOS) and you should see the output of the sidecar command. -If you find any issues, please open an issue on [GitHub](https://github.com/tauri-apps/tauri-docs). + If you find any issues, please open an issue on [GitHub](https://github.com/tauri-apps/tauri-docs). From 57ab676ace8f082e48721ce82d5a7934d12dd123 Mon Sep 17 00:00:00 2001 From: Ayres Vitor Date: Fri, 29 Aug 2025 01:36:11 -0300 Subject: [PATCH 7/7] format --- src/content/docs/learn/sidecar-nodejs.mdx | 30 +++++++++++------------ 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/src/content/docs/learn/sidecar-nodejs.mdx b/src/content/docs/learn/sidecar-nodejs.mdx index faba6466a4..a8bf9f669b 100644 --- a/src/content/docs/learn/sidecar-nodejs.mdx +++ b/src/content/docs/learn/sidecar-nodejs.mdx @@ -141,28 +141,28 @@ Without the plugin being initialized and configured the example won't work. 1. ##### Setup plugin-shell permission -After installing [shell plugin](/plugin/shell/) make sure you configure capabilities + After installing [shell plugin](/plugin/shell/) make sure you configure capabilities -Note that we use `"args": true` but you can optionally provide an array `["hello"]`, [read more](/develop/sidecar/#passing-arguments). + Note that we use `"args": true` but you can optionally provide an array `["hello"]`, [read more](/develop/sidecar/#passing-arguments). -```json title='src-tauri/capabilities/default.json' -{ - "permissions": [ - "core:default", - "opener:default", + ```json title='src-tauri/capabilities/default.json' { - "identifier": "shell:allow-execute", - "allow": [ + "permissions": [ + "core:default", + "opener:default", { - "args": true, - "name": "binaries/app", - "sidecar": true + "identifier": "shell:allow-execute", + "allow": [ + { + "args": true, + "name": "binaries/app", + "sidecar": true + } + ] } ] } - ] -} -``` + ``` 1. ##### Configure the Sidecar in the Tauri Application