Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[bug] meta tag redirects break production build #3887

Closed
Nickersoft opened this issue Apr 11, 2022 · 12 comments
Closed

[bug] meta tag redirects break production build #3887

Nickersoft opened this issue Apr 11, 2022 · 12 comments

Comments

@Nickersoft
Copy link

Nickersoft commented Apr 11, 2022

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
Copy link
Member

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
Copy link
Author

@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
Copy link
Member

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

@Nickersoft
Copy link
Author

Nickersoft commented Apr 12, 2022

@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

@Nickersoft Nickersoft changed the title macOS build contains no resource files and results in an empty screen Meta-based redirects break production build Apr 12, 2022
@Nickersoft Nickersoft changed the title Meta-based redirects break production build [bug] meta tag redirects break production build Apr 20, 2022
@lucasfernog
Copy link
Member

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
Copy link
Member

@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
Copy link
Author

@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
Copy link
Member

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

@lucasfernog
Copy link
Member

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
Copy link
Author

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?

@lucasfernog
Copy link
Member

As I said you won't be able to use the SSH capabilities with the static build that Tauri needs. You can eithe resolve the auth check in the client side or try using tauri-plugin-localhost removing the static adapter, which should behave similar to tauri dev but in production builds. Using a remote server will be tricky since you won't be able to access the Tauri APIs.

@Nickersoft
Copy link
Author

Ah, I didn't know there was a localhost plugin! I'll take a look. Thanks again for all the help :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants