[bug] meta tag redirects break production build

[Nickersoft]

Describe the bug

Hey all,

I'm currently experimenting with bundling a SvelteKit application with Tauri using the @sveltejs/adapter-static adapter. My adapter builds all of my resources to a build directory in my project folder, which I can then view with yarn preview. However, when I run tauri build to build a production version of my app, opening it results in a white screen.

Upon checking the macOS app contents, there is only an info.plist file, a resources/icon.icns file, and my application binary. The debug version of the production app (using --debug) won't let me use "Inspect Element" either. I click it and nothing opens.

Despite all this, running tauri dev spins up my dev server and opens a preview application that loads just fine. Not sure what could be going wrong in the bundling step. Tauri can obviously see my build directory, because when I change the path the build step errors.

Here's my current config:

{
	"package": {
		"productName": "MyApp",
		"version": "0.1.0"
	},
	"build": {
		"distDir": "../build",
		"devPath": "http://localhost:3000",
		"beforeDevCommand": "yarn dev",
		"beforeBuildCommand": "yarn build"
	},
	"tauri": {
		"bundle": {
			"active": true,
			"targets": "all",
			"identifier": "com.tauri.dev",
			"icon": [
				"icons/32x32.png",
				"icons/128x128.png",
				"icons/128x128@2x.png",
				"icons/icon.icns",
				"icons/icon.ico"
			],
			"resources": [],
			"externalBin": [],
			"copyright": "",
			"category": "DeveloperTool",
			"shortDescription": "",
			"longDescription": "",
			"deb": {
				"depends": [],
				"useBootstrapper": false
			},
			"macOS": {
				"frameworks": [],
				"useBootstrapper": false,
				"exceptionDomain": "",
				"signingIdentity": null,
				"providerShortName": null,
				"entitlements": null
			},
			"windows": {
				"certificateThumbprint": null,
				"digestAlgorithm": "sha256",
				"timestampUrl": ""
			}
		},
		"updater": {
			"active": false
		},
		"allowlist": {
			"all": false
		},
		"windows": [
			{
				"title": "MyApp",
				"width": 1024,
				"height": 600,
				"minWidth": 1024,
				"minHeight": 600,
				"resizable": true,
				"fullscreen": false
			}
		],
		"security": {
			"csp": null
		}
	}
}

I minimally modified the config from what was generated when I first made my project... am I doing something wrong, or is this a bug?

Reproduction

I don't have a reproduction repo to share, but from what I assume, creating an empty SvelteKit project, then adding Tauri to, then running a production build should reproduce the issue.

Expected behavior

I would expect the production build to function the same as the development preview.

Platform and versions

Environment
  › OS: Mac OS 12.3.1 X64
  › Node.js: 16.9.1
  › npm: 7.21.1
  › pnpm: Not installed!
  › yarn: 3.0.2
  › rustup: 1.24.3
  › rustc: 1.59.0
  › cargo: 1.59.0
  › Rust toolchain: stable-x86_64-apple-darwin 

Packages
  › @tauri-apps/cli [NPM]: 1.0.0-rc.7
  › @tauri-apps/api [NPM]: Not installed!
  › tauri [RUST]: 1.0.0-rc.6,
  › tauri-build [RUST]: 1.0.0-rc.5,
  › tao [RUST]: 0.7.0,
  › wry [RUST]: 0.14.0,

App
  › build-type: bundle
  › CSP: unset
  › distDir: ../build
  › devPath: http://127.0.0.1:3000/
  › framework: Svelte

App directory structure
  ├─ .yarn
  ├─ node_modules
  ├─ .storybook
  ├─ static
  ├─ src-tauri
  ├─ .svelte-kit
  ├─ build
  ├─ .git
  ├─ .vscode
  └─ src

Stack trace

No response

Additional context

No response

[FabianLars]

Upon checking the macOS app contents, there is only an info.plist file, ...

The content of the configured distDir gets copied into the binary itself.

The debug version of the production app (using --debug) won't let me use "Inspect Element" either. I click it and nothing opens.

Do you mean the right click menu doesn't open or the devtools? How responsive is the window in general?
Btw just to be safe, the output of a --debug build is in target/debug/.

I don't have a reproduction repo to share, but from what I assume, creating an empty SvelteKit project, then adding Tauri to, then running a production build should reproduce the issue.

The thing is that we have quite many users using sveltekit (and svelte in general, which tbh seems easier to integrate into tauri from what i've heard)

[Nickersoft]

@FabianLars Thanks for the quick response! Wow, I didn't know that the contents are copied into the binary. I guess I assumed it was similar to Electron, where the web assets are stored in the Resources directory of the .app file.

The right click menu does open, but clicking "Inspect Element" does nothing. The native UI controls of the window are fully responsive, but the main window remains white, with both "Inspect Element" and "Reload" seemingly doing nothing. I suspected that maybe a local server isn't being run to host the .html files, but I followed the config recommendations for Cloudish, which supposedly uses a server.

Screen.Recording.2022-04-11.at.5.33.09.PM.mov

[JonasKruckenberg]

Are you doing anything in rust except for the standard boilerplate code?

[Nickersoft]

@JonasKruckenberg I am not... that said, I did some digging and it looks like the issue is originating from the fact I am using a server-side redirect from my index.html page (as my app handles user authentication and whatnot). I was able to reproduce the issue in this example repo by just adding an index.svelte file that redirects to the main page. The redirect works in development, but the production build results in an empty page. It looks like the web server can't handle the <meta http-equiv="refresh" content="0;url=/main"> tag that Svelte uses in its static adapter to redirect to the page.

cc. @FabianLars

[lucasfernog]

I'd like to see a reproduction example to the inspector not opening issue too if that's possible. I'm investigating the original issue right now.

[lucasfernog]

@Nickersoft the first problem here is that when you start the app, Tauri tries to load the index.html file. But this file does not exist because in your index.html you did not set export const prerender = true;, so the @sveltejs/adapter-static adapter probably ignores it. Also, you're setting redirect to /main, and Tauri won't be able to find that file (it assumes it is a route and fallbacks to index.html, so it'll end up being an infinite loop). So you'd need to change it to /main.html.

Here's the full contents of index.svelte to fix this problem:

<script lang="ts" context="module">
export const prerender = true;
	export async function load() {
		return {
			status: 302,
			redirect: '/main.html'
		};
	}
</script>

[Nickersoft]

@lucasfernog Thanks for looking into this! How might this be handled when using yarn dev / yarn tauri dev? When running the dev server, these HTML files don't exist, and you get 404s. Additionally, testing on my own codebase with this model... I have an endpoint /login, which redirects to /home if you are authenticated. Similarly, if you aren't authenticated, /home will redirect back to /login. Adding the .html suffix and prerendering, these redirects result in an infinite redirect loop due to the hardcoding of the meta redirects. Yet if these suffixes AREN'T used, the redirects all work as expected when running a simple HTTP server in the build directory and still fail in Tauri.

Hopefully that makes sense – I can try updating the repro repo, but it might take some time seeing I'd need to spoof an authentication flow.

[lucasfernog]

Maybe we can improve our asset loader but this is a little tricky since SvelteKit uses SSR, I'll make more tests.

[lucasfernog]

I'd need to take a look at your auth redirection code but I think you won't be able to use the SSR load function as it will be resolved at compile time instead of runtime.

You can also keep your main redirect instead of main.html if you set trailingSlash to always. (I'll push a change so Tauri will attempt to load main.html when the request URL is tauri://localhost/main).

The devserver isn't touched by Tauri so you'd need to set it up properly.

[Nickersoft]

Ah yeah, so I just updated my reproduction with an authentication example. After some toying around, it looks like you can't prerender pages when handling auth flows, because the authentication state is dynamic and needs to be resolved on page load via a dispatch to getSession in hooks.ts. So right now, in my reproduction repo, I have code that "logs you in" that works with svelte-kit dev and svelte-kit preview, but doesn't work using a standalone HTTP server in the build directory, nor via Tauri.

Is the recommended approach to then just have your Tauri app show a webview that loads your website hosted on a remote server? That, or run your own Node server locally instead of using Tauri's built-in one, as I don't think SvelteKit's static output can handle auth?