Getting correct path to static files to serve them through nginx
In your given configuration, there are (at least) two ways of hosting static content. It is not clear to me for which of the two alternatives below you decided - I have the impression you want to have somehow both?
I am sure you read https://flask.palletsprojects.com/en/1.1.x/tutorial/static/ which says
Flask automatically adds a static view that takes a path relative to the
flaskr/staticdirectory and serves it.The URL would be the same as for your flask SPA with an additional
staticbehind, see e.g. Link to Flask static files with url_for or https://flask.palletsprojects.com/en/1.1.x/quickstart/#url-buildingThe file location for the static content would be
/staticwithin your flask-app-directory.Please also note How to serve static files in Flask which says
The preferred method is to use nginx or another web server to serve static files; they'll be able to do it more efficiently than Flask.
In this case, the Nginx docu on Serving Static Content is your friend:
The URL will be simply
www.example.com/whateverHerokuPutsHere/static.The file location can be anything you specify inside your
nginx.conf, usually one would put absolute paths there.Disclaimer: I never worked with heroku, so I am not sure whether there will be actually a
whateverHerokuPutsHere. It could well be that it is simplyexample.comas you configure somewhere on Heroku's UI. For the file-location I found a blog Nginx as a static site server on Heroku.
use python code to render files
@app.route("/")def main(): return render_template('main.html')examples/flask/stat/templates/main.html
if you use static imagesuse relative path
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"> <link href="/static/css/style.css" rel="stylesheet"></head><body><h1>Hello World</h1><img src="static/img/code_maven_128.png" /></body></html>The CSS itself is also very simple, its content is not relevant for our purposes.examples/flask/stat/static/css/style.cssh1 { color: blue;}How to run thisThere are two simple ways to run this in developlent. For both you need to open your terminal (cmd window if you are on Windows), change to the directory where the application file (web.py in our case) can be found.
python web.pyA better way, that provides more control over how to run this is to use:
https://code-maven.com/flask-serve-static-files
enter code here
I found out that the issue was related to having an incorrect alias path. It was difficult to determine at first since Heroku has its root directory set up differently than I do on my local machine. The root directory for the Heroku application is /app so I changed the alias to this, based on my project hierarchy. This should work for anyone else facing similar issues.
location /static { alias /app/flask_app/static;}