Need help connecting node backend.

[ZaidSunasra]

I have a react frontend and a node backend which has routes, middleware's, etc. How do I connect my frontend with node backend in tauri. Basically, I want when the app opens the server should start and on closing the app it should get killed/closed. I read the doc of using node as a sidecar but I could not get what I needed.

[FabianLars]

I read the doc of using node as a sidecar but I could not get what I needed.

That's what i was about to link 🙃 Do you think you can explain your issues with the sidecar guides?

[ZaidSunasra]

I followed the steps of the doc. Made an exe and placed it in the binary folder with the correct name which is name-target_triple.exe. Now I am trying to execute the sidecar with JavaScript. But here I am facing problem as I am not getting where to implement that JavaScript code.

[FabianLars]

hmm yeah, that depends on your frontend stack. Are you using vanilla js or any framework like react?

[ZaidSunasra]

I am using react. It would be good if you outline step by step process on how to use node.js as a side car.

[FabianLars]

In that case you can either add step 5 https://v2.tauri.app/learn/sidecar-nodejs/#execute-the-sidecar to index.ts / main.ts (using command.spawn() instead of execute) if you don't need it connected to react (like useState or whatever). Or in your app.ts file you can add it with an onMount hook for example like this

// Using example from https://v2.tauri.app/reference/javascript/shell/#example-1
const App = () => {
  useEffect(() => {
    const command = Command.sidecar('binaries/app', ["args", "if", "any"]);
    command.on('close', data => {
      console.log(`command finished with code ${data.code} and signal ${data.signal}`)
    });
    command.on('error', error => console.error(`command error: "${error}"`));
    command.stdout.on('data', line => console.log(`command stdout: "${line}"`));
    command.stderr.on('data', line => console.log(`command stderr: "${line}"`));

    const child = await command.spawn();
}, [])
}

But really, just ask google etc how to run code once at the start of a react app. The sidecar code will always be pretty much the same.

[ZaidSunasra]

Thank you very much. It worked. I used the first method of adding to main.tsx.