Frontend framework support

[griffith1deady]

See this: https://github.com/webui-dev/webui/issues/109 I tried to do as I was advised by @AlbertShown, or rather change the path imports of all js/and css scripts in the html file to out/path instead of path, but it had exactly no effect.

Error receiving script files for current html But this script's located right

Right now my page looks like this when I export HTML from React through NextJS But it should be like this:

Exported this page to github pages is: https://griffith1deady.github.io/languages

Minimal code for error is:

import std/os, webui

var window: Window

proc main = 
  window = newWindow(1)
  window.runtime = NodeJs
  window.show("languages.html")
  wait()

setCurrentDir(currentSourcePath().parentDir() & "/out")

main()

All source files with pages & resources, more precisely exporting my site https://github.com/griffith1deady/griffith1deady.github.io packed in an archive: NIM.zip

Also, you may notice some visual differences between my resources and those on the work site: all this is because I just used earlier commits.

Do I think something is just blocking the distribution of files?

[griffith1deady]

You may see errors on other pages, too, if you change the file name to one not edited under out/

[AlbertShown]

Thank you for the package, I can reproduce the issue. I'm investigating.

[AlbertShown]

nim -d:webuiLog c test.nim ./test

[User] webui_new_window_id([1])...
[Core]          WebUI v2.3.0
[Core]          _webui_init()...
. . .
[Core]          _webui_file_exist([XXX/out/out/_next/static/css/5df3faa623ded248.css])...

/out/out/ does not exist. I'm looking how to fix it...

[griffith1deady]

If you put all the resources in out/out, that won't work either. The same goes for all the other pages, even if you do something like this:

[griffith1deady]

VSCode can find the file, but WebUI cannot.

[griffith1deady]

I have to answer that in the beginning it just couldn't find the files, but now it's blocking access/syntax error when reading them.

[AlbertShown]

Try this code:

import webui

var window: Window

proc main = 

  # Create a new window object
  window = newWindow(1)

  # Make NodeJs as the `.ts` and `.js` interpreter
  # The command `node` should works on your system
  # window.runtime = NodeJs

  # Next WebUI version will have an option to change
  # the web-server root path like this:
  # window.setRoot(currentSourcePath().parentDir() & "/out")
  # Then all resource can be loaded as "/resources..."

  # Show the new window using a local HTML file
  # The web-server root path is: "/"
  # All resources should be: "/out/resources..."
  window.show("/out/languages.html")

  # Wait until all windows get closed
  wait()

main()

[AlbertShown]

According to this: https://webui.me/docs/#/nim_api?id=show-window don't forget to add <script src="/webui.js"></script> at the end of your HTML files.

[griffith1deady]

Thank you! It works, but in case you add the prefix /out in all scripts except <script src="/webui.js"></script>

[griffith1deady]

Is there any way to use webui.js externally so you can embed it in a frontend that doesn't depend on the nim environment?

[AlbertShown]

Thank you! It works

Good to hear that 👍

in case you add the prefix /out in all scripts

Yes, but we will add window.setRoot() in the next coming version which will be helpful

Is there any way to use webui.js externally

No, it's not possible for now because webui.js it's not a local file. It gets generated in the runtime, and it exists only in the memory.

I mean, there is a way to inject webui.js on every HTML request, but this needs some extra work, and may break the end-user HTML script... so, I guess it's better if it is added manually by the user when he needs it.

[griffith1deady]

Okay, thank you!