User:Pedro Sá Couto/Prototyping 5th/Flask App/Serving static files with Flask: Difference between revisions
No edit summary |
|||
Line 35: | Line 35: | ||
</pre> | </pre> | ||
JS | JS | ||
<pre> | |||
console.log("Hello from app.js"); | console.log("Hello from app.js"); | ||
</pre> | </pre> |
Revision as of 19:30, 2 April 2020
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