Feature request: view page in mobile

[YashKarthik]

Thank you for this beautiful package.

It would be great to be able to use org-roam-ui to view my notes in phone's browser.

In normal nextjs/react apps you can do so by visiting ip:port but this doesn't work in ORUI, probably because of this line in next.config.js: domains: ['localhost'],.

Cheers!

[01av]

Great package!
Agree, being able to configure the web server to allow connections from other hosts would be great. Could be useful for browsers on same network, or possibly even behind a reverse proxy with some kind of authentication.

[YashKarthik]

probably because of this line in next.config.js: domains: ['localhost'],.

I read the next.js docs, that option configures image sources, not hosts.

Reading the docs... it seems that this can be used to enable other host npx next dev -H 192.168.1.2. But since ORUI uses simple-httpd for the server, so I'm not sure if that option is even applicable.

In org-roam-ui.el line 188, (setq-local httpd-port org-roam-ui-port). I don't really know elisp, but reading through some of simple-httpd's code I'm guessing we could have this under that line: (setq-local httpd-host org-roam-ui-host) and allow the user to configure org-roam-ui-host.

Lemme know if I'm thinking this correctly. And if this would be a viable option

[01av]

I tested this a month ago or so and could successfully enable simple-httpd to listen to other hosts by setting the httpd-host config in emacs. The problem was the sources pointing to localhost. So with what you are pointing out it might work as far as I can see. But I’m not very fluent in this.

[tefkah]

I think you're right in that it's mostly a simple-httpd thing, but I think your (@01av) problem is mostly because most of the references to the localhost are hardcoded at the moment. At the moment though, I'm not sure how to change this, the problem:

• Emacs needs to act as a server, hosting the html files on some port at the localhost
• org-roam-ui needs to connect to the websocket or fetch some data from a REST api endpoint, and needs to know where that is before compiling the application, because the socket and the html cannot be hosted on the same port (I'm pretty sure on this, but haven't checked in a while). This means that at least one of the two needs to know which host and port to go to, which (i think) leads to our current situation.

However, this doesn't need to be the case, I realize. What I could do is first just fetch the data from the same port that orui is hosted on (3591), e.g. fetch('/host-details') etc, then use that to update the information about where the websocket should listen to.

That would require some refactoring, but should be doable. However, I really don't have time to spend on orui atm, sorry! In february I'd have some more time to spend on this, but to be honest there are a lot of things I want to do differently which may end up becoming a major rewrite, so depending on whether I do that sooner rather than later it might be a while.

One of the things that I would like to include in that rewrite is an easy way to publish your site, which would also solve this problem in a way, and/or create a mobile client.

[YashKarthik]

I don't think I understand what exactly is happening. I want to sortof clarify if this is how ORUI works:

• ORUI compiles current pages and emacs hosts them on localhost:35901.
• ORUI open websocket (from browser to emacs) to listen to changes - I think this is where the problem is: localhost:35903 is hardcoded.

If this is the case, would replacing the hardcoded hosts with 192.168.1.7 work.

[YashKarthik]

Update on this.

I cloned the project, replaced all ws://localhost:35903 to ws://192.168.1.7:35903 and ran npm run dev (port 3000). Nodes don't show up (mobile & desktop).

I think this can be fixed by running the websocket on the 192.168.1.7 (intead of localhost). This is what I have changed in org-roam-ui.el so far. I'm not entirely sure on how to expose the websocket to the local network.

diff --git a/org-roam-ui.el b/org-roam-ui.el
index 1544e75..fc720ba 100644
--- a/org-roam-ui.el
+++ b/org-roam-ui.el
@@ -180,12 +180,13 @@ This serves the web-build and API over HTTP."
    ;;; check if the default keywords actually exist on `orb-preformat-keywords'
    ;;; else add them
     (setq-local httpd-port org-roam-ui-port)
+    (setq-local httpd-host "192.168.1.7")
     (setq httpd-root org-roam-ui-app-build-dir)
     (httpd-start)
     (setq org-roam-ui-ws-server
           (websocket-server
            35903
-           :host 'local
+           :host "192.168.1.7"
            :on-open #'org-roam-ui--ws-on-open
            :on-message #'org-roam-ui--ws-on-message
            :on-close #'org-roam-ui--ws-on-close))

I'm guessing this should fix the issue as in web console I keep getting errors saying that firefox can't connect to ws://192.168.1.7:35903.

Cheers!

[buhtz]

I am also interested in a solution here.
But I do not understand the background. I even do not know what ORUI is or how node.js is involved here.
And how can 192.168.1.7 help here? What do I have to set a fixed IP? The "server" (where emacs and org-roam-ui runs) has a "dynamic" IP (from the link-local pool in 169.*) in the local network but a DNS name (server.local).

I do not understand why it is so complicated. There is a server running but not listening to requests from outside.

[YashKarthik]

Yeah it's doesn't have to be 192.168.1.7, I'm just using it as a placeholder.

[buhtz]

btw: Why is this in "Discussion" and not in "Issue"?

[YashKarthik]

I took a crack at this again. Turns out the diff that I posted above actually works if I stop the websocket (line 196) using C-x C-e and start in again (line 192) using C-x C-e.

(it has smth to do with stale .elc files)

I'm able to view the graph on mobile. But when I click on the nodes, it says that it could not find node.

I can see the error in the console:

[Error] Failed to load resource: Could not connect to the server. (%2FUsers%2FYash%2FKnowledge%20Base%2F20220112182337-do_things_that_don_t_scale.org, line 0)

The same happens on desktop as well.

This is because of the fetch(`http://192.168.1.7:35901/file/${file}`) in line 38 in /util/uniorg.tsx and components/Sidebar/Link.tsx (thought that kicks in only on hover)

I don't know how to fetch files over local network. I'm pretty sure figuring this out would solves this issue.