diff --git a/src/content/docs/learn/sidecar-nodejs.mdx b/src/content/docs/learn/sidecar-nodejs.mdx
index 1cd0552b2d..271ab7c379 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 as a binary.
+- Integrate this binary as a Tauri sidecar.
+
+## Implementation Details
+
+- For this we use the [pkg] tool, but any other tool that can compile JavaScript or Typescript into a binary application will work.
+- You can also embed the Node runtime itself into your Tauri application and ship bundled JavaScript as a resource, but this will ship the JavaScript content as readable-ish files and the runtime is usually larger than a `pkg` packaged application.
+
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.
@@ -35,7 +45,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`
:::
@@ -56,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`:
+ ```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.
- 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 a starting example:
+
+ ```js title="sidecar-app/rename.js"
import { execSync } from 'child_process';
import fs from 'fs';
@@ -113,12 +128,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 the [shell plugin](/plugin/shell/) make sure you configure the required capabilities.
+
+ 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",
+ {
+ "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
@@ -142,43 +187,73 @@ 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 configured it should log "Hello Tauri" in the browser console.
+ 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 {
- let sidecar_command = app
- .shell()
- .sidecar("app")
- .unwrap()
- .arg("ping")
- .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()
}
```
+ Register it in `invoke_handler` and call it in the frontend with:
+
+ ```js
+
+ import { invoke } from "@tauri-apps/api/core";
+
+ const message = "Tauri"
+ console.log(await invoke("hello", { cmd: 'hello', message }))
+
+ ```
+
+1. ##### Running
+
+ Lets test it
+
+
+
+ Open the 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/
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`
+
:::
## 步骤