Issues Integrating Angular Application with webui in ZIG

[EliezerRamirezRuiz]

Title: Issues Integrating Angular Application with webui in ZIG

Description: Hi everyone,

I'm having trouble integrating my Angular application with a web UI created in ZIG. I've encountered a few challenges and would like to get some clarity on the following questions:

• Am I doing something wrong in the integration process?

• As the web UI framework is still evolving, is there currently a lack of functionality for loading and reactive applications, similar to those found in modern frameworks?

• Can I assist in implementing some missing features?

• How can I contribute to the development of this project?

Any guidance or suggestions would be greatly appreciated!

Thank you.

[EliezerRamirezRuiz]

As you can see I have an executable program called Zig, well it is the webui and the other files are the angular files generated by command to deploy to production.

But when I run the webui, it throws these errors:

[jinzhongjia]

Please show your zig code, or do you have an object repository link for this section?

[AlbertShown]

Am I doing something wrong in the integration process?

From your HTML code screenshot, I see that you forgot to add <script src="/webui.js"></script>.
Please see this example index.html.

From your browser screenshot, I see that your Zig backend return a HTTP header with mime type as text/html instead of application/javascript. Are you using .setFileHandler()? If yes, please check serve_a_folder example for more details.

As the web UI framework is still evolving, is there currently a lack of functionality for loading and reactive applications, similar to those found in modern frameworks?

Zig-WebUI is not a framework, but a Zig library that allows you to use web browser as GUI and connect it to your Zig backend.
You can use a simple Python web server for quick testing and to make sure first your Angular web app is working, when it's working fine in your default web browser, then you can use Zig-WebUI to get a nice web browser window + receiving events (Click, Close...).

Can I assist in implementing some missing features?

Basically, we try to implement all the C APIs into Zig APIs.

How can I contribute to the development of this project?

You can check if there is a missing APIs, otherwise you can add new examples like C one.

[EliezerRamirezRuiz]

Hi, thank you for the detailed guidance—it was quite helpful! Based on your suggestions:

• I’ve already added the <script src="/webui.js"></script> line to my HTML file, and everything is working smoothly on that end.

• Regarding .setFileHandler(), I have not implemented it yet, and honestly, I’m unsure if it's necessary in my current setup. I appreciate the pointer to the serve_a_folder example. I’ll dive deeper into that to see if it resolves the issue with MIME types.

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

pub fn main() !void {
    // create a new window
    var nwin = webui.newWindow();

    nwin.setRuntime(.NodeJS);
    // nwin.setKiosk(true);

    const _port = nwin.setPort(8080);

    if (_port){
        std.debug.print("hello\n", .{});
    }
    nwin.setLogging(true);
    // show the content
    _ = nwin.show("index.html");

    // wait the window exit
    webui.wait();
}

• I understand Zig-WebUI is more of a library than a full framework. I’m exploring how to adapt my project for event handling, and I plan to configure and expand my current implementation to make it more robust.

I would also love to contribute to this project. For example:

Documentation: I noticed there’s potential for more user-friendly onboarding guides or tutorials, especially for those integrating modern frontend frameworks like Angular. I’d be happy to draft something for Zig or Python documentation.

[jinzhongjia]

I am currently handling the synchronization with the upstream
Of course, if you are willing to add some examples or other content, please feel free to pr

[EliezerRamirezRuiz]

hey @jinzhongjia and @AlbertShown, now I have been able to advance in my solution. it turns out that I have followed the example that you have mentioned, but now I have found another error and here I do not know what to do because I do not find much information about the error. Is it because I'm using a different allocator than the one webui tested? or is my implementation out of place? I'm a bit confused about what's going on here. I would really appreciate your experience and support :)

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

const heap = std.heap;
const mem = std.mem;
const fmt = std.fmt;
const fs = std.fs;
const debug = std.debug;

pub fn main() !void {
    // create a new window
    var win = webui.newWindow();

    win.setRuntime(.NodeJS);
    // win.setKiosk(true);

    const port = win.setPort(8080);

    if (port) {
        debug.print("Port setup successfully", .{});
    }

    win.setFileHandler(file_handler);

    // show the content
    _ = win.show("index.html");

    // wait the window exit
    webui.wait();
}

pub fn file_handler(filename: []const u8) ?[]const u8 {
    // var path_buffer: [std.fs.max_path_bytes]u8 = undefined;

    if (mem.endsWith(u8, filename, ".js")) {
        // Get an allocator
        var gpa = heap.GeneralPurposeAllocator(.{ .safety = true }){};
        defer _ = gpa.deinit();
        const allocator = gpa.allocator();

        // Get current dir and get file
        const current_folder = fs.cwd();
        var file = current_folder.openFile(filename[1..], .{}) catch |err| {
            debug.print("error in open file: {s}\n", .{@errorName(err)});
            return null;
        };
        debug.print("filename: {s} \n", .{filename[1..]});
        defer file.close();

        // Get file size
        const file_size = file.getEndPos() catch return null;
        debug.print("File size: {}\n", .{file_size});

        // Read all file
        const file_buffer = file.readToEndAlloc(allocator, file_size + 1) catch |err| {
            debug.print("Error in read all file: {s}\n", .{@errorName(err)});
            return null;
        };
        defer allocator.free(file_buffer);

        // Maybe remove and give file buffer directly
        const buffer = fmt.allocPrint(allocator, "{s}", .{file_buffer}) catch unreachable;
        defer allocator.free(buffer);

        const content = fmt.allocPrint(allocator,
            \\HTTP/1.1 200 OK
            \\Content-Type: application/javascript
            \\Content-Length: {}
            \\
            \\{s}
        , .{ buffer.len, buffer }) catch unreachable;
        defer allocator.free(content);

        return content;
    }
    return null;
}

Maybe I should just use webui.malloc?, then this is the error:

-----------------------------------
[Core]          _webui_free_mem(0x0000021901FCF3A0)
[Core]          _webui_free_mem(0x0000021901FCF3A0) -> Pointer #10 freed (15664 + 1 bytes)
[Core]          _webui_http_handler() -> HTTP Status Code: 200
[Core]          _webui_http_handler()
[Core]          _webui_http_handler()
[Core]          _webui_http_handler() -> GET [/polyfills.js]
[Core]          _webui_get_cookies()
[Core]          _webui_http_handler() -> Client cookies [1_eL1Nl2sihrtobTYbDvc90EnQd1YOyDi]
[Core]          _webui_client_cookies_get_id()
[Core]          _webui_http_handler() -> Client ID found [0]
[Core]          _webui_external_file_handler()
[Core]          _webui_external_file_handler() -> Path [/polyfills.js]
[Core]          _webui_external_file_handler() -> Calling custom files handler callback
[Call]
Filename: polyfills.js
File size: 34519[Core]         
_webui_external_file_handler() -> Custom files handler found (34595 bytes)
---[ External File Handler ]--------
Segmentation fault at address 0x21903aa0000
???:?:?: 0x683d3a in ??? (Zig.exe)
???:?:?: 0x6803ef in ??? (Zig.exe)
???:?:?: 0x70e05a in ??? (Zig.exe)
???:?:?: 0x709b0c in ??? (Zig.exe)
???:?:?: 0x705f6f in ??? (Zig.exe)
???:?:?: 0x703d59 in ??? (Zig.exe)
???:?:?: 0x702a36 in ??? (Zig.exe)
???:?:?: 0x7ffbefd837af in ??? (ucrtbase.dll)
???:?:?: 0x7ffbf099e8d6 in ??? (KERNEL32.DLL)
???:?:?: 0x7ffbf2a9bf2b in ??? (ntdll.dll)

[jinzhongjia]

Honestly, I suggest you provide complete code, such as the content of index.html, and it is better to provide a repository address

[AlbertShown]

I think webui in debug mode tries to print the content of polyfills.js, but pointer is not valid or already freed by Zig.

https://github.com/webui-dev/webui/blob/5ac66da94b62ca025d97bbe5e54f0b9e31b40e61/src/webui.c#L4750

[jinzhongjia]

Yes, you release the output before webui uses it

The easiest way is to directly hang the requested memory on a linked list and wait until the program is finished before releasing it.

But the optimal solution is to implement a memory pool

[AlbertShown]

@EliezerRamirezRuiz I just tested the official example, it's fine.

git clone https://github.com/webui-dev/zig-webui.git
cd zig-webui
zig build run_serve_a_folder

Yes, you need to use webui.malloc() as it's the safest way.
Please share the webui.malloc() version of your code.

[jinzhongjia]

Actually, I would rather recommend using zig's memory allocator, because c's allocator will not detect memory leaks, and zig's memory allocator and c's usage is the same.

[AlbertShown]

We can use mem leaks tools to detect it in C. It's just a one-time job during development.
While for runtime, we should use webui.malloc() to let webui free the mem after serving the HTTP request.

We have a work around, like using Zig mem, and make Zig free mem after timer finish (500ms), another way is to add an ID, and let Zig ask webui if that ID is served and ready to be freed or not, however, I don't recommend that at all. Using webui.malloc() is the best and the easiest solution.

[jinzhongjia]

In fact, zig's memory leak detection only occurs again releasesafe and debug. If you choose releasesmall and releasefast, then zig will close all security checks, just like C's O3.