Adding Node.js server to Tauri App as a sidecar

Zaid Sunasra — Sat, 11 Jan 2025 19:35:48 +0000

The Journey of Integrating Node.js as a Sidecar in Tauri

In this article, I share my experience tackling a challenge many Tauri developers might encounter—connecting a Node.js server as a sidecar in a Tauri app. Initially, the process seemed straightforward, but I ran into multiple roadblocks. The lack of comprehensive resources or clear solutions online made it an even steeper climb.

After trying various approaches, I turned to the Tauri GitHub discussions for help. It was there that a maintainer, Fabian Lars, stepped in and provided guidance that clarified the situation and helped resolve the issue. This article aims to highlight the problem I faced, share insights from the discussion, and document the lessons I learned along the way.

Create Tauri App

Note: Make sure you have the prerequisites for using Tauri installed.
Check pre-requisites

npm create tauri-app@latest

Or visit docs

Create a Nodejs package

The following commands will convert your node.js file into an executable(.exe). Replace file_name with the name of your node.js file.

npm install -g pkg

Packaging file_name.js into an .exe

pkg file_name.js --targets node18-win-x64

The above will crate an .exe file for windows.
For Linux: node18-linux-x64
For MacOS: node18-macos-x64

To create 3 .exe at a time use following command:

pkg index.js --targets node18-win-x64,node18-linux-x64,node18-macos-x64

This will create an file_name.exe file.

Note- But we need to rename the file as it is required for Tauri to identify it as a sidecar. Name format required for .exe file is: any_name-${targetTriple}${extension}

You can find your current platform’s -$TARGET_TRIPLE suffix by looking at the host: property by running the following code in terminal:

rustc -Vv

Copy the host property from above command and rename file_name.js
to file_name.js-host_property_value.exe

Example: file_name-x86_64-pc-windows-msvc.exe

Configuring our main file

1. Go to src-tauri. Create a folder name binaries. In the folder place the above .exe created.
2. Go to src-tauri/tauri.conf.json

{
  "bundle": {
    "externalBin": [
      "binaries/file_name"
    ]
  }
}

Note: Just add the file name.

3. Run the following commands:

npm run tauri add shell

npm install @tauri-apps/plugin-shell

4. Copy the following code to src-tauri/capabilities/default.json
Note: You will see warning in this file saying folder not present. Ignore the warnings as the folder will be generated once you follow all the steps.

 "permissions": [
    "core:default",
    "opener:default",
    "shell:default",
    {
      "identifier": "shell:allow-spawn",
      "allow": [
        {
          "name": "binaries/file_name",
          "sidecar": true
        }
      ]
    },
    "shell:allow-open"
  ]

5. Add the following code in src/main.tsx or src/main.jsx

import { Command } from '@tauri-apps/plugin-shell';


const command = Command.sidecar('binaries/file_name', ["args", "if", "any"]);
await command.spawn();

6. Run the following command

npm run tauri dev

You have successfully integrated your server into the Tauri app. To verify the setup, open the app, and it should prompt for permission to run Node.js. Alternatively, you can check the server's status by visiting localhost and the port it is running on in your browser.

DEV Community: Zaid Sunasra

Adding Node.js server to Tauri App as a sidecar

The Journey of Integrating Node.js as a Sidecar in Tauri

Create Tauri App

Create a Nodejs package

Configuring our main file