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

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