Forem

Cover image for Adding Node.js server to Tauri App as a sidecar
Zaid Sunasra
Zaid Sunasra

Posted on • Edited on

1 1 1 1 1

Adding Node.js server to Tauri App as a sidecar

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Packaging file_name.js into an .exe

pkg file_name.js --targets node18-win-x64
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Image of host value

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"
    ]
  }
}
Enter fullscreen mode Exit fullscreen mode

Note: Just add the file name.

Instruction

3. Run the following commands:

npm run tauri add shell
Enter fullscreen mode Exit fullscreen mode
npm install @tauri-apps/plugin-shell 
Enter fullscreen mode Exit fullscreen mode

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"
  ]
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

6. Run the following command

npm run tauri dev
Enter fullscreen mode Exit fullscreen mode

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.

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay