https://prefect.io logo
#prefect-ui
Title
# prefect-ui
a

Ali Abbas Zaidi

07/13/2021, 12:30 PM
Hey guys, running into this issue with prefect, and I'd appreciate some insight. I'm working on just the tutorial from the docs, and the page isn't loading
k

Kevin Kho

07/13/2021, 12:42 PM
Hey @Ali Abbas Zaidi, how did you spin up Prefect server?
prefect server start
?
a

Ali Abbas Zaidi

07/13/2021, 12:44 PM
Yep!
The server isn't running locally, but on a remote server
k

Kevin Kho

07/13/2021, 12:53 PM
I think this thread can help you. In general, you need to configure the API address to hit the IP Address of the Server, since this is not on your local machine. The ports of the machine that holds server need to be able to accept traffic.
a

Ali Abbas Zaidi

07/13/2021, 12:58 PM
I couldn't find it there, but instead found it in
./miniconda3/envs/prefect/lib/python3.8/site-packages/prefect/config.toml
I made the changes, and it didn't make a difference
k

Kevin Kho

07/13/2021, 1:18 PM
What are you trying to do? Load the UI or spin up an agent?
a

Ali Abbas Zaidi

07/13/2021, 1:23 PM
Load the UI. The same as the issue just posted in the #prefect-server
k

Kevin Kho

07/13/2021, 1:28 PM
I looked at that issue, I think it’s a bit different. The localhost:4200/graphql is the API endpoint, not the UI. The UI will be on port 8080. So for you to access the UI from your local machine, you want to go to http://VM-IP-Address:8080 . If this doesn’t work, try going to localhost:8080 on the server that has it to see if you can open it from there. If you can, then it’s a matter of opening the right ports on the VM
a

Ali Abbas Zaidi

07/13/2021, 1:30 PM
I just checked. I can view the UI from the server itself, but any external connection seems to say that it can't find it on the localhost
I do have all of my ports open as well
k

Kevin Kho

07/13/2021, 1:31 PM
Are you trying localhost:8080 from your local machine? Or are you trying http://VM-IP-Address:8080?
a

Ali Abbas Zaidi

07/13/2021, 1:34 PM
VM-IP-ADDRESS:8080 is running on my local machine and returns this. Checking out the same IP on my VM returns the proper website
k

Kevin Kho

07/13/2021, 1:37 PM
Could you give a screenshot of what the proper website looks like when run from the server?
a

Ali Abbas Zaidi

07/13/2021, 1:41 PM
Not really, but I can assure you that it looks like it's up and running
It's connection is also to the IP, rather than localhost
To elaborate further, prefect is ONLY running on the remote server
k

Kevin Kho

07/13/2021, 1:47 PM
So on the VM, do you see the Dashboard, but without these gray boxes?
a

Ali Abbas Zaidi

07/13/2021, 1:47 PM
Yes
k

Kevin Kho

07/13/2021, 1:48 PM
Ok will ask the team about this and get back to you
a

Ali Abbas Zaidi

07/13/2021, 1:52 PM
Thanks!
n

nicholas

07/13/2021, 2:08 PM
Hi @Ali Abbas Zaidi - as a test, can you do 2 things? 1. visit
<http://your-vm-ip-address:8080/settings.json>
, report that the
server_url
matches your expectations (which should be the graphql endpoint for your server, matching something like
<http://your-vm-ip-address:4200/graphql>
. 2. Press the (?) button at the top of the page and go to "Getting started". From there you should be able to provide an api address and test the connection
a

Ali Abbas Zaidi

07/13/2021, 2:25 PM
This is the output of
<http://your-vm-ip-address:8080/settings.json>
Copy code
{
  "server_url": "<http://192.168.0.180:4200/graphql>",
  "base_url": null
}
That's the link in the (?)
<http://localhost:4200/graphql>
n

nicholas

07/13/2021, 2:32 PM
Try providing the server url linked there to the input box on the getting started screen:
a

Ali Abbas Zaidi

07/13/2021, 2:40 PM
n

nicholas

07/13/2021, 2:45 PM
Yes, please put your server endpoint in the input box there and press "Connect"
a

Ali Abbas Zaidi

07/13/2021, 2:47 PM
Oh wow! That worked. Thanks so much!
n

nicholas

07/13/2021, 2:50 PM
Perfect, to make sure the change is applied in the future, you can clear your server cache by opening the JavaScript developer console in your browser and typing
localStorage.clear()
a

Ali Abbas Zaidi

07/13/2021, 2:52 PM
Ah! Great, thanks!
Another problem that I'm running into is that my flows aren't showing up in the UI
n

nicholas

07/13/2021, 2:56 PM
If you're connected properly, any flows registered to the server should show up in the UI. Can you confirm they exist in the database/API?
a

Ali Abbas Zaidi

07/13/2021, 2:56 PM
How do I do that?
n

nicholas

07/13/2021, 2:59 PM
You can use the interactive api in the UI to run this query:
Copy code
query {
  flow {
    id, name
  }
}
a

Ali Abbas Zaidi

07/13/2021, 3:01 PM
No flows it seems:
Copy code
{
  "data": {
    "flow": []
  }
}
n

nicholas

07/13/2021, 3:03 PM
Then it's likely you've been registering flows to a different Server instantiation than your remote server
a

Ali Abbas Zaidi

07/13/2021, 3:04 PM
honestly, not even sure if I am registering them. Can you elaborate more on what that is? I'm currently going over the docs but am confused about that and what agents do
Alright, i got it registered, and it seems to be running right now!
👍 1
n

nicholas

07/13/2021, 3:09 PM
Registration is how you let your orchestration layer (in this case Prefect Server) know that your flow exists, where it's stored, and how to run it. Check out https://docs.prefect.io/orchestration/tutorial/first.html for some help getting started 🙂
74 Views