Plotly/Dash web page not loading with IIS URL Rewrite - iis

Question

I have a Plotly-Dash web application running as a service on a Windows Server 2016 on port 50001.
I can directly access it via its port on a web browser. (working page via direct url)
I configured the IIS server so that requests made to the route /signatures are rewritten to the service on 50001. It seems to correctly request the page, but what I see is a page stuck on the loading screen. (IIS URL not working)
I feel like it is a problem between Dash and IIS but I'm not able to figure out why.
My question is what should I do so that my web page is correctly displayed when I use IIS's URL Rewrite with Dash?
Here is my web.config file:
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<clear />
<rule name="signatures" stopProcessing="true">
<match url="^signatures/?(.*)" />
<conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
<action type="Rewrite" url="http://localhost:50001/{R:1}" />
</rule>
<!-- other rules -->
</rules>
</rewrite>
</system.webServer>
</configuration>
Thanks in advance.
Edit :
Here are the screenshots of the network tab for the two requests:
network tab for direct URL
network tab for rewritten URL
It seems like in the rewritten URL Dash requests all its resources from localhost and cannot get them.
Answer
Apparently I'm banned from answering questions (even my own !!), so I'm adding my answer as an edit.
Based on #JennyDai 's suggestions I found that the client was not requesting the resources from the correct route.
I found a workaround by editing the code to request local resources with the same prefix.
In the creation of my Dash app, I set the parameter requests_pathname_prefix to have the same value as the prefix used in IIS.
app = dash.Dash(
__name__,
external_stylesheets=external_stylesheets,
requests_pathname_prefix=f"/dash/", # <-- same as the prefix in IIS
)
see dash.Dash in the API reference
Full example
Here is a full example for a test app running on port 50010 that should be accessible from http://localhost/dash/
IIS config (web.config)
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<clear />
<!-- other rules -->
<rule name="dash" enabled="true" stopProcessing="true">
<match url="^dash/(.*)" />
<conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
<action type="Rewrite" url="http://localhost:50010/{R:1}" />
</rule>
<!-- other rules -->
</rules>
</rewrite>
</system.webServer>
</configuration>
Python code
The code is based on this tutorial given by Plotly.
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd
external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]
PORT = 50010
app = dash.Dash(
__name__,
external_stylesheets=external_stylesheets,
requests_pathname_prefix=f"/dash/", # <-- same as the prefix in IIS
)
df = pd.DataFrame(
{
"Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
"Amount": [4, 1, 2, 2, 4, 5],
"City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"],
}
)
fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")
app.layout = html.Div(
children=[
html.H1(children="Hello Dash"),
html.Div(
children="""
Dash: A web application framework for Python.
"""
),
dcc.Graph(id="example-graph", figure=fig),
]
)
if __name__ == "__main__":
app.run_server(debug=True, port=PORT)
After running the server here The page is displayed correctly with a rewritten URL.
Problems with this workaround
Currently, the page does not display correctly when we try to connect directly to the port. I'm fine with how it works for now.
Another problem is that every time we want to change the URL in IIS we will need to redeploy the code with the same edit, but that's a minor problem currently.
Thanks to #JennyDai for their help.