Create a native application window for preferences? | Tauri Apps | Page 1

formal lava Jun 30, 2023, 11:47 AM

#

js/ts files alone are not enough as a windows source
browsers don't understand typescript, tsx even less so
that's why Settings.tsx doesn't work.

You'll have to either go for a multi-page app https://vitejs.dev/guide/build.html#multi-page-app or use a router (i'd recommend that for a start) and have the settings page be a separate route then you can use something like /Settings as the url (depending on your router config ofc)

#

That's for the window itself, now to spawn it on menu click, you'll have to use system tray events in which you do the WindowBuilder stuff, something like this https://github.com/tauri-apps/tauri/blob/b02fc90f450ff9e9d8a35ee55dc1beced4957869/examples/api/src-tauri/src/main.rs#L134-L139

wind pewter Jul 2, 2023, 2:14 PM

#

formal lava 1) js/ts files alone are not enough as a windows source 2) browsers don't unders...

just to ellborate on this I would modify the vite.config.js like so // vite.config.js ... rollupOptions: { input: { main: resolve(__dirname, 'main.tsx'), settings: resolve(__dirname, 'settings.tsx'), }, },] .. }) which seems to compile without errors

#

wish there was 1 example of tauri implementing calling a seperate window for preferences or any other window for that matter

#

Then use a /src/Settings.tx with: ```import React from 'react';

export default function Settings(){
return (
<>
<div>
settings window
</div>
</>
);
}

#

i only see the main content of the main.tsx that gets loaded true my app.tsx what am i missing can't be that hard?

formal lava Jul 2, 2023, 2:47 PM

#

i'm surprised that this compiles without errors to be honest

#

it expects different html files as entry points, not just javascript

wind pewter Jul 2, 2023, 2:50 PM

#

im not quite sure this was in the vite config i followed that exactly

formal lava Jul 2, 2023, 2:51 PM

#

what vite config did you follow?

#

not the one i linked

wind pewter Jul 2, 2023, 2:51 PM

#

the one from your link the official one in the docs

formal lava Jul 2, 2023, 2:53 PM

#

btw i deleted your messages in general, let's keep the convo here

#

so anyway, you will need 2 html files, the default one and then a settings.html file for example (or settings/index.html if you prefer or whatever)

wind pewter Jul 2, 2023, 2:54 PM

#

but im using .tsx as file extension? im using react with vite

#

if i define them like your example i get an error that __dirname is not existant

formal lava Jul 2, 2023, 2:54 PM

#

yes, but typescript/javascript is not your entry file

#

you must have a html file for the multi-page mode to work

#

it looks basically the same as your existing index.html file (which btw is your main entry point)

wind pewter Jul 2, 2023, 2:55 PM

#

ah nevermind im messing things up. it works like this yes

formal lava Jul 2, 2023, 2:55 PM

#

formal lava it looks basically the same as your existing index.html file (which btw is your ...

but of course that second index.html file loads the "new" root instead of the same one index.html loads

wind pewter Jul 2, 2023, 2:55 PM

#

I have them defined like rollupOptions: { input: { main: resolve(__dirname, 'index.html'), settings: resolve(__dirname, 'settings.html'), }, }, now

formal lava Jul 2, 2023, 2:55 PM

#

yea

wind pewter Jul 2, 2023, 2:56 PM

#

strange thing, if i go to localhost:1420/settings i should see the contents of my Settings.tsx component not? and it does not

#

using the web version not the tauri dev version

formal lava Jul 2, 2023, 2:56 PM

#

no. can you give me a few minutes until i'm back at my pc? I will just show you what i mean with the "new root" stuff

#

but basically you duplicate the stuff you have for your main app, including the react createRoot stuff

wind pewter Jul 2, 2023, 2:58 PM

#

really appreciated FabianLars im a bit confused

formal lava Jul 2, 2023, 2:58 PM

#

i need like half an hour but i think this video is pretty good: https://www.youtube.com/watch?v=STeKBm67l6M, at least the first 2 minutes. the rest is about the vite config which you already have.

wind pewter Jul 2, 2023, 3:10 PM

#

ok that makes lots of sense, but following that tutorial exactly still doesent make it work i think tauri perhaps needs some different config lets see

formal lava Jul 2, 2023, 3:11 PM

#

yeah, you'll have to use settings.html as the url of the second window, did you do that?

wind pewter Jul 2, 2023, 3:12 PM

#

i followed along exactly but still a mistake i think. config is now ```import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { resolve } from 'path'

const root = resolve(__dirname, 'src');
const outDir = resolve(__dirname, 'dist');

// https://vitejs.dev/config/
export default defineConfig(async () => ({
root,
plugins: [react()],

// Vite options tailored for Tauri development and only applied in tauri dev or tauri build
// prevent vite from obscuring rust errors
clearScreen: false,
// tauri expects a fixed port, fail if that port is not available
server: {
port: 1420,
strictPort: true,
},
// to make use of TAURI_DEBUG and other env variables
// https://tauri.studio/v1/api/config#buildconfig.beforedevcommand
envPrefix: ["VITE_", "TAURI_"],
build: {
outDir,
emptyOutDir: true,
// Tauri supports es2021
target: process.env.TAURI_PLATFORM == "windows" ? "chrome105" : "safari13",
// don't minify for debug builds
minify: !process.env.TAURI_DEBUG ? "esbuild" : false,
// produce sourcemaps for debug builds
sourcemap: !!process.env.TAURI_DEBUG,
rollupOptions: {
input: {
main: resolve(root, 'main.html'),
settings: resolve(root, 'settings', 'index.html'),
},
},
},
}));

#

and this structure

#

ah nevermind again a mistake

#

corrected error but white page is only output build goes ok now

#

i see you use the html as entry point in the "router" then it just loads the .tsx component there with ```<html>
<head>
</head>
<body>

#

and in settings.tsx ```import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<React.StrictMode>
<h1>Welcome to the settings page</h1>
</React.StrictMode>,
document.getElementById('root')
);

#

probably not fully correct. I wonder about the App.tsx which seems not loaded at all now

formal lava Jul 2, 2023, 3:19 PM

#

well, you moved the main.html file into the src dir, did you also change its <script> thingy to reflect that?

#

for example, by default it was <script type="module" src="/src/main.tsx"></script> but now it has to be <script type="module" src="./main.tsx"></script> or something

wind pewter Jul 2, 2023, 3:19 PM

#

my main.html has a <script type="module" src="./main.tsx"></script>

formal lava Jul 2, 2023, 3:20 PM

#

are there any errors in the devtools console? (right click on the window -> inspect) should also be visible in the browser if the devserver is running.

wind pewter Jul 2, 2023, 3:22 PM

#

no nothing and only a white page. build gives this vite v4.2.1 building for production... ✓ 38 modules transformed. ../dist/settings/index.html 0.22 kB ../dist/main.html 0.28 kB ../dist/assets/main-9647ac61.css 1.32 kB │ gzip: 0.65 kB ../dist/assets/settings-3467d3b1.js 0.17 kB │ gzip: 0.16 kB ../dist/assets/main-615917f3.js 1.11 kB │ gzip: 0.65 kB ../dist/assets/index-b872d324.js 142.76 kB │ gzip: 45.82 kB

#

I wonder if the modified vite config from the video is correct with this export default defineConfig(async () => ({ root, plugins: [react()],

#

or the build section build: { outDir, emptyOutDir: true, // Tauri supports es2021 target: process.env.TAURI_PLATFORM == "windows" ? "chrome105" : "safari13", // don't minify for debug builds minify: !process.env.TAURI_DEBUG ? "esbuild" : false, // produce sourcemaps for debug builds sourcemap: !!process.env.TAURI_DEBUG, rollupOptions: { input: { main: resolve(root, 'main.html'), settings: resolve(root, 'settings', 'index.html'), }, }, },

formal lava Jul 2, 2023, 3:26 PM

#

well, it looks correct (even tho there were unnecessary changes), and the build output does contain all the correct files so i don't really know what's going wrong

wind pewter Jul 2, 2023, 3:26 PM

#

i see the video has an repro too missed that so i copy the exact code over. think i have made some mistakes he did not show

#

i missed this line ``` document.getElementById('root')

#

but still white page 🤕

formal lava Jul 2, 2023, 3:29 PM

#

in dev or build mode?

#

and the settings page shows correctly?

wind pewter Jul 2, 2023, 3:31 PM

#

pnpm dev i run

#

no all white pages, i copyed and triple checked his example repro but it makes no difference

#

of course his repro works i cloned and tested it 😅

#

its more a vite thing thank your pointing me in the right direction have to figure this out not really tauri related so far

#

very strange copying every file over it loads the index.html in /src/ but /settings still shows that content and not my settings/index.html i double checked theres a hello to settings page text.

#

there is no tauri example with multipages setup? i must overlook something

formal lava Jul 2, 2023, 5:13 PM

#

https://github.com/FabianLars/tauri-multipage-react

#

this is the version with the least amount of changes (and imo easiest type of changes) compared to the base create-tauri-app react template

#

what i did was:

pnpm create tauri-app selecting react+typescript
change the vite config to include this: ```ts
rollupOptions: {
input: {
main: resolve(__dirname, 'index.html'),
settings: resolve(__dirname, 'settings.html')
}
}

3) add a settings.html file at the root which simply loads src/settings.tsx: <https://github.com/FabianLars/tauri-multipage-react/blob/main/settings.html>
4) create the settings.tsx which is basically the same as main.tsx (i thought about naming it main-settings.tsx to not confuse it with a component source file): <https://github.com/FabianLars/tauri-multipage-react/blob/main/src/settings.tsx>
5) Use `settings.html` in `a` elements' href attributes to go to that page

wind pewter Jul 2, 2023, 6:43 PM

#

ah right i see now the mistake i think, my settings html was inside /src folder just like the example from the video

#

🙏 🙏 big thanks i probably had not figured it out that was the problem

formal lava Jul 2, 2023, 6:44 PM

#

i mean, you can make it work inside the src dir too, but i wanted to keep it as simple as possible

wind pewter Jul 2, 2023, 6:44 PM

#

it feels strange thougt that settings.html has to be outside the src folder. normally all source application files are in /src/ as im used to

formal lava Jul 2, 2023, 6:44 PM

#

in vite the index html file is always outside of the src folder by default

#

i agree though. it took me a while to get used to that too

wind pewter Jul 2, 2023, 6:46 PM

#

it still fails on my new repro when i copy your modifications, i try just to clone your repro dont get this simplicity gets me doubt my skills

#

i did start from scratch like you and did exactly those changes

#

arghh! i did /settings

#

but it has to be settings.html

#

wtf.. i totally missed that ( i noticed when i clicked the link in your main app intro text )

#

im so used to /settings that i not even ever thought it should have been .html :\

formal lava Jul 2, 2023, 6:50 PM

#

yeah i did that same mistake which is why i mentioned it as step 5 :D

wind pewter Jul 2, 2023, 6:51 PM

#

so basically tauri loads well vite loads the .html that in itself loads the settings.tsx file

#

its a strange way of workings that im not used to at all but then i have never used vite.

formal lava Jul 2, 2023, 6:52 PM

#

the thing is

#

you basically have 2 react apps here, settings.html and main.html/index.html are doing effectively the same thing, both with their own react app.

wind pewter Jul 2, 2023, 6:52 PM

#

well at leat then i can finally try to get a tray implemented with a temperature next to it and a seperate window for preferences. :\ hope that goes a bit more smooth

formal lava Jul 2, 2023, 6:53 PM

#

wind pewter its a strange way of workings that im not used to at all but then i have never u...

which is why i recommended a normal router in my very first message because that's more straight forward for many people.

wind pewter Jul 2, 2023, 6:54 PM

#

yes im a bit stubborn i should better follow your directions on that. sorry about that.

#

i reviewed both and the non normal route seemed more easy better documented 😅

formal lava Jul 2, 2023, 6:54 PM

#

wind pewter yes im a bit stubborn i should better follow your directions on that. sorry abou...

i mean, in the end you have something working now :D

wind pewter Jul 2, 2023, 6:55 PM

#

well anyway its a good learn curve using new tools will bring breaking methods in working that could s* you quite bad

#

many thank. do you have some 'buy me a coffee' link or something similar?

#

i think i study some more examples probably i place the html files in a pages or routes folder to get things up a bit more clean

formal lava Jul 2, 2023, 6:56 PM

#

wind pewter many thank. do you have some 'buy me a coffee' link or something similar?

Nope, thanks for the thought tho :)

wind pewter Jul 2, 2023, 6:59 PM

#

still strange those .html and .tsx files together. is that how vite always works?

#

i also looked at adding next to tauri had some good examples but it seems to be just overkill and another layer of debugging for a very simple app in the end

formal lava Jul 2, 2023, 7:01 PM

#

wind pewter still strange those .html and .tsx files together. is that how vite always works...

This is how every single frontend works. The browsers need a html file. But having multiple html files is indeed pretty rare, and also pretty rare in vitejs in the context of the multi-page app mode. with that larst part i mean the multi-page app mode isn't often used, multiple html pages are totally normal for vanillajs in which they see heavy used.

#

Apart from that vite is pretty similar to for example create-react-app where you'd normally go for react-router etc

#

or even similar to nextjs but instead of having a file based router you have a code based router (react-router), or multiple react apps (multi page mode). the latter is pretty rare

#

All that said, Tauri is a bit of a special case, because it's not rare to have multiple completely different windows, while in normal webdev you often only have a single spa or something (and ofc single tab / window)

wind pewter Jul 2, 2023, 7:03 PM

#

if i where to place those "routes" in a folder like this ( im used to this in remix it is this way ) still looks odd but it is what it is.

#

not sure if the main.tsx is mandatory or i can rename it to index, makes more sense to me though

wind pewter Jul 2, 2023, 7:03 PM

#

formal lava Apart from that vite is pretty similar to for example create-react-app where you...

it does make sense yes

formal lava Jul 2, 2023, 7:04 PM

#

wind pewter not sure if the main.tsx is mandatory or i can rename it to index, makes more se...

you can rename it as long as you update the import in the html file too

#

i'm somewhat sure create-tauri-app names it main.html but create-vite names it index.html, not sure tho, and no idea why the hell we use main.html

wind pewter Jul 2, 2023, 7:05 PM

#

yeah it seems if one renames it will not find the entry point anymore and is just white screen again ;P

formal lava Jul 2, 2023, 7:09 PM

#

yeah, as i said, gotta update the imports. If you rename main.tsx you need to update main.html
If you rename main.html you need to update the vite config

#

i hope i didn't miss anything 😂

#

and of course the a href links too

wind pewter Jul 2, 2023, 7:10 PM

#

you cannot rename main.tsx but you can rename main.html to index.html or anything, i keep simple just put all in /src/ would you care to put me in right direction regarding the original question?

#

i haved defined the windows like so "windows": [ { "label": "Main", "title": "Tauri - Main", "fullscreen": false, "tabbingIdentifier": "Main", "height": 450, "width": 300, "decorations": false }, { "label": "settings", "title": "Settings", "titleBarStyle": "Overlay", "hiddenTitle": true, "fullscreen": false, "tabbingIdentifier": "settings", "width": 600, "height": 400 } ] now with this multi page in place i have the foundation to build that.

#

and i would need to disable the main window regular view it has to be tray only i had that before in my old repro so can port it over

#

i think to keep the questions on topic i should first create a link to load a new window with the route settings.html loaded. I had some code before but think it was probably incorrect

#

i follow this one, would probably be correct: https://tauri.app/v1/guides/features/multiwindow/

Multiwindow | Tauri Apps

Manage multiple windows on a single application.

formal lava Jul 2, 2023, 7:14 PM

#

wind pewter you cannot rename main.tsx but you can rename main.html to index.html or anythin...

yes you can, i just did :D anyway, back to topic

wind pewter Jul 2, 2023, 7:17 PM

#

if i where to use an event on the tray to load the seperate window i guess i go for the ```Create a window in JavaScript

Using the Tauri API you can easily create a window at runtime by importing the WebviewWindow class.``` ?

#

i must admit its a bit danting with all the options to do single things ;p

formal lava Jul 2, 2023, 7:18 PM

#

the settings window will be opened from the tray icon menu right? In this case you'll need rust. If you want to open it from the main window, using rust is still possible, but javascript is easier

wind pewter Jul 2, 2023, 7:19 PM

#

yes it should be opened true the settings menu option in the tray i try to be as native as possible or just personal preference, i want to mimic the osx toolbar app structure as much as possible.

formal lava Jul 2, 2023, 7:20 PM

#

formal lava That's for the window itself, now to spawn it on menu click, you'll have to use ...

then we're basically back at this ^

#

that expects you to not have the window configured in tauri.conf.json though, creating it from scratch

#

if you always want to have the window around (and consuming system resources) so that it starts faster, declaring it in tauri.conf with "visibile": false would be the way to go. then you'll just show() it on demand

wind pewter Jul 2, 2023, 7:21 PM

#

allright yes i had a method for that and was wondering before why i duplicated the config window definition

#

it doesent have to be in the background its just incidental and on request

#

really helpfull i dont know if i would figure this out myself so easy to make those mistakes. so 1. remove the window config for settings only the main window config stays.

#

then i need to implement that tray package you posted in the other post. and add that event listener to trigger the settings menu with a custom tauri command

#

am i on track with my thoughts like that ;p

#

i should have posted 1 simple question outlining my problem - dident knew it would overlap so much.

formal lava Jul 2, 2023, 7:28 PM

#

wind pewter am i on track with my thoughts like that ;p

yes, bus i would start with tauri's built-in systemtray to get a feeling for tauri's flow and once that works switch to the package for the text support

wind pewter Jul 2, 2023, 7:29 PM

#

yes i used that one it was not that complex well i used "system-tray" in cargo it was basically implemented in buildog app i used for reference.

#

tauri = { version = "1.4", features = ["notification-all", "system-tray", "shell-open", "tray-icon"] } but i guess i need this i wonder how i determine how the feature name is travered. would this link to the https://github.com/tauri-apps/tray-icon ?

GitHub

GitHub - tauri-apps/tray-icon: Tray icons for Desktop Applications.

Tray icons for Desktop Applications. Contribute to tauri-apps/tray-icon development by creating an account on GitHub.

#

have to put my app in the showcase i think its common what i want to build but no minimal example of it yet. beside buildlog

formal lava Jul 2, 2023, 7:31 PM

#

wind pewter ```tauri = { version = "1.4", features = ["notification-all", "system-tray", "sh...

tray-icon is a crate (package) like tauri itself. it's not a feature of the tauri dep

#

in other words, no it won't link to tray-icon

#

tauri doesn't "know" about that crate and you gotta handle it all yourself

wind pewter Jul 2, 2023, 7:32 PM

#

ah right that makes totally sense yes. the feature list is for build in features

#

in cargo.toml one adds tauri-tray-icon = "0.6.0" then cargo build

formal lava Jul 2, 2023, 7:35 PM

#

just tray-icon = "0.6.0"

#

again, totally tauri agnostic

wind pewter Jul 2, 2023, 7:37 PM

#

allright i had that before you posted ;p but got some dep problems it seems that gdk-sys = "0.16.0" is required but adding that more dep issues

#

feels like npm dependency hell haha i have this ```error: failed to select a version for gdk-sys.
... required by package webkit2gtk v0.18.2
... which satisfies dependency webkit2gtk = "^0.18.2" of package tauri v1.4.0
... which satisfies dependency tauri = "^1.4" of package monitor v0.0.0 (/Users/pascal/Desktop/monitor/client/src-tauri)
versions that meet the requirements ^0.15.0 are: 0.15.1

the package gdk-sys links to the native library gdk-3, but it conflicts with a previous package which links to gdk-3 as well:
package gdk-sys v0.16.0
... which satisfies dependency gdk = "^0.16" of package gtk-sys v0.16.0
... which satisfies dependency gtk-sys = "^0.16" of package libappindicator v0.8.0
... which satisfies dependency libappindicator = "^0.8" of package tray-icon v0.6.0
... which satisfies dependency tray-icon = "^0.6.0" of package monitor v0.0.0 (/Users/pascal/Desktop/monitor/client/src-tauri)
Only one package in the dependency graph may specify the same links value. This helps ensure that only one copy of a native library is linked in the final binary. Try to adjust your dependencies so that only one package uses the links ='gdk-sys' value. For more information, see https://doc.rust-lang.org/cargo/reference/resolver.html#links.

failed to select a version for gdk-sys which could resolve this conflict```

formal lava Jul 2, 2023, 7:39 PM

#

alright, in this case i take back what i said a while back. It's not possible to use tray-icon together with tauri v1

#

cause you can't resolve that dependency conflict

wind pewter Jul 2, 2023, 7:39 PM

#

ah thats a bummer. then i guess i have to switch to v2 anyway and see if it at least runs without to much issue ( i dont plan to do complex stuff )

#

its basically the tray icon + menu + main window + settings window and thats it.

#

but really need the beach info on the tray in sight at least on osx else the app has to be opened everytime

#

*beach info surfer related data

#

could i upgrade the dep to tauri 2 or does it have breaking api so i need to scaffold a v2 from start in that case what do you think

#

https://next--tauri.netlify.app/blog/2023/03/20/tauri-2-0-0-alpha-4 rtfm i only need to modify the versions alpha 10 is latest it seems

Tauri 2.0.0-alpha.4 Released | Tauri Apps

Mobile APIs for Tauri plugins! The 2.0.0-alpha.4 release has been published.

formal lava Jul 2, 2023, 7:58 PM

#

it's a bit more involved since the last few alpha versions since we split most of the apis into plugins. since you're not using any yet it shouldn't matter

#

but after upgrading you'll have to run pnpm tauri migrate or something, can't remember the exact command

#

but since you're still at the beginning i'd recommend starting from scratch to get it right, just do pnpm create tauri-app --alpha

wind pewter Jul 2, 2023, 8:14 PM

#

ok thank you Fabian, ported multi page etc to new alpha codebase added the tray dep now on cargo build ;p

#Create a native application window for preferences?