This guide assumes your C project files (Makefile, main.c, webview.h) are located inside the /cdesktop folder, while your web assets are in a separate /web folder.

DIRECTORY LAYOUT

/web : Frontend source (Vite, React/Vue/Vanilla).

/cdesktop : C source code, Makefile, and webview.h.

/generate_resource.py : Root-level script to bridge the two.

STEP 1: PREPARE THE WEB INTERFACE Navigate to your web folder and build the project. Command: cd web && pnpm build This creates /web/dist/index.html. Because of vite-plugin-singlefile, this one file contains all your CSS, JS, and Base64-encoded images/fonts.

STEP 2: CONVERT HTML TO C HEADER Run the Python script from the root to create the resource file inside the cdesktop folder. Command: python3 generate_resource.py Ensure your Python script is set to output to: "cdesktop/resources.h". This allows your C code to #include "resources.h" directly.

STEP 3: COMPILE THE C APP Navigate into the cdesktop folder and run the Makefile. Command: cd cdesktop && make The Makefile will look for webview.h in the current directory and compile your .c/.cc files into the /cdesktop/bin folder.

STEP 4: EXECUTION Run the final binary from the bin folder. Command: ./cdesktop/bin/webview_test The application will launch. It does not need the /web folder or the /dist folder to run, as the UI is now part of the binary.

TROUBLESHOOTING PATHS

If 'webview.h' is not found: Ensure it is sitting exactly next to your Makefile in /cdesktop.

If 'resources.h' is not found: Check that generate_resource.py is pointing to the correct output path.

Include Errors: In VS Code, ensure your includePath includes "${workspaceFolder}/cdesktop".

ONE-LINE BUILD COMMAND (From Root) pnpm --prefix web build && python3 generate_resource.py && make -C cdesktop