search

getumbrel / umbrel-dashboard

[Deprecated] Moved to https://github.com/getumbrel/umbrel/tree/master/packages/dashboard. Web-based dashboard to interact with your Umbrel.
https://github.com/getumbrel/umbrel/tree/master/packages/dashboard
Other
132 stars 69 forks source link

[Suggestion] A better guide to run the dashboard locally (with your own Umbrel node) #428

Closed fryheid closed 1 year ago

fryheid commented 1 year ago

Hi everyone,

I cloned the repo to test some small improvements, but I ran into trouble getting the frontend to work locally:

  1. I created a .env.development pointing to umbrel.local (my own node), but got CORS errors and haven't been able to figure out how to whitelist my local ip. (I've added localhost and my local ip to DEVICE_HOSTS in the Umbrel start script, but that hasn't worked.)
  2. I then had the idea to run the umbrel-dashboard code on my own Umbrel node with code-server (to prevent CORS issues), but ran into problems because of a lack of SSL certification.
  3. I then started to look into running umbrel-manager and umbrel-middleware locally, but ran into issues with the .env variables, missing JWT files, and a lack of instructions.

I was eventually able to test my tweaks by using Requestly to redirect my umbrel.local to the app.js file in the dist folder of umbrel-dashboard, but this meant I had to rebuild the dist folder and update the Requestly redirect rule every time I made a change to the code.

So can anyone help me - and other devs - figure out how to work with the dashboard with a more extensive guide? Thanks in advance!

Sun0fABeach commented 1 year ago

I ran into pretty much the same problems. I'd like to open PRs for some quick and easy improvements / bugfixes to the UI, but can't get this thing working locally. I couldn't find anything on the community forums, so I opened a thread: https://community.getumbrel.com/t/how-to-run-the-umbrel-frontend-locally/9402

mayankchhabra commented 1 year ago

Sorry folks, the instructions in readme to run dashboard locally were outdated. We've depreciated umbrel-middleware and it's no longer required to run the dashboard.

You just need to add

VUE_APP_MANAGER_API_URL=http://umbrel.local/manager-api

in .env.development file inside your local umbrel-dashboard directory and that's all. Let us know if it works!

Sun0fABeach commented 1 year ago

Hey, thanks for the update. yarn serve builds successfully and I can open the UI, but the api requests run into CORS errors when I point the local dashboard to my Umbrel by setting the env variable as you suggested.

umbrel_cors

mayankchhabra commented 1 year ago

Oops, sorry, my bad. I left out a critical piece of info. You'll need to install a CORS unblocking extension in the browser to make it work. For example, here's one for Chrome.

Sun0fABeach commented 1 year ago

Alright, that works! I can browse around the dashboard no problem. The only thing left are some requests to some installed apps failing (net::ERR_CONNECTION_REFUSED), which causes their symbol to blink on the home view. They are also not reachable when I click on them. This is the case for Bitcoin Core and Electrs as you can see in my screenshot, but not for Syncthing, which works fine.

umbrel_fail2

fryheid commented 1 year ago

Also works for me, thanks a bunch, @mayankchhabra!