User:Pedro Sá Couto/Prototyping 5th/Flask App/Serving static files with Flask

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