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

From XPUB & Lens-Based wiki
No edit summary
 
(2 intermediate revisions by the same user not shown)
Line 6: Line 6:
</pre>
</pre>


02 Run the app===
===02 Run the app===
<pre style="color: silver; background: black;">
<pre style="color: silver; background: black;">
$ flask run --host=0.0.0.0
$ flask run --host=0.0.0.0
</pre>
</pre>


03 Create a new directory===
===03 Create a new directory===
<pre style="color: silver; background: black;">
<pre style="color: silver; background: black;">
$ mkdir app/static
$ mkdir app/static
</pre>
</pre>


04 Create new directories to each of the types===
===04 Create new directories to each of the types===
<pre style="color: silver; background: black;">
<pre style="color: silver; background: black;">
$ cd static
$ cd static
Line 22: Line 22:
</pre>
</pre>


05 Create a style.css, an app.js , and an image.png===
===05 Create a style.css, an app.js , and an image.png===
<pre style="color: silver; background: black;">
<pre style="color: silver; background: black;">
$ touch js/app.js css/style.css img/flask.png
$ touch js/app.js css/style.css img/flask.png
</pre>
</pre>


06 Add something to JS and CSS to visualise them===
===06 Add something to JS and CSS to visualise them===
CSS
CSS
<pre>
<pre>
Line 35: Line 35:
</pre>
</pre>
JS
JS
<pre>
console.log("Hello from app.js");
console.log("Hello from app.js");
</pre>
</pre>


07 Use the files in the HTML===
===07 Use the files in the HTML===
<pre>
 
You need to use JINJA templating sintax
You need to use JINJA templating sintax
It always requires two arguments, the Directory and Filename
It always requires two arguments, the Directory and Filename
</pre>
 
CSS
CSS
<pre>
<pre>

Latest revision as of 19:31, 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
Retrieved from "https://pzwiki.wdka.nl/mw-mediadesign/index.php?title=User:Pedro_Sá_Couto/Prototyping_5th/Flask_App/Serving_static_files_with_Flask&oldid=168401"