Check if server is reachable at wss://fruity-games-tan.loca.lt/_event

[sugizo]

Describe the bug
Check if server is reachable at wss://fruity-games-tan.loca.lt/_event
when test it on
google colab
with
localtunnel (npm install localtunnel)

To Reproduce
Steps to reproduce the behavior:
1 open https://colab.research.google.com
2 execute the code on colab :
!npm install localtunnel

pip install -U reflex

!mkdir app
!cd app && reflex init

%%writefile app/app/app.py
import reflex as rx 
class State(rx.State):
    count: int = 0

    def increment(self):
        self.count += 1

    def decrement(self):
        self.count -= 1

def index():
    return rx.hstack(
        rx.button(
            "Decrement",
            color_scheme="ruby",
            on_click=State.decrement,
        ),
        rx.heading(State.count, font_size="2em"),
        rx.button(
            "Increment",
            color_scheme="grass",
            on_click=State.increment,
        ),
        spacing="4",
    )

app = rx.App()
app.add_page(index)

import urllib
print("Password/Enpoint IP for localtunnel is:", urllib.request.urlopen('https://ipv4.icanhazip.com').read().decode('utf8').strip("\n") )

!cd app && reflex run --backend-host 0.0.0.0 --backend-port 8000 --frontend-port 3000 &>/content/logs.txt & npx localtunnel --port 3000

Expected behavior
websocket can work and update the value on the google colab site
like the reflex example on it's website reflex.dev

Screenshots

Specifics (please complete the following information):

• Python Version: Python 3.10.12
• Reflex Version: reflex-0.6.6.post3
• OS: ubuntu jammy (on google colab)
• Browser (Optional): chrome

Additional context
streamlit, shiny and dash can work well in google colab with localtunnel

thanks and best regards

[linear]

ENG-4203 Check if server is reachable at wss://fruity-games-tan.loca.lt/_event

[Lendemor]

You need to configure api_url in rxconfig.py

[sugizo]

tested add api_url in app/rxconfig.py

%%writefile app/rxconfig.py
import reflex as rx

config = rx.Config(
    app_name = "app",
    api_url = "http://localhost:8000",
)

still got same error

note
the url is generated randomly
when execute npx localtunnel

not sure how to pass the url generated by npx localtunnel

any way out ?

thanks and best regards

[masenf]

you need to tunnel both ports 3000 and 8000 and set the api_url to the port 8000 tunnel

can you start the tunnels before the port is up? then take the output of the npx localtunnel command and set it in the environment for API_URL, no need to write it to rxconfig.py

[sugizo]

can you start the tunnels before the port is up?

not sure how to do it, any examples ?

following advice above to not write api_url in rxconfig.py
and
start both ports in localtunnel still got the same error
e.g. add both ports 3000 and 8000 on localtunnel
!cd app && reflex run --backend-host 0.0.0.0 --backend-port 8000 --frontend-port 3000 &>/content/logs.txt & npx localtunnel --port 3000 8000

another tested but return a new error on localtunnel
!cd app && reflex run --backend-host 0.0.0.0 --backend-port 8000 --frontend-port 3000 &>/content/logs.txt & npx localtunnel --port 3000, 8000
and
!cd app && reflex run --backend-host 0.0.0.0 --backend-port 8000 --frontend-port 3000 &>/content/logs.txt & npx localtunnel --port 3000 --port 8000

return an new error
Invalid argument: port must be a number

thanks and best regards