starting browser-repl should print correct URL to console

Hi and thanks for an apparently very cool library!

I just tried starting out on Windows inside WSL2 with the npx quickstart. The WSL2 won't open a browser automagically when I start npx shadow-cljs browser-repl. Instead I took the terminal output and tried to GET / on the local IP, which redirected me to /dashboard, which only showed "Loading..." and nothing else, with the web-socket connected and sending ping and pong. I spent quite some time trying to figure out what could be wrong.

It was only after trying on another machine with a graphical environment where I saw that the automagically opened browser is pointed to a different URL (/repl-js/browser-repl). Typing this on the first machine with the WSL2 setting also immediately works. If only I had known this earlier. So, bottom line, I think the URL to open in the browser should be printed on the console when starting browser-repl in a vanilla quickstarted project.

N.B.: What is that dashboard anyway? Cannot seem to find that term in the UserGuide anywhere, though there are some closed Github issues containing that term.

Hey Sebastian! I hope everything is going well.

In short, every time you start a new project and run it with shadow-cljs, by default the /dashboard path will always be initialized, after all, it is through this path that you will be able to see your active builds, your active runtimes and your HTTP servers (with their routes). In this case, in the top menu you can see that you can still navigate to builds (where you can force or stop the build of your project), runtimes (where you can explore your active runtime), inspect and inspect-latest to view inspections performed (with taps). The repl-js/browser-repl path is nothing more than an instance of your repl running in the browser, allowing you to evaluate your code and see it being executed in the browser (so you can, for example, evaluate something like (js/alert "hey") and check if it was executed correctly).

The purpose of the dashboard is to provide this broader view and allow you to inspect your project and its active instances in a more pragmatic way. I actually agree with you that perhaps these explanations should be more easily accessible in the Shadow CLJS User’s Guide.

Until then, I would like to say that I actually got to know this dashboard when I was studying Fulcro, in the explanatory videos published by Tony Kay (the attached link is exactly when I first came across this dashboard).

I believe I have understood your question, but if there is any misunderstanding on my part, please correct me. I hope this helps you!

Cheers

Hi Guto and thanks for your nice, newbie-friendly explanation!

I am a bit confused about Fulcro and the term "compilation server" (which I both never heard of before). Am I supposed to be using Fulcro, or would Fulcro be employed by shadow-cljs behind the scenes? If so, it seems like it's only halfway integrated when starting npx shadow-cljs browser-repl without any real project files, i.e., it exists as the /dashboard route which is the redirect destination of the / route, but it endlessly says "Loading..." Or is that npx shadow-cljs browser-repl command (or some larger part of shadow-cljs which the browser-repl is contained in) only meant for those who happen to be using Fulcro?

If all the answers are "no", which would not surprise me, then it still comes down to my phrased issue that only putting the correct URL (route) in the automagically opened browser -- and not on the terminal output as well" -- excludes users who run just plain shadow-cljs from a machine without a browser (probably without XDG or the like) and would access it via the network from a different machine.

The parts on Fulcro and the explanations are certainly a good source of further knowledge and understanding for me.

Thanks Sebastian

Which version did you use in all of this? There were some buggy versions a while ago where the /dashboard was buggy and never got beyond Loading .... This is the UI of shadow-cljs btw. You can start/stop/observe builds from there and it hosts Inspect. It isn't directly related to the browser-repl though, as that is its own thing not intergrated with the UI. (Fulcro isn't necessary or used by shadow-cljs btw, it was just a demo video showing how you'd use shadow-cljs with Fulcro).

I'm uncertain what the exact issue is though.

Here is what I did in WSL:

$ npx create-cljs-project brepl
shadow-cljs - creating project: /mnt/c/Users/thheller/code/tmp/brepl
Creating: /mnt/c/Users/thheller/code/tmp/brepl/package.json
Creating: /mnt/c/Users/thheller/code/tmp/brepl/shadow-cljs.edn
Creating: /mnt/c/Users/thheller/code/tmp/brepl/.gitignore
Creating: /mnt/c/Users/thheller/code/tmp/brepl/src/main
Creating: /mnt/c/Users/thheller/code/tmp/brepl/src/test
----
Installing shadow-cljs in project.
...

Then change into that brepl dir and

$ npx shadow-cljs browser-repl
shadow-cljs - config: /mnt/c/Users/thheller/code/tmp/brepl/shadow-cljs.edn
shadow-cljs - updating dependencies
shadow-cljs - dependencies updated
[2024-09-30 10:12:37.448 - WARNING] TCP Port 9630 in use.
shadow-cljs - server version: 2.28.15 running at http://localhost:9631
shadow-cljs - nREPL server started on port 65428
[:browser-repl] Configuring build.
[:browser-repl] Compiling ...
[:browser-repl] Build completed. (118 files, 117 compiled, 0 warnings, 5.52s)
Failed to open Browser automatically.
Please open the URL below in your Browser:
        http://localhost:9631/repl-js/browser-repl
cljs.user=>

Note that it printed the URL to open?

thheller / shadow-cljs

starting browser-repl should print correct URL to console #1205