#How to build sveltekit app apk with tauri ?

96 messages · Page 1 of 1 (latest)

open crane
#

Hello ! I'm looking for how to build my sveltekit app apk with tauri using docker ?

#

i don't find any resource about it

peak sleet
#

There aren't any resources about it (assuming you mean an Android apk)
https://github.com/simonhyll/devcontainer
This devcontainer I've made is a pretty good starting point for setting up a container that can build an Android Tauri app

As for the sveltekit part, that's up to you, shouldn't be any particulars about it beyond the basic desktop setup, the only specifics for mobile is related to running the dev server with what ip you use and what not, but the build itself is the same for android as it is for desktop

open crane
peak sleet
open crane
#

I'm rebuilding it to show you the errors x)

peak sleet
peak sleet
#

When using the alpha it's important to stay up to date 🙂

open crane
#

Are you talking about the CLI? I just copied and pasted the Dockerfile haha

#

I'm going to try to update everything

peak sleet
open crane
#

Oh okay xD By the way, I saw that you were installing pnpm, but shouldn't I use npm for my project?

#

Oh, I didn't say anything x) It's already there

peak sleet
# open crane Oh okay xD By the way, I saw that you were installing pnpm, but shouldn't I use ...

The choice between npm, pnpm, yarn or bun is entirely up to you
But spoiler alert, npm is the wrong choice, you should use either pnpm or yarn, they do literally the same job but faster and with fewer annoying things, like, with npm you need an extra -- to pass options, and you always need to add run

So instead of running npm run tauri build -- --debug for example you can run pnpm tauri build --debug. Plus pnpm is a billion times faster at downloading and installing assets

Yarn is generally easier to use than pnpm and more stable
Pnpm is cooler than yarn and you should use it until it breaks
Bun is even cooler still because it's even faster than the others, like, literally millisecond install times the second time you install a package
NPM is bad, dont use it

All those package managers download packages from the same repository, npmjs.com, they just operate differently client side

open crane
#

Normally I'm more on the backend side 🤣

#

However, I wouldn't hesitate to use Tauri again, it's incredible!

#

I tried this:

FROM tatata

WORKDIR /app

COPY . .

RUN npm install

RUN npm run tauri android build -- --debug

tatata is the devcontainer dockerfile

# 
0.650 > tauri build --debug
0.650 
0.689        Error failed to open Cargo.toml for rewrite: Permission denied (os error 13)
------
Dockerfile:9
#

Okay I fixed it but I have no apk built

peak sleet
open crane
#

It works great thank you! Well now I have a fetch problem that won't take my cookies but I'll find a solution x)

open crane
#

@peak sleet Excuse me, do you have any idea why tauri doesn't support very well the fetch method ?

#

We are not receiving headers in the response

#

Yet if I check the network panel in the desktop app

#

the headers are present

peak sleet
#

Could also be some CORS setting for your server

#

CORS can prevent headers from being sent

open crane
#

Maybe that's why ?

peak sleet
#

On Linux (and Mac I think) the built app has the origin tauri://localhost, while on Windows (I think only?) it's http://tauri.localhost

#

During development it's ofc your dev servers url

open crane
#

maybe my express server refuses when it doesn't come from http?

peak sleet
#

That sounds like the most likely option yep. Add CORS middleware if you havent and for resting purposes allow everything (having no CORS middleware in Express still enforces some stuff)

open crane
#

If I disable CORS my deployment version doesn't work anymore xD

#

I'm trying this, to accept everything:

const app = await NestFactory.create(AppModule);
  app.enableCors({
    origin: true,
    credentials: true,
  });
#

Same :/

Here's how I do my fetch:

try {
        const response = await fetch(`${API_URL}/auth/login`, {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            credentials: 'include',
            body: JSON.stringify({email, password})
        });
        const jsonResponse = await response.json();

        if (!response.ok)
            return Promise.reject(jsonResponse as BackendResponse);
        return Promise.resolve(jsonResponse as BackendResponse);

    } catch (error) {
        throw new Error(`Error fetching user data: ${error}`);
    }
real gulch
#

Do you import fetch from Tauri or are you using the native fetch?

open crane
#

the native one

#

I don't have any import

real gulch
#

And you don't get any errors on your client side?

#

It's just missing response headers?

open crane
#

Wait I show you

#

I have few errors

#

and response headers missing

real gulch
#

If that's the case and the headers that the server receives are what you expect, then it's definitely something to do with how the server handles the request.

peak sleet
real gulch
#

Oh... I thought that screenshot above was from the Network tab for some reason.

open crane
#

I had this:

        const response = await fetch(`${API_URL}/auth/login`, {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            credentials: 'include',
            body: JSON.stringify({email, password})
        });
        console.log('response_headers', response.headers)
        const jsonResponse = await response.json();

        if (!response.ok)
            return Promise.reject(jsonResponse as BackendResponse);
        return Promise.resolve(jsonResponse as BackendResponse);

Isn't that the right solution to show headers?

peak sleet
open crane
#

yes it's an httponly cookie

#

Should I set it to false ?

peak sleet
#

When your API logs you in and sets the HttpOnly cookie, JavaScript cant use it, but every subsequent request you make to that API will automagically have the cookie attached to it

#

It's security best practises

#

You don't use JS to e.g. store the token in LocalStorage

open crane
#

yeah but the credentials include doesn't work

#

So it's not a HttpOnly issue, am I right ?

#

Maybe because of the domain in res.cookie ?

peak sleet
peak sleet
#

The domain you set is the domain fetch will then use for automagically attaching the cookie to all requests going to that domain

open crane
#

yeah, but i'm using the production api

#

on localhost

#

If I start the backend on localhost it works

peak sleet
#

At least afaik

open crane
#

how can I accept localhost origins? Because I couldn't put the ip of all my users who have the mobile app haha

peak sleet
open crane
#

Right now I just want it to work so I can present the functional project to my school tomorrow xDD

#

i try to disable secure in the cookie

peak sleet
#

In that case yea toss that secure out of there, it just enforces that the cookie is only passed to the domain you specified if it's using proper https based communication, which for a school project f*ck it x)

open crane
#

Still the same, I just left the domain because otherwise it doesn't work on the production side sad

# 
res.cookie('access_token', jwt, {
      domain: process.env.COOKIE_DOMAIN ?? 'localhost',
    });
# 
app.enableCors({
    origin: [
      'http://localhost:3000',
      'http://localhost:5173',
      'tauri://localhost',
      'https://lfdp.eu',
      'http://lfdp.eu',
    ],
    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS',
    credentials: true,
  });
#

and headers still empty 😮

peak sleet
open crane
#

empty too

peak sleet
#

And there's absolutely no way you can just email the token to the user and tell them to enter it manually? 😂

open crane
#

xDDD

peak sleet
#

It's 1:21 here atm and my tired humor is at its peak

open crane
#

same for me :x

#

And tomorrow I'm getting up very early so I'm trying to fix it as soon as possible xD

#

And we need a mobile app, otherwise it's 0 😮

peak sleet
#

Oh dear, Tauri being in alpha for mobile might be an issue then 😅
But yea at this point the only feasible way for me to debug this would be to clone your repo, backend and frontend, and actually do hands on debugging, and that's so, so much effort 😩
Based on everything I can think of there's nothing that should be preventing fetch from receiving headers, I did look it up and Set-Cookie headers shouldn't be showing in response.headers, but they should definitely be showing in document.cookie. So afaik your backend is correctly responding with a Set-Cookie header, it's not limiting it whatsoever aside from the domain part, your webview should be receiving the cookie

The last idea I have is CSP settings client side

open crane
#

Wait now the apk is not building anymore sad_kekw

# 
553.6 error[E0063]: missing field `license` in initializer of `PackageSettings`
553.6    --> /home/vscode/.cargo/registry/src/index.crates.io-6f17d22bba15001f/tauri-cli-2.0.0-alpha.20/src/interface/rust.rs:886:28
553.6     |
553.6 886 |     let package_settings = PackageSettings {
553.6     |                            ^^^^^^^^^^^^^^^ missing `license`
553.6 
553.6 error[E0063]: missing field `files` in initializer of `MacOsSettings`
553.6     --> /home/vscode/.cargo/registry/src/index.crates.io-6f17d22bba15001f/tauri-cli-2.0.0-alpha.20/src/interface/rust.rs:1207:12
553.6      |
553.6 1207 |     macos: MacOsSettings {
553.6      |            ^^^^^^^^^^^^^ missing `files`
553.6 
554.1 For more information about this error, try `rustc --explain E0063`.
554.2 error: could not compile `tauri-cli` (lib) due to 2 previous errors
554.2 warning: build failed, waiting for other jobs to finish...
555.2 error: failed to compile `tauri-cli v2.0.0-alpha.20`, intermediate artifacts can be found at `/tmp/cargo-installtG35IT`.
555.2 To reuse those artifacts with a future compilation, set the environment variable `CARGO_TARGET_DIR` to that path.
------
Dockerfile:189
--------------------
open crane