[Python] Problem with file path resolution when running a flask app with waitress and IIS

I'm trying to host my app on a server I have. It's running with Flask on the backend. It works on my local host, and with waitress, but when I add IIS into it so that I can use it as a page of the default website, the filepath resolution stop working.

What I mean by that is, anything under my frontend folder cannot get found, all except the page.html template because the html does load, but not the js, css or images.

Let's say the URL that it ends up at is https://myhost/myapp

This is my file structure

myapp
└── src
├── backend
│ ├── app_logic
│ │ └── ...
│ └── app.py
└── frontend
├── css
└── styles.css
├── images
├── image1.png
└── image2.png
├── js
│ └── my_apps_js.js
└── templates
└── page.html


This is my app.py (Only the routing parts)

import flask
import os
from app_logic import redacted
import tempfile
import zipfile
from werkzeug.middleware.proxy_fix import ProxyFix

APPLICATION_ROOT = '/MYAPP'

template_dir = os.path.abspath(os.path.join(os.path.dirname(__file__), '../frontend/templates'))
static_dir = os.path.abspath(os.path.join(os.path.dirname(__file__), '../frontend'))

app = flask.Flask(
__name__,
template_folder=template_dir,
static_folder=static_dir,
static_url_path=f'{APPLICATION_ROOT}/src/frontend'
)
app.config["APPLICATION_ROOT"] = APPLICATION_ROOT
app.wsgi_app = ProxyFix(
app.wsgi_app, x_for=1, x_proto=1, x_host=1, x_prefix=1
)
@app.route('/')
def hello_world():
return flask.render_template('page.html')

@app.route('/toMYAPP')
def to_my_app():
return flask.render_template('page.html')


This is my page.html (Only the link and images section)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MYAPP</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="{{ url_for('static', filename='js/my_app_js.js') }}"></script>
</head>
<body style="background-color: #f0f8ff;">

<!-- Top Left and Right Logos -->
<img src="{{ url_for('static', filename='images/image1.png') }}" class="logo_left" >
<img src="{{ url_for('static', filename='images/image2.png') }}" class="logo_right">


This is the command I'm using to host using waitress

> cd MYAPP/src/backend
> waitress-serve --host 127.0.0.1 --port=8081 app:app


And this is my IIS URL Rewrite rule (It is in a virtual directory under the default web site, IIS Version 10.0.x)

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="ReverseProxyToFlask" stopProcessing="true">
<match url="^(.*)$" />
<action type="Rewrite" url="http://localhost:8081/{R:1}" />
<serverVariables>
</serverVariables>
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>


This is my first time with this kind of set up, so if something looks off let me know or if any additional info would be useful

I've tried playing around with the static_url_path. These are the values I can remember I've tried

• f'{APPLICATION_ROOT}/{static_dir}'
• f'{static_dir}'
• f'{APPLICATION_ROOT}/src/frontend'
• f'{APPLICATION_ROOT}/frontend'
• f'{APPLICATION_ROOT}/static'
• f'/myhost/{APPLICATION_ROOT}/{static_dir}' <-- And all the above variations with the prefix

Also tried removing static_url_path and just using static_folder but that doesn't work either. Before using IIS, I did not have the static_url_path and that worked.

All of these give me a 404 (not found) error on the js,css and png files

Continue reading...