Windows Compatibility - Githubissues

felix91gr commented 8 months ago

Context: @aichingm said in an earlier issue:

Thing which would need to be done:

icons.sh would need to be ported to windows

rsvg-convert is used in makefiles to convert SVGs to PNGs, this properly does not work on windows too.

make build in the tauri Makefile currently only builds .deb files this would also need to change

These pending tasks can be split into two different features, described down below.

Being able to build Lonewolf for Windows

This only requires the third task to be completed:

[x] make build in the tauri Makefile must be able to build an .exe Windows executable.

After make build builds a proper .exe for Windows, Windows binaries can simply be built from Linux and then be distributed to Windows users.

Being able to build Lonewolf IN Windows

This requires complete independence from Linux, that is, for a Windows user to be able to build and use their own Lonewolf binaries entirely from Windows itself. Thus, unlocking this requires completion of the remaining two tasks:

[x] icons.sh needs to be ported to Windows
[x] rsvg-convert (used in makefiles to convert SVGs to PNGs) must be replaced to be able to do the conversion on Windows too.

felix91gr commented 8 months ago

I shall endeavor myself to make make build build .exe Windows executables.

aichingm commented 8 months ago

After make build builds a proper .exe for Windows, Windows binaries can simply be built from Linux and then be distributed to Windows users.

I don't think cross compiling tauri apps is possible.

Tauri relies heavily on native libraries and toolchains, so meaningful cross-compilation is not possible at the current moment.

From: https://tauri.app/v1/guides/building/cross-platform/

felix91gr commented 8 months ago

Damn.

I mean, it does appear to be a feature they're working on, but at least for complex apps it seems to be something out of reach: https://tauri.app/v1/guides/building/cross-platform/#experimental-build-windows-apps-on-linux-and-macos

felix91gr commented 8 months ago

Hmm. I'll have to make a Windows VM, then. Will report as soon as I've got something

felix91gr commented 8 months ago

Do you have a Github Action configured to automatically build the Linux binary?

Apparently we can use GA's to build Windows binaries as well. If you have a Linux config working already, I can make a fork and experiment until I've got a working Github Action for Windows

felix91gr commented 8 months ago

I have a Windows VM running, with Tauri and Node installed. I'm trying to figure out how to get things running.

@aichingm say you were to check out the repo on a new Linux distro, with only NPM and Tauri preinstalled. What commands do you run before you run make dev on the Tauri subdirectory?

felix91gr commented 8 months ago

Hm. The thing that gives me the most trouble is the icons.sh script. From what I can tell, it's used to generate a... typescript file from a resource out on the internet.

Why isn't that resource, or that file, in the repo itself? It's strange to me that this needs an internet connection in order to be run for the first time.

Could we pre-generate it somehow?

Otherwise, if you have some time, please explain to me what it does. That way I may be able to make a compatible BAT script or a BASH script that can be run under a Windows MSYS2 setup.

aichingm commented 8 months ago

Hi,

@aichingm say you were to check out the repo on a new Linux distro, with only NPM and Tauri preinstalled. What commands do you run before you run make dev on the Tauri subdirectory?

Does this mean the rust toolcain is also already installed?

I would only run make npm-install icons dev, npm-install iinstalles all the npm packages needed, icons generates the pngs of lonewolf, the little icons used in application and all the icons tauri needs to create packages, dev runs the development applicaiton.

Otherwise, if you have some time, please explain to me what it does.

The icons.sh script does two things:

it searches the codebase for strings looking like this fluent:[0-9a-zA-Z-_]*. those are the "names" of the icons are used (fluent the icon pack and then the name and size of the icon). And generates a list out off them.
the second part is to download all the icons svg paths from iconify.design and stores them in to a typescript object to that they can be imported by the Icon component.

This is done at build time because I see no reason why we would need to keep a copy of stuff in the repository which we could just download/generate at build time.

For environments like flatpak where no internet is available at build time some resources (cargo-sources.json, node-sources.json and icons.ts) need to be generated and copied anyways. Which is fine since the build would just fail if any of the files are "out of sync".

Why isn't that resource, or that file, in the repo itself? It's strange to me that this needs an internet connection in order to be run for the first time.

I guess I think thats not a big problem since one needs internet anyways to clone the repo...

aichingm commented 8 months ago

Hi @felix91gr I just pushed c5638063fb6081a6a9c728877b508d19fce10660 which replaces the icons.sh file by a icons.mjs file. It implements the same functionality in but should also be able to be executed on windows since nodejs already needs to be installed.

felix91gr commented 8 months ago

@aichingm Oh my gosh, thank you so much!

I will be testing this as soon as I can. I was away from the computer for a week or so.

I'll report back on my progress compiling this for Windows! (I'm also making a step-by-step guide on how to compile Lonewolf on W so that it's repeatable :3)

aichingm commented 8 months ago

I have a two ideas for the other issues:

Creating a Makefile .win which deals with creating the .exe instead of the .deb file
Using https://github.com/yisibl/resvg-js on at least windows to generate the png files

@felix91gr What do you think, will this solve your issues?

aichingm commented 8 months ago

@felix91gr I just pushed another commit f0e29259d1cf7137233a04238eeb898d61f41381 in which I added a new makefile Makefile.win which does not just build the .deb file but the platform specific targets (.exe and .msi on windows).

I also added a new script which should act as a drop in replacement for rsvg-convert. Which is used in the Makefile.win file.

Let me know if this works!

felix91gr commented 8 months ago

@aichingm I think I've got it mostly working? Here's how the building script looks so far:

(We're assuming system dependencies have been installed, and that we're in the root folder of the repo)

Go to the lonewolf-tauri directory and run
```
cd .\lonewolf-tauri\
make npm-install
```
Go to the lonewolf directory and download and convert the icons
```
cd ..\lonewolf\
make
```
I'm missing a step here, I think, because step (4) fails.
Go back to lonewolf-tauri and build it:
```
cd ..\lonewolf-tauri\
make build
```

Step 4 fails with the following error:

make> *** No rule to make target 'src/assets/icon.svg', needed by 'src-tauri/icons/512x512-lonewolf.png'. Stop.

What am I missing?

felix91gr commented 8 months ago

Ah, I think I know what's up. It's that symbolic directory, lonewolf-tauri/src. Windows has no clue as to what to make of it. Hmm. I'm going to manually patch the appearances of src and see how far into the build process I can get :)

felix91gr commented 8 months ago

That was it. The icons are being converted and incorporated now, as far as I can tell. This is the output I get for now (it's still not compiling fully, but it's getting there)

PS C:\Users\vboxuser\LonewolfRedo\lonewolf-tauri> make build
npm run tauri icon -- src-tauri/icons/512x512-lonewolf.png -o src-tauri/icons

> lonewolf@0.0.0 tauri
> tauri icon src-tauri/icons/512x512-lonewolf.png -o src-tauri/icons

        Appx Creating StoreLogo.png
        Appx Creating Square30x30Logo.png
        Appx Creating Square44x44Logo.png
        Appx Creating Square71x71Logo.png
        Appx Creating Square89x89Logo.png
        Appx Creating Square107x107Logo.png
        Appx Creating Square142x142Logo.png
        Appx Creating Square150x150Logo.png
        Appx Creating Square284x284Logo.png
        Appx Creating Square310x310Logo.png
        ICNS Creating icon.icns
         ICO Creating icon.ico
         PNG Creating 128x128@2x.png
         PNG Creating icon.png
         PNG Creating 32x32.png
         PNG Creating 128x128.png
npm notice
npm notice New minor version of npm available! 10.1.0 -> 10.2.3
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.2.3
npm notice Run npm install -g npm@10.2.3 to update!
npm notice
(cd ../lonewolf; make icons)
make[1]: Entering directory 'C:/Users/vboxuser/LonewolfRedo/lonewolf'
(cd assets; node icons.mjs generate)
icons.ts exists and does not need to be updated
make[1]: Leaving directory 'C:/Users/vboxuser/LonewolfRedo/lonewolf'
(cd ../lonewolf; make check)
make[1]: Entering directory 'C:/Users/vboxuser/LonewolfRedo/lonewolf'
(cd assets; node icons.mjs check)
make[1]: Leaving directory 'C:/Users/vboxuser/LonewolfRedo/lonewolf'
npm run tauri build

> lonewolf@0.0.0 tauri
> tauri build

     Running beforeBuildCommand `npm run build`

> lonewolf@0.0.0 build
> vue-tsc --noEmit && vite build

vite v4.4.9 building for production...
transforming (1) index.html
NotoColorEmoji.ttf referenced in C:/Users/vboxuser/LonewolfRedo/lonewolf-tauri/index.html?html-proxy&inline-css&index=0.css didn't resolve at build time, it will remain unchanged to be resolved at runtime
✓ 4 modules transformed.
✓ built in 776ms
[vite]: Rollup failed to resolve import "naive-ui" from "C:/Users/vboxuser/LonewolfRedo/lonewolf/main.ts".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
error during build:
Error: [vite]: Rollup failed to resolve import "naive-ui" from "C:/Users/vboxuser/LonewolfRedo/lonewolf/main.ts".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
    at viteWarn (file:///C:/Users/vboxuser/LonewolfRedo/lonewolf-tauri/node_modules/vite/dist/node/chunks/dep-df561101.js:48142:27)
    at onRollupWarning (file:///C:/Users/vboxuser/LonewolfRedo/lonewolf-tauri/node_modules/vite/dist/node/chunks/dep-df561101.js:48174:9)
    at onwarn (file:///C:/Users/vboxuser/LonewolfRedo/lonewolf-tauri/node_modules/vite/dist/node/chunks/dep-df561101.js:47902:13)
    at file:///C:/Users/vboxuser/LonewolfRedo/lonewolf-tauri/node_modules/rollup/dist/es/shared/node-entry.js:24271:13
    at Object.logger [as onLog] (file:///C:/Users/vboxuser/LonewolfRedo/lonewolf-tauri/node_modules/rollup/dist/es/shared/node-entry.js:25945:9)
    at ModuleLoader.handleInvalidResolvedId (file:///C:/Users/vboxuser/LonewolfRedo/lonewolf-tauri/node_modules/rollup/dist/es/shared/node-entry.js:24857:26)
    at file:///C:/Users/vboxuser/LonewolfRedo/lonewolf-tauri/node_modules/rollup/dist/es/shared/node-entry.js:24817:26
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
       Error beforeBuildCommand `npm run build` failed with exit code 1
make: *** [Makefile:5: build] Error 1

aichingm commented 8 months ago

That looks promising already! Did you run npm intall, it looks like naive-ui was not installed?

aichingm commented 8 months ago

FYI: I had to rename the icons.mjs file since it was shadowing the icons.ts file, not sure if this affects you.

felix91gr commented 7 months ago

Sorry I haven't kept updating you. I've been very busy with life T.T

I kept trying that weekend and managed to get Node to give me errors related to the packages, which was an improvement :D

That being said, I'm currently trying to convince my Windows VM that it can make and use symbolic links, because the src link kept giving me trouble (check my lonewolf fork to see my ridiculous workaround x'D)

I think making the symlinks work will make this process a lot more streamlined :3

felix91gr commented 7 months ago

Okay here's where I'm currently at. I'm running the Makefile.win's commands by hand for ease of debugging.

1) Download the repo and convince git and windows to make symbolic links :ballot_box_with_check: 2) cd into lonewolf-tauri and run npm install :ballot_box_with_check: 3) Then, run npm install --no-save sharp :ballot_box_with_check: 4) cd into src (which now works!) and run make :ballot_box_with_check: 5) cd back into .. (the lonewolf-tauri directory) and run npm run tauri build :x:

This is the output I get:

Fixing the symbolic link thing really makes things so much easier. I still don't know what's up, but I'm at least positive I can find the issue now.

felix91gr commented 7 months ago

This seems to be the underlying issue: https://rollupjs.org/troubleshooting/#error-name-is-not-exported-by-module

felix91gr commented 7 months ago

Nevermind me, I was running one of my cursed forks where I attempted to hardcode the symlink's paths. npm run build works now, I'm still trying to figure out a couple of bits but I think this is very close to being runnable.

felix91gr commented 7 months ago

I think it works now. I mean, for some reason I still can't get npm run dev nor npm run preview to show me the UI in the browser, but the binary produced by npm run tauri build seems to work well! I'll be testing it and report back

felix91gr commented 7 months ago

Okay, I think I have a reproducible setup from scratch for Windows. Including how to make it understand symlinks! I'll keep at it, but I think I should have something for today so that you may try it out with a VM if you want to :)

felix91gr commented 7 months ago

My current Windows setup "script" (I really don't miss Windows, god, setups are a pain)

Give all users the permission to create symbolic links: symlink config link
Install git. Very important: make sure that: The installer installs Git Bash, and That in the configuration, it is marked as :ballot_box_with_check: that it checks out symbolic links.
Install Rust
Install NodeJS. I installed the LTS version. Important: make sure it installs Chocolatey as well. It's an option in one of the installer's screens.
Install make. First, open Git Bash as Administrator. Then, run choco install make. Close the terminal once this is done.

With that out of the way, we're finally ready to compile Lonewolf!

Open a Git Bash terminal, and go to a suitable directory.
Run git clone https://github.com/aichingm/lonewolf
Run the following commands, line by line:

cd lonewolf
cd lonewolf-tauri
mv Makefile Makefile.lin
mv Makefile.win Makefile

make npm-install
make icons
make tauri-icons
make check
make test-unit
make build

felix91gr commented 7 months ago

@aichingm I tried that setup in a clean Windows 10 VM, from scratch, and it works just right :ok_hand:

Now I still have to see if I can break the app, or if it is 100% functional. I'll post more when I know.

felix91gr commented 7 months ago

Hm. The development and preview versions don't fail, but their UI doesn't render for some reason.

After running the script above, I've done this:

npm run preview

Which gives me a website at localhost:4173, titled Lonewolf, but that's all I'm getting.

I've also run:

make dev

And obtained the same results, at localhost:1420.

When running make dev daemon, this is what I see on Firefox's console:

[vite] connecting... client.ts:18:8
[vite] connected. client.ts:150:14
Uncaught (in promise) TypeError: window.__TAURI_IPC__ is not a function
    d2 chunk-5UWJICAP.js:1
    d2 chunk-5UWJICAP.js:1
    has tauri-plugin-store.ts:60
    exists AppSettings.ts:29
    exists AppSettings.ts:28
    load AppSettings.ts:13
    load AppSettings.ts:12
    setup SettingsProvider.vue:14
    callWithErrorHandling runtime-core.esm-bundler.js:158
    setupStatefulComponent runtime-core.esm-bundler.js:7236
    setupComponent runtime-core.esm-bundler.js:7197
    mountComponent runtime-core.esm-bundler.js:5599
    processComponent runtime-core.esm-bundler.js:5565
    patch runtime-core.esm-bundler.js:5040
    componentUpdateFn runtime-core.esm-bundler.js:5708
    run reactivity.esm-bundler.js:178
    update runtime-core.esm-bundler.js:5814
    setupRenderEffect runtime-core.esm-bundler.js:5822
    mountComponent runtime-core.esm-bundler.js:5612
    processComponent runtime-core.esm-bundler.js:5565
    patch runtime-core.esm-bundler.js:5040
    render2 runtime-core.esm-bundler.js:6332
    mount runtime-core.esm-bundler.js:3824
    node_modules chunk-PM6D776P.js:10966
    <anonymous> main.ts:30
chunk-5UWJICAP.js:1:528

Followed by this:


GET
http://localhost:1420/vite.svg
[HTTP/1.1 404 Not Found 0ms]

GET
    http://localhost:1420/vite.svg
Status
404
Not Found
VersionHTTP/1.1
Transferred0 B (0 B size)
Referrer Policystrict-origin-when-cross-origin
DNS ResolutionSystem

    Access-Control-Allow-Origin
        *
    Connection
        keep-alive
    Content-Length
        0
    Date
        Wed, 06 Dec 2023 15:21:47 GMT
    Keep-Alive
        timeout=5

    Accept
        image/avif,image/webp,*/*
    Accept-Encoding
        gzip, deflate, br
    Accept-Language
        en-US,en;q=0.5
    Connection
        keep-alive
    Host
        localhost:1420
    Referer
        http://localhost:1420/
    Sec-Fetch-Dest
        image
    Sec-Fetch-Mode
        no-cors
    Sec-Fetch-Site
        same-origin
    User-Agent
        Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:120.0) Gecko/20100101 Firefox/120.0

The npm run preview gives me the exact same two errors, but since the code is all minified for the release package, the first error was kind of unreadable. So I'm only posting the make dev errors

felix91gr commented 7 months ago

Okay, I decided to try the same procedure in the lonewolf-web subdirectory, and both of these render the UI without a problem:

Development

npm run dev

As well as Release

npm run build npm run preview

So the issue seems to be isolated exclusively to the Tauri side indeed. I'm going to try and dig deeper into it.

felix91gr commented 7 months ago

Hm. Okay, it looks like this behavior is actually intended, for the Tauri bundle isn't supposed to be rendered in a browser.

https://github.com/tauri-apps/tauri/issues/3434#issuecomment-1491941356

https://stackoverflow.com/questions/75771786/typeerror-window-tauri-ipc-is-not-a-function-on-tauri

So. That leaves two tasks remaining:

[ ] Make sure the .exe created by this process actually works properly
[x] Make some kind of automated script to build the Windows executable / installer from the source code (Github actions probably?)

aichingm commented 7 months ago

Wow, great work! I appreciate the detailed updates!

I hope I find some time over the weekend to try this process my self.

Two notes so far from me:

Instead of renaming the makefile I think you should be able to specify it with make -f Makefile.win
To run the dev version of tauri run npm run tauri dev

A note on testing: lonewolf has to do a lot of path normalization and concatenation when handling images and attachments, this is an area where I suspect things might go worng. I tried my best to already write it as portable as possible but you never know...

Edit: I agree having GitHub Actions build lonewolf for windows would be great!

aichingm / lonewolf

Windows Compatibility #6

Being able to build Lonewolf for Windows

Being able to build Lonewolf IN Windows