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` + ::: ## 步骤