User:Pedro Sá Couto/Prototyping 5th/Flask App/Serving static files with Flask
< User:Pedro Sá Couto | Prototyping 5th
Revision as of 19:26, 2 April 2020 by Pedro Sá Couto (talk | contribs) (Created page with "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/stati...")
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 them in the HTML
You need to use JINJA templating sintax
It always requires two arguments, the Directory and Filename
CSS
<link rel="stylesheet" href="Template:Url for('static', filename='css/style.css')">
JS
<script src="Template:Url for('static', filename='js/app.js')"></script>
IMG
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