How could I use something like STATIC_URL in django to route the frontend?

[deroki]

Hi everyone, just a quick question

I have a reflex site proxied to from localhost:3000 -> www.mypage.com/myreflexpage
This is done through nginx reverse proxy
I can access the main page BUT it has no access to any router, because its trying to search in www.mypage.com/* instead of www.mypage.com/myreflexpage/* and it is giving me "not found" error.
How could I use something like STATIC_URL in django to route the frontend?

thanks in advance

Carlos

[deroki]

you have to set frontend_path="/subpath"

being subpath like-> https://www.mypage.com/subpath

[alq-eium]

Reflex version: 0.6.5

I continue the thread with one more question. I have set frontend_path="/subpath" and routes work as expected. However, the files stored in my assets/ folder are not found, because the web browser tries to find them on /image1.png instead of /subpath/image1.png. If I add the subpath when inserting the image (rx.image(src="/subpath/image1.png")) it works fine. However, I thought that setting frontend_path="/subpath" would be enough.

Additionally I am not sure about paths and urls when my app is deployed in a subpath. I have an NGINX Docker container for the frontend and also works as a proxy and a Python Docker container for the backend.

• Should I add the subpath to deploy_url and api_url?
• Should I add the subpath on nginx.conf file?

This is my configuration, but I am not sure about it:

config = rx.Config(
    app_name="myapp",
    api_url=f"http://mypage.com/subpath",  # Is not he backend url, but the frontend URL since the NGINX proxies to the backend
    frontend_path="/subpath",
    deploy_url="http://mypage.com/",
    frontend_port=3000, # Only works in development mode `reflex run`
    backend_port=8000, 
    timeout=300,
    gunicorn_workers=1,
    gunicorn_worker_class="uvicorn.workers.UvicornWorker",
)

Thanks in advance,

Alejandro

[layannyoliveira]

Hi, have you found a solution?

[alq-eium]

Hello @layannyoliveira !! I address several topics in my message. I tell you what I did in each one.

• Regarding the files stored in ./assets I concatenate an environment variable called FRONTEND_PATH in this way:

frontend_path = os.getenv("FRONTEND_PATH", "/my-subpath") 

# Main page
def index() -> rx.Component:
    return rx.vstack(
            rx.hstack(
                rx.image(
                    src=f"{frontend_path}/image1.jpg",
                    width="auto",
                    height="auto",
                    border_radius="4px",
                ),
                rx.image(
                    src=f"{frontend_path}/image2.jpg",
                    width="150px",
                    height="auto",
                    border_radius="4px",
                ),

• Regarding rxconfig.py file. This is my setup (in production I use Redis). I have followed this tutorial, but in my case the NGINX container also acts as a proxy, not just the webserver:

import os
import reflex as rx

nginx_host = os.getenv("NGINX_HOST", "http://localhost:8000")  # fallback para local
frontend_path = os.getenv("FRONTEND_PATH", "/my-subpath")  # fallback para local
redis_url = os.getenv("REDIS_URL")  
config = rx.Config(
    app_name="my-app",
    api_url=nginx_host,  # Because my NGINX container proxies to the reflex backend container
    frontend_path=frontend_path,
    deploy_url="http://my-web.com",
    frontend_port=3000, 
    backend_port=8000, 
    timeout=300,
    gunicorn_workers=1,
    gunicorn_worker_class="uvicorn.workers.UvicornWorker",
    redis_url=redis_url,
)

I hope this helps. Please let me know if you have more questions.