incorrect use of url_for in flask

Question

I have a flask server running which servers HTML pages with scripts stored in the static folder. This is an example script included in the header

<script src="{{url_for('static', filename='js/viewer.js')}}"></script>

and the GET requests are handled in the method

@app.get("/view/<string:id>")
def view(id):
    ...
    return render_template("view.html", id=id)

If I type the address in my browser, I get the page rendered as expected

http://0.0.0.0:5500/view/1234

Now I want to embed this HTML in a nicegui application, for which I used requests library

from nicegui import app, ui
import requests


r = requests.get('http://0.0.0.0:5500/view/1234')
ui.add_body_html(r.text)
ui.run()

But I get an error

http://127.0.0.1:8080/static/js/viewer.js not found

http://127.0.0.1:8080 is the address on which the nicegui application running. Also if I print out the text of the response, this is what I get

<script src="/static/js/viewer.js"></script>

How can I correctly locate these javascript files?

Edit 1: The solution provided by alexander-chereji worked but I also some javascript files with socketio clients. As an example

$( window ).on( "load", function() {
    socket = io.connect('http://' + document.domain + ':' + location.port + '/view');
...
});

and similar to the previous issue, I guess the client is trying to connect to the address of nicegui app. I get errors like

http://127.0.0.1:8080/socket.io/?EIO=4&transport=polling&t=Or4vR54 not found

If I hardcode the flask's address in the script just to test

socket = io.connect('http://0.0.0.0:5500/viz');

then I get an error on the flask side

http://127.0.0.1:8080 is not an accepted origin. # nicegui's address
127.0.0.1 - - "GET /socket.io/?EIO=4&transport=polling&t=Or5oYRP HTTP/1.1" 400 -

Answer 1

It seems like your issue is related to the paths of static files in your NiceGUI application. When you use ui.add_body_html(r.text), NiceGUI is rendering the HTML code on its own server, and it's not aware of the Flask server's static file paths.

To resolve this problem, you can modify the URLs of the static files in the HTML content before adding it to the NiceGUI application. You need to replace the relative paths with the absolute paths that are accessible from the NiceGUI server.

Here's an example of how you can do this:

from nicegui import ui
import requests
from bs4 import BeautifulSoup  # Make sure to install BeautifulSoup

# Make a request to your Flask server
r = requests.get('http://192.168.1.26:5500/view/1234')

# Parse the HTML content
soup = BeautifulSoup(r.text, 'html.parser')

# Update the URLs of static files
static_elements = soup.find_all('script', {'src': True})
for element in static_elements:
    element['src'] = 'http://192.168.1.26:5500' + element['src']

# Add the modified HTML to NiceGUI
modified_html = str(soup)
ui.add_body_html(modified_html)
ui.run()

This code uses BeautifulSoup to parse the HTML content and updates the src attribute of script tags to use the absolute path of the Flask server. Also, make sure to install BeautifulSoup by running pip install beautifulsoup4 (this is what I used).

I removed app from the imports since you don't use it in your code. Also it didn't work for me using 0.0.0.0, instead I changed it to 192.168.1.26. This should work for you as well.

Keep in mind that using this approach, your NiceGUI application will depend on the Flask server being accessible during its runtime. If the Flask server is not running, or if there are network issues, it can create problems with the NiceGUI app.