56ff469f03
This PR refactors the GUI clients frontend into a single window with a sidebar. The functionality remains the same but we do make minor UI improvements on the way. To pull the entire refactor off, we now use `react` and `flowbite-react` for the GUI. All the communication with the backend is moved towards one-way commands and events. That means, the flow is always: - Backend emits events to update frontend - Frontend triggers actions in the backend that may or may not result in further events This allows us to decouple the GUI from knowing about which side-effects change what parts of the state. Instead, it simply updates whenever it receives an event. - The previous "Advanced Settings" screen is now split into two parts: Settings and Diagnostics. Later, we will add a "General settings" page here. - The tray menu remains identical to the current one. When the user clicks "Settings" or "About", we open the window and navigate to the corresponding page. - The app and git version are now directly embedded in the frontend, simplifying the interaction between the frontend and the backend further. |Before|After| |---|---| ||| ||| || |||
gui-client
This crate houses a GUI client for Linux and Windows.
Setup (Ubuntu)
To compile natively for x86_64 Linux:
- Install rustup
- Install pnpm
sudo apt-get install build-essential curl file libayatana-appindicator3-dev librsvg2-dev libssl-dev libwebkit2gtk-4.1-dev libxdo-dev wget
Setup (Windows)
To compile natively for x86_64 Windows:
- Install rustup
- Install pnpm
Recommended IDE Setup
(From Tauri's default README)
Building
Builds are best started from the frontend tool pnpm. This ensures typescript
and css is compiled properly before bundling the application.
See the package.json script for more details as to what's
going on under the hood.
# Builds a release exe
pnpm build
# Linux:
# The release exe and deb package are up in the workspace.
stat ../target/release/firezone
stat ../target/release/bundle/deb/*.deb
# Windows:
# The release exe and MSI installer should be up in the workspace.
# The exe can run without being installed
stat ../target/release/Firezone.exe
stat ../target/release/bundle/msi/Firezone_0.0.0_x64_en-US.msi
Signing the Windows MSI in GitHub CI
The MSI is signed in GitHub CI using the firezone/firezone repository's
secrets. This was originally set up using these guides for inspiration:
- https://melatonin.dev/blog/how-to-code-sign-windows-installers-with-an-ev-cert-on-github-actions/
- https://support.globalsign.com/code-signing/code-signing-using-azure-key-vault
Renewing / issuing a new code signing certificate and associated Azure entities is outside the scope of this section. Use the guides above if this needs to be done.
Instead, you'll most likely simply need to rotate the Azure CodeSigning Application's client secret.
To do so, login to the Azure portal using your @firezoneprod.onmicrosoft.com account.
Try to access it via the following deep-link.
If that doesn't work:
- Go to the
Microsoft Entra IDservice - Click on
App Registrations - Make sure the tab
All applicationsis selected - Find and navigate to the
CodeSigningapp registration - Client on
client credentials - Click
New client secret - Note down the secret value. This should be entered into the GitHub repository's secrets as
AZURE_CLIENT_SECRET.
Running
From this dir:
# This will start the frontend tools in watch mode and then run `tauri dev`
pnpm dev
# You can call debug subcommands on the exe from this directory too
# e.g. this is equivalent to `cargo run -- debug hostname`
cargo tauri dev -- -- debug hostname
# The exe is up in the workspace
stat ../target/debug/Firezone.exe
The app's config and logs will be stored at
C:\Users\$USER\AppData\Local\dev.firezone.client.
Platform support
Ubuntu 22.04 and newer is supported.
Tauri says it should work on Windows 10, Version 1803 and up. Older versions may work if you manually install WebView2
x86_64 architecture is supported for Windows. aarch64 and x86_64 are supported for Linux.
Threat model
See Security