User:Pedro Sá Couto/Prototyping 5th/Flask App/Serving static files with Flask
< User:Pedro Sá Couto | Prototyping 5th
Revision as of 19:30, 2 April 2020 by Pedro Sá Couto (talk | contribs)
SERVING STATIC FILES WITH FLASK (JS, CSS, IMG)
01 Activate the created Virtual Environment
$ source venv/bin/activate
02 Run the app===
$ flask run --host=0.0.0.0
03 Create a new directory===
$ mkdir app/static
04 Create new directories to each of the types===
$ cd static $ mkdir js css img
05 Create a style.css, an app.js , and an image.png===
$ touch js/app.js css/style.css img/flask.png
06 Add something to JS and CSS to visualise them=== CSS
body{ background-color: #f1f1f1; }
JS console.log("Hello from app.js");
07 Use the files in the HTML===
You need to use JINJA templating sintax It always requires two arguments, the Directory and Filename
CSS
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
JS
<script src="{{ url_for('static', filename='js/app.js') }}"></script>
IMG
<img src="{{ url_for('static', filename='img/flask.png') }}" alt="">
Serving static files with Flask - Python on the web - Learning Flask Series Pt. 4 https://www.youtube.com/watch?v=GxT0zgZSHE8 https://pythonise.com/series/learning-flask/serving-static-files-with-flask