[SLOVED] How do i use the JS api? | Tauri Apps | Page 1

mild star Dec 29, 2023, 7:55 AM

#

When i try to use the JS api like this for example:

import { exit } from '@tauri-apps/api/process';
import { getName } from '@tauri-apps/api/app';
console.log(getName);

async function exitA() 
{
  await exit(0);
}

i get

[Error] SyntaxError: Unexpected token '{'. import call expects one or two arguments.
    (anonymous function) (main.mjs:1)

I've ran cargo add tauri-api(idk if i should do it but i did it), ran npm install --save-dev @tauri-apps/api
enabled the api in tauri.conf.json like

"tauri": {
    "allowlist": {
      "all": true
    },

(I use cargo for building and running the app)

ashen tapir Dec 29, 2023, 11:16 AM

#

Are you using a bundler of some kind or is this project 'vanilla' (no bundler) JS?

mild star Dec 29, 2023, 12:41 PM

#

vanilla html CSS and js

ashen tapir Dec 29, 2023, 2:09 PM

#

I believe in that case you have to add type="module" to the script element.

mild star Dec 29, 2023, 3:24 PM

#

then i get

[Error] TypeError: Module name, '@tauri-apps/api/process' does not resolve to a valid URL.

marble gyro Dec 29, 2023, 3:27 PM

#

To use external modules like that you'll need to either setup an import map or use a bundler - I'd highly recommend just getting a simple vite setup going

mild star Dec 29, 2023, 3:38 PM

#

ok

mild star Dec 29, 2023, 6:32 PM

#

soo... i followed the vite tutorial from the site and it's not working....

ashen tapir Dec 29, 2023, 6:36 PM

#

We need more information than "it's not working." Need to see your files, the error you're getting or a description of the undesired exhibited behavior.

mild star Dec 29, 2023, 6:41 PM

#

well followed the yarn tutorial
here's my folder structure

.
├── frontend
│   ├── index.html
│   ├── node_modules
│   │   ├── @esbuild
│   │   ├── esbuild
│   │   ├── nanoid
│   │   ├── picocolors
│   │   ├── postcss
│   │   ├── @rollup
│   │   ├── rollup
│   │   ├── source-map-js
│   │   ├── typescript
│   │   └── vite
│   ├── package.json
│   ├── public
│   │   └── vite.svg
│   ├── src
│   │   ├── counter.ts
│   │   ├── main.ts
│   │   ├── style.css
│   │   ├── typescript.svg
│   │   └── vite-env.d.ts
│   ├── tsconfig.json
│   ├── vite.config.ts
│   └── yarn.lock
└── src-tauri
    ├── build.rs
    ├── Cargo.toml
    ├── icons
    ├── package.json
    ├── src
    │   └── main.rs
    └── tauri.conf.json

#

when i run yarn tauri dev i get

yarn run v1.22.21
error Couldn't find a package.json file in "/home/pizza/projects/rust/test2"
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

#

tried running it inside ./src-tauri too and got

$ yarn tauri dev
yarn run v1.22.21
warning package.json: No license field
$ tauri dev
/bin/sh: line 1: tauri: command not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

ashen tapir Dec 29, 2023, 6:44 PM

#

Why would you run a node-based command in the Rust source? Your frontend directory has a package.json, try in there.

mild star Dec 29, 2023, 6:45 PM

#

got

$ yarn tauri dev
yarn run v1.22.21
error Command "tauri" not found.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

ashen tapir Dec 29, 2023, 6:45 PM

#

Right, do you have that script defined in your package.json?

#

Wait, why is there a package.json in the src-tauri? 🤔 I've not seen that before, will have to check out the tutorial you mentioned.

mild star Dec 29, 2023, 6:46 PM

#

ashen tapir Wait, why is there a package.json in the src-tauri? 🤔 I've not seen that before...

well i added it

#

or yarn did it

#

yeah i added it

#

anyways i added "tauri": "tauri", to the package.json in frontend dir and got

$ yarn tauri dev 
yarn run v1.22.21
$ tauri dev
/bin/sh: line 1: tauri: command not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

ashen tapir Dec 29, 2023, 6:48 PM

#

tauri isn't a standalone thing like that

#

That's why all of the tutorials have you start it via npm, yarn, etc

mild star Dec 29, 2023, 6:48 PM

#

it's with lighter color in the terminal

#

ashen tapir Dec 29, 2023, 6:49 PM

#

Does the tutorial tell you to run tauri dev like that or does it have you use npm/yarn?

mild star Dec 29, 2023, 6:50 PM

#

yeah i run yarn tauri dev

mild star Dec 29, 2023, 6:50 PM

#

mild star

here's a better ss

ashen tapir Dec 29, 2023, 6:51 PM

#

Have you yarn install-ed?

#

(or whatever the correct yarn subcommand is)

#

Please share the full contents of your frontend package.json

mild star Dec 29, 2023, 6:53 PM

#

oh forgot to run yarn add -D @tauri-apps/cli
now after running yarn tauri dev i get

$ yarn tauri dev             
yarn run v1.22.21
$ tauri dev
thread '<unnamed>' panicked at src/helpers/app_paths.rs:85:5:
Couldn't recognize the current folder as a Tauri project. It must contain a `tauri.conf.json`, `tauri.conf.json5` or `Tauri.toml` file in any subfolder.
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace
Done in 0.18s.

ashen tapir Dec 29, 2023, 6:53 PM

#

Do you have a package.json in your project's root?

mild star Dec 29, 2023, 6:54 PM

#

uh no

ashen tapir Dec 29, 2023, 6:55 PM

#

Run that yarn command in the directory that contains your tauri conf file, we'll see what that does.

mild star Dec 29, 2023, 6:56 PM

#

$ yarn tauri dev
yarn run v1.22.21
warning package.json: No license field
warning ../package.json: No license field
$ tauri dev
     Running BeforeDevCommand (`yarn run dev`)
warning package.json: No license field
warning ../package.json: No license field
error Command "dev" not found.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
       Error The "beforeDevCommand" terminated with a non-zero status code.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

ashen tapir Dec 29, 2023, 6:58 PM

#

Ok at this point I'm lost. I've never found yarn to be easy to use. 🤷‍♂️

mild star Dec 29, 2023, 6:58 PM

#

i'll try tomorrow with npm

#

i have to go now

marble gyro Dec 30, 2023, 3:08 AM

#

The 'vanilla' option of the tauri CLI can initialise an empty vite setup - i'd just create a new project and move everything over

mild star Dec 30, 2023, 8:19 AM

#

so i tried creating it with npm
when i run the command in the root dir i get this

$ npm run tauri dev 

> tauri
> tauri dev

     Running BeforeDevCommand (`npm run dev`)
npm ERR! Missing script: "dev"
npm ERR! 
npm ERR! To see a list of scripts, run:
npm ERR!   npm run

npm ERR! A complete log of this run can be found in: /home/pizza/.npm/_logs/2023-12-30T08_17_36_611Z-debug-0.log
       Error The "beforeDevCommand" terminated with a non-zero status code.

#

here's the structure

marble gyro Dec 30, 2023, 8:26 AM

#

That's probably because your ui is in ui/ and not at the root, so your beforeDevCommand will probably need to cd into ../ui and then run npm run dev, since dev isn't available in the root package.json

mild star Dec 30, 2023, 8:27 AM

#

doesn't the distDir tell it where to run?

marble gyro Dec 30, 2023, 8:29 AM

#

no, that's where tauri expects the results of npm run build to be when building your app: https://tauri.app/v1/api/config/#buildconfig.distdir

Configuration | Tauri Apps

The Tauri configuration object. It is read from a file where you can define your frontend assets, configure the bundler, enable the app updater, define a system tray, enable APIs via the allowlist and more.

mild star Dec 30, 2023, 8:36 AM

#

so i moved the contents of the ui folder and got

$ npm run tauri dev

> [email protected] tauri
> tauri dev

sh: line 1: tauri: command not found

marble gyro Dec 30, 2023, 8:41 AM

#

I can't really help without knowing where you moved the contents to or where you're running that command from - did you try making the beforeDevCommand cd into ui before running npm run dev as i mentioned?

mild star Dec 30, 2023, 8:43 AM

#

mild star here's the structure

so i moved the contents of the ui dir to the project root and im running from there

marble gyro Dec 30, 2023, 8:44 AM

#

Can you paste your package.json plz?

mild star Dec 30, 2023, 8:46 AM

#

from the project root

{
  "scripts": {
    "tauri": "tauri"
  },
  "devDependencies": {
    "@tauri-apps/cli": "^1.5.9"
  }
}

from the ui dir

{
  "name": "ui",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "tauri": "tauri",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "typescript": "^5.2.2",
    "vite": "^5.0.10"
  }
}

marble gyro Dec 30, 2023, 8:48 AM

#

Ah you still have the ui dir but nothing in it - both those dev and tauri scripts need to be in the root package.json (since that's where src and the configs are)

#

Then when tauri runs beforeDevCommand it should be able to look upwards and find the dev script

mild star Dec 30, 2023, 8:51 AM

#

it tells me it can't vite command

marble gyro Dec 30, 2023, 8:51 AM

#

Then you'll need to install vite at the root too - may as well move the whole package.json into the root

#

That's the setup that default tauri projects use

mild star Dec 30, 2023, 8:53 AM

#

ran npm install vite and now tauri command is not found

marble gyro Dec 30, 2023, 8:53 AM

#

still need the tauri cli package as a dependency

mild star Dec 30, 2023, 8:54 AM

#

it started building now

marble gyro Dec 30, 2023, 8:57 AM

#

what's important to remember is that beforeDevCommand is ran in the same folder as your tauri.conf.json, and distDir looks for your frontend's production build - as long as you keep that in mind you should be fine to move stuff around

mild star Dec 30, 2023, 8:57 AM

#

well it's working now

marble gyro Dec 30, 2023, 8:58 AM

#

yeah i just mean for if you want to put your frontend back in ui/

mild star Dec 30, 2023, 9:32 AM

#

so how do i build the app for release?
I have a alias that runs RUSTFLAGS=--remap-path-prefix=/home/$USER=/ cargo build
i know i need to run npm run tauri build but how do i run it with the RUSTFLAGS thing?

marble gyro Dec 30, 2023, 9:35 AM

#

just stick it in front of the npm build command

mild star Dec 30, 2023, 9:36 AM

#

ok

mild star Dec 30, 2023, 11:09 AM

#

when trying to create new window using the rust backed i get this error when i press the button

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   
    <title>Vite + TS</title>
  </head>
  <body>
    <script type="module">
      import { invoke } from "@tauri-apps/api";

      async function press()
      {
          await invoke("newwin");
      }
    </script>
    <div id="app"></div>
    <h1>Hi window 1</h1>
    <button onclick="press()">new window</button> <!-- can't find press() -->
  </body>
</html>

[0;31m[Error][0;0m ReferenceError: Can't find variable: press
    onclick (localhost:15)

marble gyro Dec 30, 2023, 11:46 AM

#

do some googling about calling js functions from html, that's not a tauri problem

mild star Dec 30, 2023, 12:43 PM

#

had to add window.press = press;

#[SLOVED] How do i use the JS api?