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.

Sign up for GitHub

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

Jump to bottom

set_profile & CORS #391

Closed
sensiblearts opened this issue Jun 3, 2024 · 9 comments
Closed

set_profile & CORS #391

sensiblearts opened this issue Jun 3, 2024 · 9 comments

Comments

@sensiblearts
Copy link
Contributor

sensiblearts commented Jun 3, 2024 •
edited
Loading

Greetings,
(I'm on day 1 of learning WebUI and day 1 of learning Zig, so...)

I have an SPA build (compiled SvelteKit JavaScript linked in index.html).

The SPA calls to two localhost API backends (on ports 3000 and 5984).

It works fine when I serve index.html with node, or when I do a Tauri build.

But when I try a zig-webui build, all JavaScript fetch calls fail due to CORS.

Here's my main.zig:

const webui = @import("webui");
const std = @import("std");

pub fn main() !void {
    var nwin = webui.newWindow();
    
    // webui.set_profile(nwin, ...? to what? how to allow Cross-Origin Access to "*" ?
    
    const path = "./spa_build";
    const filename = "index.html";

    var dir = try std.fs.cwd().openDir(path, .{});
    defer dir.close();
    try dir.setAsCwd();
    
    _ = nwin.show(filename);

    webui.wait();
}

Thank you for any advice.
@hassandraga
Copy link
Member

Hi, Can you please add the browser's DevTools logs or a screenshot?

@sensiblearts
Copy link
Contributor Author

Thank you for the quick reply.

Index.html loads but is blank:

image

If I right-click and inspect the JS console, I see:

Screenshot JS console

And here is index.html:

(NOTE: I have to put the webui.js script below the SvelteKit starter script; otherwise, it gets into an infinite loop, crashing, Kit restarting, repeat.)

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="icon" href="/favicon.png" />
		<link rel="modulepreload" href="/_app/immutable/entry/start.mFb7rvTb.js">
		<link rel="modulepreload" href="/_app/immutable/chunks/entry.Bd4ck04i.js">
		<link rel="modulepreload" href="/_app/immutable/chunks/scheduler.Vg6e9bTg.js">
		<link rel="modulepreload" href="/_app/immutable/chunks/index.DtEDIqaG.js">
		<link rel="modulepreload" href="/_app/immutable/chunks/control.CYgJF_JY.js">
		<link rel="modulepreload" href="/_app/immutable/entry/app.iE8pe31a.js">
		<link rel="modulepreload" href="/_app/immutable/chunks/preload-helper.BQ24v_F8.js">
		<link rel="modulepreload" href="/_app/immutable/chunks/index.kVFNCZ3-.js">
	</head> 
	<body data-sveltekit-preload-data="hover"; class="overflow-hidden">
		<div style="display: contents;">
			<script>
				{
					__sveltekit_1pkutvc = {
						base: ""
					};

					const element = document.currentScript.parentElement;

					Promise.all([
						import("/_app/immutable/entry/start.mFb7rvTb.js"),
						import("/_app/immutable/entry/app.iE8pe31a.js")
					]).then(([kit, app]) => {
						// console.log("starting...")
						kit.start(app, element);
						// console.log("started")
					});
				}
			</script>
			<script src="webui.js"></script>
	</div>
</body>
</html>

@sensiblearts
Copy link
Contributor Author

WAIT -- I think I found the problem -- not a webui thing, so don't waste any more of your time.

I switched to Windows dev (from WSL Ubuntu) for Zig, and my Windows CouchDb settings are I think the problem. I'm going down that route and will report back (and probably close this).

@hassandraga
Copy link
Member

Yes, that's what I was about to write, your server at 5984 should allow Access-Control-Allow-Origin from *.

@sensiblearts
Copy link
Contributor Author

Yes, I had not copied all settings correctly, so the CORS issue is solved.

However, the infinite loop (crash / reload) described above is still happening, regardless of where I place the webui.js script (See "NOTE", above).

My app starts to load (screenshot):

Screenshot zig webui

...but then it seems to be looking for index.html again, cannot find it, crashes, and sveltekit reloads.

Here's the console (pink is crashing, all the white logs are successful API calls; this repeats in a loop):

Screenshot JS console

@hassandraga
Copy link
Member

If you want to use a custom web server with WebUI, you can then look at this C example on how to do that.
The example is using a Python web server, and using WebUI to show a window, and track the click events using webui.js.

https://github.com/webui-dev/webui/blob/main/examples/C/custom_web_server/main.c

@sensiblearts
Copy link
Contributor Author

Thanks, but no I don't need to write a server, it's just a SvelteKit SPA, with only client-side code. (SvelteKit can do server side, and is probably used mostly for that, but it also does SPAs by turning off all server-side stuff.)

The SPA makes many fetch calls to APIs that are separate apps.

I have a suspicion about what's happening, and that the problem is due to SvelteKit's client-side router or other code that SvelteKit generates. (SvelteKit does a ton behind the scenes, which is why it's so easy to write apps. But this ton of stuff is all compiled and mostly impenetrable by me.)

Anyway, what I think is happening:

  1. Something is happening to cause an error, during the initial load
  2. SvelteKit handles errors by reloading or re-routing
  3. WebUI is also responding to this re-routing, and tries to load index.html again...
  4. which triggers the error; goto (1)

I'll figure it out and, if it's of interest to the WebUI community I'll post back.

Closing this for now.

@hassandraga
Copy link
Member

Yes, I'm interested in learning more about this issue. We can improve WebUI or add a new option to make it more flexible to handle this kind of situation. When you have free time. Thank you.

@sensiblearts
Copy link
Contributor Author

It seems to be a fundamental conflict with how SvelteKit works. I created a test project that has the same problem. The project is linked to in the new issue I opened: #392

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@sensiblearts @hassandraga